optimize WordPress images for mobile devices

in Mobile Speed

How to Optimize your WordPress Images for Mobile

One of the most common reasons for sites being slow is because of their images, which constitute over 60% of total page weight according to Google.

Because oversized and unnecessary images slow down page load times with excess data and file requests, image optimization is an important requirement rather than a nice-to-have to keep your speed up.

In this post, we will see different ways to optimize your WordPress images and reduce their impact on the speed of your mobile site.

Remove unnecessary images

The first step in order to improve your page speed is to remove all those images which are redundant or do not add value.

Ask yourself what people want from your site. Do the images on your site help users achieve their goal? Images can be beautiful and fun, but they should contain information rather than be purely decorative. If they are not oriented to help your visitors get what they want, they can be a huge waste of space and load times.

If you are not sure whether the images on your site add value, you can run an A/B test and assess the impact they have on your visitors. Is it positive or negative? Were these images ignored? Or did they help users get where they wanted faster?

Slider images, for example, have been demonstrated to be ineffective. The web usability guru Jakob Nielson pointed out in this study that users get easily distracted and frustrated by carousels.

Page weight of images according to Google

Image source: Google.

Use the right file format

If your images have to stay, be sure that they are in the right file format. Using an inappropriate format can distort your images, increase file size, and thus slow down your WordPress site’s mobile speed.

There are two types of web image: raster and vector. They all have their own benefits and usage.

Raster images are composed of a rectangular grid of pixels. There are three common formats: JPEG, PNG, and GIF.

  • JPEG is the most popular among the image formats used on the web. It is generally better for photographs. JPEGs lose pixel data when they are compressed (lossy compression) and they are perfect for images with a large range of colours.
  • PNGs are common for graphics, screenshots, logos, and icons. They support transparency and have been created as a “lossless” image format. This means that a PNG file preserves all details of an image when compressed (instead of eliminate the pixel data). The process is called lossless compression.
  • GIFs are used for animated images and simple graphs.

Bitmap_VS_SVG

Vector images are made up of geometrical shapes such as points, lines and curves. The most common format is SVG.

  • SVGs deliver good results at every resolution and zoom setting, which makes them an ideal format for high-resolution screens and assets that need to be displayed at varying sizes such as logos and page headers.

Compress your images

Compression is an essential step in image optimization. This process can reduce the weight of your images without losing quality so that they can load faster.

There are a lot of plugins and tools dedicated entirely to image compression, individually or in batches. These are some our favorites:

  • JPEGmini: reduces the size of JPEG photographs without affecting their perceptual quality.
  • TinyPNG: uses smart lossy compression techniques to reduce the file size of your JPEG and PNG files.
  • ImageOptim: an image compression tool (JPGs and PNGs) for Mac.
  • ImageAlpha: reduces PNG files by applying lossy compression.
  • WP Smush: this WordPress plugin resize, optimize and compress your JPEG, GIF and PNG image files using lossless compression techniques.

Smush_Image_Compression_and_Optimization_WordPress_Plugin

Consider a CDN for image delivery

In last week’s post, we saw that using a Content Distribution Network (CDN) service can be of great help in speeding up your WordPress site because it stores a cached version of your static content in multiple geographical locations.

With a CDN the static files, especially images, have their source URLs rewritten to be delivered from the nearest server to your visitor’s geographic location (the distance is much shorter than having to make a round-trip to the home server). While this reduces the load on your site’s server, it will also allow pages to render faster.

Speeding up the delivery of your static images is a smart thing to do to make your WordPress site faster, improve user experience and get better search engine placement.

Conclusion

Images being too large, not compressed, or having the inappropriate format can all lead to these images being bloated and oversized, which has a direct impact on the loading and performance of your WordPress site.

There is no best format, size, or number of images as it will always depend on your desired visuals results. But the above tips will help you make better decisions to combine speed and quality.

Do you have any other tips to optimize your WordPress images for mobile? Feel free to share them in the comments section below.