Adobe Photoshop plugins for WebP

Plugis for

Opening .WebP files within older versions of Adobe Photoshop is not native. Meaning you will need a way to instruct Adobe Photoshop on handling such an image file. This article will show you a quick and easy way of doing so. Note that this should work for the following versions of Adobe Photoshop: 7.0, CS2, CS3, CS4, CS5 and CS6.

What is WebP Image Format? #

WebP is yet another lossy or lossless image file format, producing a low file size and high quality. The WebP image compression format was developed by Google, Inc. and designed to help reduce the file size of images greater than that of traditional .jpg compression.

Opening WebP in Photoshop #

We will need a plugin to be able to open .WebP files from within Adobe Photoshop. Brendan Bolles of fnordware has come to many of our rescue by creating such a plugin. 

• WebP for Photoshop v0.5b9, 31 July 2020 for Windows

 Once downloaded, unzip the files and access the folder for your particular operating system. Don’t know what version of Windows you are operating? You can find out by pressing the Windows Key + Pause/Break on your keyboard. The “System type” will show you what bit operating system you are using.

From within the proper bit folder, copy the WebP.8bi file and paste it into the appropriate directory.

• For 64bit copy to directory: C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\

You will need to restart Adobe Photoshop for the plugin to be loaded, which is done upon initiation. Now you can open WebP files in Photoshop. 

Encoding images

Images are either vectors or bitmaps. Bitmap images are made out of small parts called pixels. Vector images are made using coordinates and geometry. Images can be compressed to reduce file size.

Part of

Computer Science

Binary and data representation

 

Compression

Compression is used to reduce file sizes and change various attributes of an image file. These attributes include:

• file type
• resolution
• dimensions
• bit depth

Compression can be lossy or lossless. Lossless compression means that as the file size is compressed, the picture quality remains the same - it does not get worse. Also, the file can be decompressed to its original quality. Lossy compression permanently removes data.

Types of compressed image files

There are a number of types of compressed image file. These include the following.

PNG

PNG is a lossless compression type. It is often used where the graphic might be changed by another person or where the image contains layers of graphics that need to be kept separate from each other. It is high quality.

JPEG

JPEG is often used for digital camera images because it has a fairly small file size for the quality that it displays. JPEG is a lossy format that offers a higher compression rate than PNG in the trade-off for quality.

GIF

GIF compresses images to a maximum 8-bit colour depth, making it unsuitable for high-quality photographs. GIF is often used where transparency is needed on the graphic. GIF can also be used to store simple animated images.

Colour depth

The colour depth of an image is measured in bits. The number of bits indicates how many colours are available for each pixel. In the black and white image, only two colours are needed. This means it has a colour depth of 1 bit.

A 2-bit colour depth would allow four different values: 00, 01, 10, 11. This would allow for a range of colours such as:

Binary code	Colour
00	White
01	Light grey
10	Dark grey
11	Black

The greater the colour depth (bits per pixel), the more colours are available.

Colour depth	Available colours
1-bit	21 = 2
2-bit	22 = 4
3-bit	23 = 8
4-bit	24 = 16
5-bit	25 = 32
6-bit	26 = 64
7-bit	27 = 128
8-bit	28 = 256

Different versions of an image with different colour depth

A black and white image (1-bit colour depth)

Most computer systems and digital cameras use 24-bit images. 24 in binary is 1111 1111 1111 1111 1111 1111. This means there are over 16 million possible colours per pixel.

Resolution is a measure of pixel density, usually measured in dots per inch (dpi). Images on websites usually have a resolution of 72 dpi. This means that a 1-inch square contains a grid of pixels that is 72 pixels wide by 72 pixels high. 72 x 72 = 5184 pixels per square inch.

High quality printed images in books and magazines have a higher resolution than computer screens. Magazines often use either 300 dpi or even 600 dpi.

Metadata

Image files usually also contain metadata. Metadata means 'data about data' and provides information about the image. The information includes:

• filename
• file format - eg JPEG, GIF or PNG
• dimensions
• resolution
• colour depth
• time and date the image was last changed
• camera settings when the photo was taken
• GPS

Glossary

1. binary
   A number system that contains two symbols, 0 and 1. Also known as base 2.
2. bit
   The smallest unit of data in computing represented by a 1 in binary.
3. bit depth
   The number of bits available to store an audio sample.
4. bitmap
   An image made up of pixels. This type of image loses quality if its width and/or height are increased.
5. CAD
   Computer-aided design - the use of computers to assist in any of the phases of product design.
6. colour depth
   The amount of bits available for colours in an image.
7. compression
   A method of reducing file sizes, particularly in digital media such as photos, audio and video.
8. GIF
   Graphics Interchange Format - an 8-bit digital image format which uses lossless compression. Also used for short animations.
9. GPS
   Global Positioning System. These pinpoint an exact location on the globe according to lines of latitude and longitude.
10. HTML
    HyperText Markup Language. The language used to write and display web page documents.
11. HTML5
    5th generation of HTML.
12. infographic
    A graphical image which contains, or is generated from, data and statistics.
13. JPEG
    Joint Photographic Experts Group - a digital image format which uses lossy compression.
14. lossless
    A form of compression that encodes digital files without losing detail. Files can also be restored to their uncompressed quality.
15. lossy
    A form of compression that reduces digital file sizes by removing data.
16. memory
    The part of a computer that stores data.
17. metadata
    Data about data, eg photo image files have data about where the photo was taken and which camera took the picture.
18. open standard
    A publicly agreed method of using and sharing different types of information, particularly over the internet.
19. pixel
    One of the individual units (often called dots) that make up an image.
20. PNG
    Portable network graphics - a digital image format that uses lossless compression.
21. resolution
    The fineness of detail that can be seen in an image - the higher the resolution of an image, the more detail it holds. In computing terms, resolution is measured in dots per inch (dpi).
22. smartphone
    A mobile phone with a powerful processor that is capable of running applications and accessing the internet.
23. vector
    An image stored as mathematical instructions for how to draw it. This means its width and height can be increased without the loss of quality.

 

When it comes to reducing the size of your images for the web there are different types of compression you can choose from. In today's post we will look at lossy vs lossless compression and the advantages and disadvantages of both methods. There is no right or wrong method, it comes down to a decision of what you think might work best for your website and environment based on a number of different factors.

 

Lossy compression

Lossy compression refers to compression in which some of the data from the original file (JPEG) is lost. The process is irreversible, once you convert to lossy, you can't go back. And the more you compress it, the more degradation occurs. JPEGs and GIFs are both lossy image formats. By default WordPress uses a lossy compression rate of 90 percent to optimize JPEG images when creating preview images. You can change this using the filter jpeg_quality in your functions.php file.

One of the biggest obvious benefits to using lossy compression is that it results in a significantly reduced file size (smaller than lossless compression method), but it also means there is quality loss. Most tools, plugins, and software out there will let you choose the degree of compression you want to use. In our example below we took an image and applied different compression ratios to it. You can see there is a big decrease in the size of the images which is great. But you can also see the image degrade in quality as you apply higher ratios of compression.

If you look in the dark gray areas on the middle and far right images it is very noticeable where "compression artifacts" begin to occur. With lossy compression it is about finding a medium ground which you are happy with, for file size and still retaining an acceptable image quality. With 50% compression applied we decreased our image file size by 90%. With 80% compression applied we decreased our image file size by 95%.

Lossy advantages and disadvantages

• Advantages: Very small file sizes and lots of tools, plugins, and software support it.

• Disadvantages: Quality degrades with higher ratio of compression. Can't get original back after compressing.

Lossless compression

Lossless compression refers to compression in which the image is reduced without any quality loss. Usually this is done by removing unnecessary metadata from JPEG and PNG files. RAW, BMP, GIF, and PNG are all lossless image formats. It is important to note that since JPEGs are a lossy format that when using the "maximum" preset in Photoshop, this doesn't mean it is lossless. However, even images exported from Photoshop using the "Save for Web" function can still see significant reductions.

The big benefit to lossless compression is that you can retain the quality of your image and still achieve a smaller file size. We took the same image again and ran it through our Optimus Image Optimizer plugin, which uses lossless compression. It also creates progressive JPEGs.

If you look in the dark gray areas this time you can see there is almost no noticeable difference. And we were still able to decrease our file size by 14%. So if you are looking to retain the quality of your images, lossless compression is definitely the way to go.

Lossless advantages and disadvantages

• Advantages: No loss of quality, slight decreases in image file sizes.

• Disadvantages: Larger files than if you were to use lossy compression.

 

WebP lossless compression

And of course we can't forget about WebP. This is where combining Google's WebP format along with lossless compression really is powerful! We took the same image again and ran it through our Optimus Image Optimizer plugin, which converts the image to WebP format, using lossless compression.

If you look in the dark gray areas again there is almost no noticeable difference. And this time we were able to decrease our file size by 79%. So if you are looking to retain the quality of your images and still achieve an impressive reduction in file size, you must give WebP a try! You can use our Optimus and Cache Enabler plugins to convert and deliver WebP images in WordPress. Read more about delivering WebP files.

WebP advantages and disadvantages

• Advantages: No loss of quality, large decreases in file size.

• Disadvantages: Less browser support, slightly larger file sizes than lossy.

Summary

Again when it comes to lossy vs lossless, there is no right or wrong choice. It comes down to what works best for your website and visitors. For example, if you run a photography website, lossless along with the WebP format might be a better way to go as you need your images to be crystal clear and still be reduced in file size. Or you could go the lossy route and use a smaller compression ratio.

 

JPG to WebP comparison

We used our test environment and uploaded five different full resolution JPGs (most of them averaging between 1-5 MB). We then ran them through our Optimus WordPress plugin to both compress and convert them to WebP.

When we say uncompressed, we are really referring to not compressed as much, because generally JPGs are already compressed to a certain extent.

 

JPG to WebP results

Here are the results of the uncompressed JPGs, compressed JPGs, and then after they have been converted to WebP.

Image	File name	Original JPG	Compressed JPG	WebP format	Size difference
	jpg-to-webp-1.jpg	758 KB	685 KB	109 KB	86%
	jpg-to-webp-2.jpg	599 KB	529 KB	58.8 KB	90%
	jpg-to-webp-3.jpg	960 KB	881 KB	200 KB	79%
	jpg-to-webp-4.jpg	862 KB	791 KB	146 KB	83%
	jpg-to-webp-5.jpg	960 KB	877 KB	71.7 KB	93%

Compressing our JPGs resulted in an almost 10% decrease in average image size. Optimus uses lossless compression, which means our images still look as sharp as they did before, however, the exciting part is that WebP resulted in a 85.87% decrease in average image size. In our scenario, just converting to WebP decreased our already compressed JPGs by another 85%.

 

Uncompressed JPG speed test

We then ran five tests with WebPageTest, using our uncompressed JPGs, and took the median.

Load time: 1.931 s
Total page weight: 745 KB

 

Compressed JPG speed test

We then ran five tests with WebPageTest, using our compressed JPGs, and took the median.

Load time: 1.761 s
Total page weight: 731 KB

 

WebP speed test

We then ran five tests with WebPageTest, using WebP, and took the median.

Load time: 1.717 s
Total page weight: 532 KB

 

When running speed tests the results will always vary based upon your own environment. In the tests we completed, by using WebP images as opposed to uncompressed JPGs, our load times decreased by 11% and total page weight decreased by 29%. We also saw slight decreases in overall load times when comparing compressed JPGs to WebP.

Remember to also be aware of WebP browser support to ensure WebP images are not delivered to unsupported browsers. If you are using our Cache Enabler WordPress plugin, it is capable of automatically delivering the accepted image format based on browser support. For example, if a visitor using Chrome accesses your website the WebP image will be delivered. If a visitor using Safari accesses your website then the PNG or JPG image will be delivered.