If you have audited your website with Google Page Speed or Google Lighthouse, it is possible that one of the recommendations that Google has given you is to transform the images on your website to next-generation formats . Here we tell you what these new formats are, how you can prepare the images before uploading them to the web and what you can do to change the format of the images by touching some code.
What are next-generation images?
Next - gen images are an image format with greater compression and less weight than traditional formats (JPEG, PNG, TIFF, RAW...) that have been used until now.
These new formats are specially designed for websites, browsers and online media.
Next-gen images maintain the same image quality but with less weight, so your website will load faster.
We currently have the following next-gen formats:
- AVIF
- Browser JPEG
- Browser PNG
- JPEG XL (beta)
- MozJPEG
- OxiPNG
- WebP
- WebP v2
JPEG 2000 is the format used by safari, JPEG XR is the one used by Microsoft Edge, and WebP is used by Chrome, Firefox, and Opera.
Because this would imply having the image in quadruple, we recommend using the WebP and OXiPNG formats on your website , since they are two formats with good performance and more browser support.
Is it important to optimize images?
Yes. Images should take up as little space as possible on the server.
A fast site is important mainly for visitors as they leave the website if it loads too slow, but it is also important for SEO performance as search engines consider website speed as a ranking factor.
Website size is one of the biggest factors affecting website performance – images can account for 50% of load time.
By optimizing images, you will quickly gain a few precious seconds and make your website faster .
How to transform images to next-gen formats?
At Interdominios we recommend the free online tool: Squoosh
We like it a lot because it is a tool developed by Google and it is very easy to use.
To use Squoosh you just have to access the page https://squoosh.app/ select the image you want to transform and use the menu on the right.
How to use squoosh
Where it says " restize ", you can adjust the width and height of the image.
In « Reduce palette » you could choose the number of colors that the image has. The more you reduce the colors, the more optimized the image is, but we recommend that you do not touch this ratio so as not to lose quality in your image.
In « compress » you can choose the next-gen format you want.
« Advanced settings » allows you to fine-tune the optimization of the image even more, although we recommend that you do not touch too much so that the image does not lose quality.
A small window will show you how much the image has been optimized with the new format compared to the original. You just have to download the image by clicking on the down arrow to be able to upload the next-gen image to your website.
You will see that the application screen is divided into two. On the left you see what the original image looks like. On the right the result after optimization. You can play with the parameters and compress the images as much as you want. Sometimes the optimization reaches 95% and 99% with respect to the original.
Change images to next-gen format with code
The most optimal way to implement this would be to use the picture tag and replace all the images on our website.
In this way, the browser that does support the webp format uses said image and if it does not, it uses the default image.
Even so, it is not always possible or feasible to introduce that piece of code that modifies the entire web. We are going to give a small tip to do it without modifying our website.
There are numerous libraries that are responsible for converting to webP, so we are going to rely on this library to simplify the work.
Once the library is downloaded, we just have to add these lines to our htaccess file
RewriteEngine On # Redirect to existing converted image in cache-dir (if browser supports webp)
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^/?(.+).(jpe?g|png)$ /imagenes-webp.php [NC,L,E=REQFN:%{REQUEST_FILENAME}]
Header append "Vary" "Accept"
With this command, we will be telling the browser to first scan our images-webp.php file in case our browser supports the use of this type of format. Once we have this, we simply create said file in which we will create the images in webp
<?php require_once "./webp-convert-master/vendor/autoload.php"; use WebPConvert\WebPConvert; $source = $_SERVER['REQUEST_URI']; $destination = $source . '.webp'; WebPConvert::serveConverted($source, $destination, [ 'fail' => 'original',
'serve-image' => [
'headers' => [
'cache-control' => true,
'vary-accept' => true,
],
'cache-control-header' => 'max-age=2',
],
'convert' => [
],
]);
In this way, we will be using next-gen images on our website and the loading speed of our website will be reduced and our Google PageSpeed Insights score will be much higher.
How to convert the image format to Webp with Imagify
If touching code doesn't convince you, you can consult our professional web optimization services which include changing images to next-generation formats, their compression and rescaling.
You can also use one of the many plugins in the WordPress repository to minify images and change their format to Webp.
We recommend Imagify , it is very easy to use and usually gives good results.
With Imagify you can compress images without losing quality , convert formats to WebP and speed up your website.
Imagify is one of the most advanced WordPress plugins to optimize images.
After you enable it, all your images, including thumbnails, are automatically optimized when uploaded to WordPress. Imagify doesn't just compress images, you can also use it to convert WebP images,
Es compatible con WooCommerce y NextGen Gallery.
We hope the article has been useful to you.
Top comments (0)