How to Optimize Images for Mobile (2024)

Images are one of the most important assets on your website and should be an integral part of your content strategy. They help you tell a story and communicate with your customers in more than words. But what if you’re not using the right image size? What if those images aren’t optimized for mobile screens, which is now the most popular way to access the Internet? How do you make sure that your pictures load in a decent time?

We’ve got some best practices for optimizing your images and measuring performance.

This post will show you how to fix all those pesky image problems so that they look great on any device and don’t affect your performance.

Why Serve Optimized Images for Mobile Devices

1. Images Affect The Performance of Your WordPress Site 

Images consume a significant amount of disk space and bandwidth, as shown in our example below, where images occupy 48,25% of my content size. 

When it comes to mobile pages, speed and size matter. We are in 2024, and having a mobile presence is not enough. The mobile speed of your brand’s website should become a priority. Every marketer needs a ‘mobile speed budget’ as mobile devices are the most commonly used platform: people use their mobile phones to search, browse, and shop more than ever before. 

But as brands continue to invest in high-quality imagery for their sites, they also risk slowing down site speed. While images might make a website more visually appealing and engaging, they can slow mobile loading time, resulting in fewer conversions and missed revenue opportunities. 

Google conducted some studies and found that one second can impact up to 20% of your conversions. 1 out of two visitors will leave your mobile site if it takes longer than three seconds to load. That can be a lot of money going directly to your competitors.

Mary Ellen Coe – the president of Google Customer Solutions – also explains that businesses should look to mobile site speed as a growth driver. Visitors will be keener on engaging and shopping on a mobile-friendly WordPress site. 

What’s more, let’s see how exactly image performance affects the overall performance score.

To measure mobile performance, Lighthouse takes into account the six following metrics: 

You may be wondering where the “images weight vs loading time” issue is amongst those KPIs. This issue will not be mentioned explicitly. Instead, you can find mobile performance improvement opportunities related to images in the Lighthouse report, which are namely:

• Properly size images (implement responsive images)
• Efficiently encode images 
• Defer offscreen images (implement lazy-loading)
• Serve images in next-gen formats, use WebP where possible
• Use video formats for animated content, convert GIFs to video formats 

Hint: By optimizing and compressing images, you’ll address Lighthouse’s recommendation and put the six KPIs closer to the green zone. This will have a positive impact on your overall performance grade.

2. Images on Mobile Have a Different Impact From Desktop

Every day, more and more people are using their smartphones to access the Internet, which means that if your website isn’t optimized, you’re missing out on millions (or even billions) of potential customers. Not only will optimizing give you an edge over competitors who have not done so yet, but it also has many benefits, such as improving user experience by making everything faster and easier to use – which in turn improves customer satisfaction. 

Mobile devices offer a smaller screen size than desktops or laptops, which means images need to be proportionately sized down to fit properly within the space provided by the screen. When images are not resized correctly, it makes content difficult to read on small screens, decreasing user experience.  

The graph below illustrates perfectly the design preferences for each device:

Left: the text is small and difficult to read, and the small image on the top left corner is not attractive. 

Right: content fits perfectly to the screen. The main image is also well-scaled. We feel like I want to read more and continue scrolling. 

Furthermore, have you heard about the new Google Page Experience Update? 

The Google Page Experience Update is the latest SEO ranking factor. It includes a set of KPIs measuring how users perceive the experience of interacting with your web page. And guess what? It includes mobile-friendliness! The Page Experience you will offer determines your ranking position on Google, making it another crucial reason to optimize your content on mobile. 

That’s why it’s more important than ever that your website design is also adapted for mobile devices. 

Want to know if your website is fast on mobile? Curious to find out which images are affecting your performance the most? That takes us to our next section. 

How to Measure the Impact of Images on Mobile

There are four popular performance tools you can use to measure the impact of images on mobile speed, namely: 

1. Google PageSpeed Insights (PSI)
2. GTmetrix
3. Pingdom
4. Google Search Console 

For all of them, simply enter a URL to test the page load time, run the analysis and find the bottlenecks. Let’s give an overview of each of them. 

1. Google PageSpeed Insights

PageSpeed Insights is a free tool launched by Google to measure the performance of your WordPress site both on Mobile and Desktop. The reports are based on the Lighthouse technology and suggest how to improve a page’s performance.  

PSI helps measure the Core Web Vitals, a set of specific factors that Google considers important in a web page’s overall user experience. 

You will not see any metrics that expressly say anything about mobile images optimization.

Instead, Lighthouse checks your pages against mobile performance best practices and offers a list of optimizations for images: 

Want to learn more about improving Lighthouse metrics? WP Rocket wrote a detailed guide about how to improve Core Web Vitals.

2. GTmetrix 

GTmetrix is also a website performance analytics tool created by GT.net. The mission of GTMetrix is to analyze the performance of your website and provide you with a list of actionable tips to improve it.

The main KPIs measured by GTmetrix are similar to PSI: we find an overall grade, the three Core Web Vitals, and the other Lighthouse metrics. Additionally, you can also notice the full load time and TTFB metrics. 

GTmetrix tells you how the page content is broken down into images, videos, JS, CSS, etc. 

Then, to identify which images need to be optimized, you can use the waterfall section. Select the “Images” tab to check which images need to be compressed or resized the most. 

Note: to run a specific mobile test on GTMetrix, you’ll need the Pro version. Only then you can have access to mobile testing, both through a real hardware solution. 

3. Pingdom

Pingdom can report whether a website is down due to network splits or failure in DNS servers anywhere in the world. It monitors your website’s health and its performance (with a grade from A to F). 

Besides the overall performance grade, the main KPIs measured are the page size, the number of HTTP requests, and the load time. 

One of the interesting sections is the “Content size by content type”. From there, you can see what takes up the most space on your page: images, code, etc.

Note: Just like GTmetrix, you’ll need the Pro version to test your site on mobile. 

4. Google Search Console

Even though it’s not about performance per se, Search Console’s Mobile-Friendly Test Tool is an easy way to test whether a page on your site is mobile-friendly.

The test results include the following elements: 

• A screenshot of how the page looks to Google on a mobile device
• A list of any mobile usability problems that can affect a visitor visiting your site on mobile, such as small font sizes (hard to read on a mobile) or use of Flash (which isn’t supported by most mobile devices).

You’ll get either a yes or no response with further resources and reports you can use to fix the issues. 

Not mobile-friendly website	Mobile-friendly website

Now that you have the tools to identify any image-related issues on mobile, here are some technically-minded tips you can share with your developers. 

Note: These image optimization techniques will benefit your brand. You keep high-quality images while ultimately creating a faster mobile experience for your visitors.

How to Optimize and Load Smaller Images for Mobile

This section will show you how to optimize your images for mobile and improve performance. There’s everything you need to know about image optimization and how to use smaller images for mobile devices. 

1. Resize And Serve Images Optimized For Mobile Devices 

The easiest way to help make your website lighter and faster on mobile is to optimize image size and resolution. The thing is, you may want to serve small images without compromising the quality, right? In that case, you should apply the two high-level tactics: resize and compress images for mobile.

Let’s start with resizing your photos.

When uploading an image to a page, you can specify the number of pixels directly on WordPress. For example, you can set a new size such as 400×300 instead of 1200×800.  

How to reduce image size in mobile? 

The automatic way: Use a plugin like Imagify to resize multiple images online. With Imagify, all you need to do is install the plugin and check a few options, such as the maximum resolution that you want to resize images to:

To bulk optimize your images on mobile, simply go to your Imagify dashboard: Media → Bulk Optimize so you can optimize all of your site’s images in one click.

The manual way: Use an editor like the WordPress library or the native Windows/Mac tools to resize your pictures. This can be time-consuming if you have many images. 

How to create multiple design versions for mobile devices? 

A good piece of advice – if your web project hasn’t started yet – would be to build your whole website directly for mobiles.  Friction is more likely to occur on smaller screens as you have many things to fit in on a smaller screen: images, text, videos, call-to-action, and much more. 

In fact, it’s easier to base the design on mobile and then apply it to the desktop version rather than the other way around. 

To have a mobile-first design, you should prioritize important menu options, make everything easy to tap, including images and galleries, highlight the main CTA and offer usable filter functions. 

The solution: use a WordPress page builder that allows you to create a different design for desktop and mobile. Let’s see an example with Elementor where we can display different image sizes on mobile:

There is also a dedicated “Responsive” tab allowing you to choose to deactivate any sections (including images) on mobile: 

How to find the best image file size for mobile? 

There are no set-in-stone rules about the best file size on mobile. We simply want the browser to load the correct image wherever the visitor is on desktop or mobile. There are two criteria to take into consideration:

• The viewport dimension for desktop (1280 px) tablet (640 px) and mobile (320 px) 
• The size of the image relative to the viewport 

Some design tools like Sketch are coming with wireframes and premade templates ready to use for each device. Below, we selected the mobile portrait template, and as you can see, it comes with a size of 320*1024 by default. 

As a general rule, you can also follow the responsive design from ImageKit: 

2. Compress Mobile Images

After resizing, compressing images is the second high-level technique you should follow to load smaller images for mobile. 

Compressing an image for mobile simply means reducing its file size. This is achieved by minimizing the size in bytes of the image without losing any of its quality. Best of both worlds!

Here are some fast and efficient solutions to compress your mobile images.

1. Use a WordPress plugin: 

• Optimole – offers compression, lazy load, and advanced cropping
• Imagify – optimizes and compresses your images in one click. Imagify reduces your file size but does not compromise the quality, as you can see below: 

Original image without Imagify File size: 335 KB	Compressed image with Imagify Ultra mode New File size: 45 KB  % Saving: 86.57%

2. Use Imagify directly on desktop: simply drag-and-drop an image to compress it.

3. Choose an Efficient Image Format for Mobile

Choosing the appropriate file format will have a positive impact on reducing the image size on mobile. JPG is not always the answer. Try to use the WebP format as much as you can. This modern format saves on average ~25% more storage than JPEG or PNG files. Another great thing about the WebP format is that the WordPress library is now supporting it (even though you always have to convert your images to WebP first). 

If you want to know more, read our detailed guide explaining how to convert your images to the WebP format.

Let’s go over a practical example. The three images below have the same resolution: 600 x 600 px. However, let’s breakdown the sizes according to each format: 

• JPG is 99.8KB
• PNG is 217KB
• WebP is 56.2KB (which makes it the lightest file format without compromising the quality on mobile).

To summarize, Google made a list of the most efficient format according to the type of images you are using on mobile: 

The solution to use the WebP format on mobile images:  use the Imagify plugin, if you want to convert your website images to WebP directly from WordPress. 

To do so, go to Settings → Imagify and scroll to the “Optimization WebP format” section: 

🔊 Important to note: as of March 2024, Imagify also converts images to Avif, the other next-gen format recommended by Google to make your images lighter.

4. Implement Lazy Loading 

Implementing lazy loading on your images will help your mobile page to load faster. Why? Because lazy loading defers the loading of big elements (like images) that are not needed immediately on mobile. 

This will also address the “defer offscreen images on your site” recommendation from Google PageSpeed Insights.

Solutions to implement the Lazy Loading script: 

1. Use one of those free WordPress plugins: 

•  Lazy Load by WP Rocket – you can even choose which images you don’t want to “lazy load”. The plugin displays images and iframes on a page only when visible to your visitor, saving heaps of HTTP requests!
• Optimole 
• Autoptimize

2. Use a premium plugin that boosts your overall performance: 

• WP Rocket cache plugin, with CSS and JS optimization and, of course, the integrated Lazy Load feature: 

5. Use a CDN

Image content delivery networks (CDNs) are a must-have to optimize image delivery on mobile. According to web.dev, switching to an image CDN can yield a 40–80% savings in image file size! 

GTmetrix illustrates the CDN principle pretty well. As you can see, a CDN creates a shorter connection distance between the user and the original server. This faster connection is possible thanks to an edge server in London, for example.

The solution to implementing a CDN: Use a service like RocketCDN and/or Cloudflare so everyone can access your content quickly, no matter their location. A CDN provides you with many benefits, and you should not overlook it.

RocketCDN will help your images to be delivered faster on desktop and mobile devices. We’ve made a test on GTmetrix, and we can see that we saved some loading time (almost 1s) thanks to RocketCDN.

6. Don’t Overlook Slow Connections from Mobile

Another reason for optimizing your images is to consider the mobile users that are still on 3G. You should create smaller images for such users. With a slow connection, images can have even more struggles to be fastly displayed. To resize images properly, compress them and implement lazy loading for the ones below the fold. 

Optimizing Mobile Images with Imagify

If you have many images on your mobile, it can be time-consuming to resize and compress each of them manually. Imagine if, on top of that, you want to convert them all to the WebP format to boost performance? 

This is exactly when Imagify gets into the game! 

Firstly, Imagify allows you to resize and compress existing images and new ones on mobile devices. The bulk compression automatically applies the Smart Compression level:

You’ll save a lot on the file size of your images. Remember that you’ll be able to reduce your images’ size without losing quality because Smart Compression will find the best balance between image resolution and performance.

Then, Imagify lets you convert them all to the WebP format by simply checking those two boxes. That will make the image file size smaller on mobile (and desktop).

A few weeks ago, I put together a list of the best image optimization plugins you can use to speed up your WordPress site. Let me share with you the interesting results I got with Imagify:

• I run a speed audit using Imagify and this 450 KB image:

These were the key conclusions about how Imagify helped to make the  mobile images smaller: 

• My image still looked great after compression
• We saved 55% of the file size

Original Size	Size after optimization with Imagify	Saved (%)
450 KB	203 KB	55%

What’s more, Imagify fixes some of the issues flagged by PSI. Have a look at our images-related issues before and after using the plugin:

My diagnosis section before Imagify	My passed audits after Imagify

What if you’re not using WordPress? It’s OK. Imagify also has a web-based application to bulk resize and compress images. Simply drag and drop your images: Imagify will compress them, and they will be available for download within the next 24 hours. 

While using Imagify web-based app, I’ve noticed two things: 

• One of my PNG images has been resized and compressed by 85% (using the Ultra compression mode)
• The other one has been reduced by 30% (using the normal mode)

Just like with the Imagify WordPress plugin, you can optimize 20 MB of images per month for free, 500 MB worth of data for $5.99 per month, and unlimited images for $9.99 per month with the Infinite plan. 

Wrapping Up 

Optimizing images for a mobile website is a simple and cost-effective way to improve conversion rates. Once your images are effectively optimized, make sure they have the right format and that they’re delivered at the right moment with the lazy loading script. 

To make speed optimization sustainable, site speed must be an important metric throughout the company and become part of their list of KPIs. The time has come for businesses everywhere to take advantage of tools like Imagify and WP Rocket to make their site fast across all devices – including smartphones and tablets. 

Imagify is free for up to 20 MB of data. Take it for a test drive, and tell us what you think in the comments section!