3 image optimization tips for your site to load faster.

If you’re the kind of person who’s always experimenting with ways to make your sites faster, then this blog is the right place – we’ve already dealt with general and specific aspects to make WordPress faster, which you can check out in our optimization category.

In today’s article, we will talk specifically about image optimization. Sometimes your site has a slightly heavy homepage because of only those high-resolution photos you left to optimize later (or your client insisted on keeping).

Use images of size and format appropriate for the web

The first rule of image optimization is a good practice: you should use images that have been prepared for the web! What’s that supposed to mean? If you got photos or illustrations from professional directories, probably the files came with a huge resolution, even fit for printing.

However, if we look at real data on the most popular screen resolutions in the world (for desktop), we will see that 1366×768 monitors still rein with space, followed by the 1920×1080.

This means that in the most optimistic scenario, your user will see a maximum of 1920 pixels wide when accessing your site. Why, then, have that image 5000 pixels wide as the background?

Optimize images in an automated way.

With format and dimensions under control, the time has come to go for a more aggressive strategy: to really optimize the images so that they have their size reduced.

This type of compression is nothing new: JPEG Compressor itself allows compression, although almost always with noticeable loss of quality. In recent years, however, new optimization algorithms have already been able to significantly reduce file size without loss of perceived quality.

The good news is that you can do this optimization of your entire media library automatically, and even ensure that all images uploaded in the future are optimized, too.

Use Lazy Loading

Another strategy is not to load all images from one page at once. This is called lazy loading, i.e., lazy loading. The mechanism is smart: load only the images that will be visible on the screen and leave the rest for later.

As the visitor scrolls down, the other images begin to load. This generates a more responsive loading impression for those who visit.

There are several free and paid plugins that fulfill this function. Among the free ones, try BJ Lazy Load.