Replace JPG, PNG and GIF files by WebP

Introducing WebP

WebP is an open image format offered by Google, allowing the replacement of different image formats on the Web:

• JPG, generally used for photos , with a loss of quality (destructive format)
• PNG, used for photos and images without loss of quality and with several levels of transparency (the alpha channel)
• GIF, recommended for images with few colors, a level of transparency and animations

Until now, depending on the content to display, you had to choose the most suitable format according to your needs by making a compromise between quality and size of the file.

WebP provides a solution to this dilemma by offering itself as a format that is both weight efficient and quality efficient, managing lossy or lossless compression, transparency levels and animations. Note that this is not always the case : I have indeed converted PNG-8 files to Webp and they were 20% larger.

Website modifications for WebP

You will first need to convert your current images with WebP:

• For batch conversion of a set of images, XnView, the free image viewing software, will do the job perfectly.
• For frame-by-frame editing :
• The latest versions of Gimp recognize the format.
• For Photoshop, if your version can't read it, you can apply this:
• Visit the site Telegraphics.com.au which offers extensions for Photoshop.
• Download the archive that corresponds to your version (32-bit or 64-bit)
• Drop the WebPFormat.8bi (or WebPFormat64.8bi) file in the Photoshop directory, in the " Plug-ins / File Formats " (or " Plug- ins "if you don't have the" File Formats "subdirectory).
• Start Photoshop and the WebP format will be automatically recognized.

In terms of format recognition on browsers, everyone now recognizes it, apart from browsers that cannot be updated (on Android for example ...).

On the HTML side, you can use the classic IMG tag like this:

Redirection of JPG, PNG and GIF images from Apache

To redirect visitors who would make calls to older versions of the images, you can redirect them simply by modifying the .htaccess file as below (assuming that this .htaccess file is in the images directory) .