The mobile web demands brisk loading websites because slow loading ones mean a poor user experience. A poor user experience hurts average time on site; bounce rate; rankings (directly and indirectly); conversion rate and eventually revenue.
Because images account for over two thirds of page load size across the mobile web they are a major source of slow page load speed issues. You should firstly look to simply remove images that do not add value and making the ones that do add value load faster and in a more responsive manner (considering the variability of mobile screen size this is pivotal).
But how can you make sure that any images on your mobile site are light, device-responsive, and use the best format to combine speed and quality? Images should improve not hurt mobile user experience.
Image optimization: user experience, aesthetic and performance
Image optimization should consider user experience, aesthetic and performance. Start with a small-medium size image and allow users to zoom in. People have to wait for the page to load & the image in and of itself is not very information-ally dense. The average JPG is 29KB and the average PNG is 16KB for the world’s leading websites according to research. Reducing an image involves using smaller size and resolution images and compressing the file that is used. There are several compression tools available to lessen the eventual page load.
Image Size for Mobile vs Tablet vs Desktop
Whether via dedicated URLs (website.com vs m.website.com) or different sites on the same URL – adaptive web design images should be properly sized for the largest device in each category. So what about responsive web design which serves the same site to all devices but uses CSS to format content according to the device screen size.
Responsive design does not replace optimizing images for mobile. If a site delivers the same images on desktop as mobile (automatically scaled to fit) it can make sites unusable on lower spec phones and/or on weaker networks. This is because it takes longer to deliver a large image & because the mobile device has to work hard to re-code and re-scale the image. This costs processing power and memory.
HTML specification let’s you create alternate images for different device screen size, resolution or capability. This tells the browser image to select for device screens up to a maximum width. The HTML <picture> element is the most efficient way to do this because it reduces extra code and requests which would otherwise slow down page load speed.
The responsive images specification: the <picture> element, with thesrcset[set of alternative image sources] attribute and sizes attribute let you set which image should be delivered for which device screen width. The new spec is supported by virtually all browsers.
The Best Format for Images
The prevalence of image formats on mobile/mobile-friendly sites:
- JPEG 46%
- PNG 28%
- GIF 23%
- SVG 1%
There are two types of images on the internet: raster and vector. JPEG, PNG and GIF are raster and are made up of dots. SVG is a vector & made up of lines and shapes. GIF is used for animations, graphs, icons and logos. PNG is for higher quality graphs, logos, icons, illustrations and photos. SVG is used for graphs, logos & page headers.
Alternatives Using Images
There are three different ways to get the visual impact of images without the page size and speed impositions of actually using images, namely:
- CSS sprites
- Icon fonts
- CSS shapes
To save on file size try Fontastic to create custom icon fonts. The font file size is much smaller; crisp & very customizable with CSS. Using CSS to create shapes also saves on resource usage and helps page load speed.
Techniques to boost perceived load time
After removing unnecessary images & optimizing the rest there is still more you can do to improve perceived page load time. When your page loads the text should render first, so users have something to do. As the images load, the already loaded content should never move — this will lower user experience and can lead to users clicking on the wrong link/s. What matters to your user is that the content is available.
There are three ways to get this done:
- Deferred/delayed loading which prevents images loading before text content has loaded.
- Lazy Loading loads images only when the user scrolls down over them.
- Progressive image loading initially loads a low quality version of an image before replacing it with high quality images after text content has completely loaded.