Guide to Optimize images for the website: Fastest page load

Optimizing images for the web means adjusting their dimensions, eliminating unnecessary data and compressing them in order to reduce their size , always maintaining their visual quality. While image optimization seems complex, since there is a wide variety of formats and details to improve, with a little patience, I promise you will get good results.

Learning to optimize images to leave them in the right size, compressed and ready for the web will help us solve one of the main problems related to the speed and weight of the pages, and will also contribute to improving their behavior in the Pagespeed test.

The basics in handling images for the web:

Before we begin, let’s see if you are using these basic principles to manage the images on your website:

Principle 1: Use only the amount of images needed.

More images, more calls to the server and more page load time. Always try to use few well-optimized images. If for some reason your site requires many images you can use a plugin such as Lazy Load so that the images load as the visitor uses the scroll bar to move down.

Principle 2: Use only the recommended web formats

Try using the JPG file format and when you save the images, always look for the “for the web” option, which decreases the original image quality by 70 or 80%. If you need images with a transparent background you can use PNG and if you want an animated image you can use the GIF format.

You can also start experimenting with the new WebP format, which produces images up to 30% lighter compared to the JPEG format.

Principle 3: Be cautious with formats that require code

One of these is the SVG format that uses a technology in which images are displayed using a code. The advantage of the SVG format is that the images are elastic and adaptable, but there are certain disadvantages: It requires a special program to create and implement them, they generate huge blocks of code (both larger when it comes to producing sophisticated images) and also the images SVGs are not supported by some older browsers.

Another way to use code to generate images is to do it by encoding some of your images to base64. Be cautious with this method since the base 64 images are not indexed by Google, so they will not benefit your SEO and also those images will not appear in the Google image search or in any other search engine. Both the small red logo of Ideas Marketing and the photo of the author, which appears below each of the articles on this site, are actually images encoded in the base64 chain.

Principle 4: Do not use images larger than necessary:

Be sure to post the images in the correct size. PageSpeed ​​detects the dimensions of the image that are specified by the attributes of each image, so each image must be displayed in the size that its attributes say . If the actual size of an image is 100 x 100 pixels, do not change its dimensions to 80 x 80 pixels directly in the HTML code or in the CSS style sheet. If the image needs to be smaller, use an image editor like Photoshop and change its size to the correct dimensions, to match the width and height specifications of the image with its actual size.

In adaptable sites, a set of three to four images of different sizes is usually used, which should always be adjusted to the maximum dimension in which each of them will be displayed on the different devices.

In WordPress always resize your images if you change your template:

When you upload a new image to WordPress, it always generates a complete set of images in the correct measures. What sometimes happens is that we change our template and do not consider resizing images to the sizes used by the new theme. When changing the WordPress theme use a plugin like regenerate thumbnails to resize your images to the appropriate sizes.