Optimizing image loading for mobile

Optimizing images for mobile devices is essential to improve performance, reduce load times, and provide a smooth user experience. Mobile users often face slower internet connections, smaller screen sizes, and limited bandwidth. Optimizing images can significantly enhance the page load speed, increase the perceived performance of your portal, and save mobile data. In this guide, we’ll discuss various techniques to optimize image loading for mobile devices.

1. Image Formats

Choosing the right image format is crucial for reducing file size without compromising quality.

JPEG (JPG): Best for photographs or images with many colors and gradients. It offers a good balance between file size and quality. Use it for photos and other complex images.
PNG: Ideal for images with transparency or those that require high detail (e.g., logos). It tends to have a larger file size compared to JPEG.
WebP: A modern image format developed by Google that provides superior compression for both lossy and lossless images. It supports transparency and produces smaller file sizes than both JPEG and PNG. This is highly recommended for mobile optimization.
SVG: Use Scalable Vector Graphics (SVG) for icons, logos, and illustrations. Since SVGs are vector-based, they can scale infinitely without losing quality and are usually very small in file size.

Example: Choosing Formats

<img src="image.jpg" alt="Photo" />
<img src="image.png" alt="Transparent Logo" />
<img src="image.webp" alt="Optimized Image" />

2. Image Compression

Image compression reduces the size of the image file without significantly impacting its quality. There are two types of compression:

Lossy Compression: Some data is discarded to reduce file size (e.g., JPEG). This can cause some loss in quality, but it’s generally acceptable for most web images.
Lossless Compression: Reduces file size without losing any data (e.g., PNG, WebP). This method retains the full image quality.

Online Tools for Image Compression:

TinyPNG: Compresses both PNG and JPEG images.
ImageOptim: Compresses images on your desktop.
Squoosh: A web-based image compressor by Google.

3. Responsive Images with `srcset` and `sizes` Attributes

To serve images appropriate for different screen sizes and resolutions, you can use the srcset and sizes attributes in HTML. This allows the browser to choose the best image for the user’s device.

srcset: Specifies different image sources for different display resolutions.
sizes: Defines the size of the image as it will appear on the screen, allowing the browser to choose the most appropriate image.

Example of `srcset` and `sizes` in HTML

<img 
  srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1024w.jpg 1024w"
  sizes="(max-width: 600px) 480px, 800px"
  src="image-800w.jpg" 
  alt="Responsive Image"
>

Here, the srcset attribute provides different images at different widths (320px, 640px, and 1024px). The sizes attribute specifies how the images should scale depending on the viewport width.

For mobile devices with a screen width of 600px or less, the browser will load the 320w image.
For screens larger than 600px, it will load the 800w image.

4. Lazy Loading

Lazy loading defers the loading of images that are not immediately visible on the screen, meaning images will only be loaded when the user scrolls down to them. This technique can significantly improve initial page load time.

Use the loading="lazy" attribute in the <img> tag for native lazy loading support in modern browsers.

Example of Lazy Loading

<img src="image.jpg" alt="Image" loading="lazy" />

For browsers that do not support native lazy loading, you can use JavaScript libraries such as LazyLoad or lozad.js to implement this feature.

5. Image Dimensions

Always specify the width and height attributes for images. This prevents the browser from having to calculate the dimensions of the image, which improves page rendering and speeds up the process.

Example of Specifying Image Dimensions

<img src="image.jpg" alt="Image" width="500" height="300" />

For responsive designs, avoid fixed pixel sizes and use percentages or relative units (e.g., width="100%" for fluid layouts).

6. Using CSS for Background Images

For certain elements like banners or headers, use CSS background images instead of inline <img> elements. CSS background images are often more manageable for responsive design, as they can be controlled using media queries.

Example of CSS Background Images with Media Queries

.header {
  background-image: url('image-desktop.jpg');
}

@media (max-width: 768px) {
  .header {
    background-image: url('image-mobile.jpg');
  }
}

Here, different images are served depending on the device width. This is especially useful for large images like hero images.

7. Content Delivery Network (CDN)

A Content Delivery Network (CDN) caches images and other content in multiple locations around the world, improving the loading speed by delivering content from the server closest to the user. CDNs can also optimize images for mobile devices by automatically adjusting the file size and format based on the user’s device.

Some popular CDNs include:

Cloudflare
Akamai
AWS CloudFront
ImageKit
Fastly

CDNs also typically provide automatic image optimization and support for formats like WebP.

8. WebP and AVIF Support

WebP is already covered, but it’s also worth mentioning AVIF (AV1 Image Format). AVIF is a newer image format that provides excellent compression and quality and is supported by most modern browsers. It can achieve better compression rates than WebP and JPEG.

You can use the <picture> element to serve WebP or AVIF images to browsers that support them, while falling back to traditional formats like JPEG for browsers that don’t.

Example Using `<picture>` for AVIF and WebP

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Optimized Image">
</picture>

This ensures that modern browsers get the best format, while older browsers fall back to the standard image formats.

9. Image Sprites

For smaller images such as icons, consider using image sprites—a collection of small images combined into one large image. By doing this, you reduce the number of HTTP requests, which can improve performance.

Example of an Image Sprite in CSS

.icon {
  background-image: url('sprite.png');
  background-position: -10px -10px;
  width: 20px;
  height: 20px;
}

Here, the background-position property is used to display the specific part of the sprite image.

10. Image Optimization Plugins

If you are using a CMS or platform like WordPress, you can use plugins that automatically optimize images as you upload them. Some popular plugins for image optimization include:

WP Smush (WordPress)
Imagify (WordPress)
Optimus (Magento)

These plugins typically handle resizing, compression, and serving images in next-gen formats like WebP.