How to increase page speed on image-heavy websites
Images are the essence of contemporary websites; without them, it is difficult to establish a long-lasting impression on your visitor.
Images help businesses engage their visitors and minimize bounce rates; however, they can also be the cause behind weak web performance. Search engine crawlers like Google and Bing detest image-heavy and slow loading websites. Heavy images drastically cause page loading times to increase.
How do websites display stellar quality images while reducing their sizes and still not suffer a loss in quality? Below are actionable steps that website owners, SEO experts, bloggers, and online eCommerce shops can utilize to increase page speed.
Post summary:
Benefits of optimising images
How to optimise images for faster page loading speeds
What are SVGs and why you should consider using them?
Other best practices for image-heavy websites
How can I find image-related issues on my website?
Benefits of optimising images
Optimising images for the web has many advantages that, sadly, are overlooked by the majority of web owners and developers. Let’s examine four reasons why optimizing your image-heavy website is critical.
1. Lighter website
Heavy images fill up more disk space of a web server and extracting them from the server to display on a browser commands more bandwidth. Extracting images from servers might not be an issue for the sites hosted on a server with abundant disk space and bandwidth capabilities, however, it will increase your hosting expenses.
By optimising images, website owners can reduce both the bandwidth and disk space that is required to display those images. Additionally, optimized images improve the speed of loading pictures on web pages, even with slower internet connections like on mobile devices.
2. To increase page speed
Lighter sites perform better than image-heavy websites as they utilize less time to load all the page assets. A website’s desired functions load properly to serve a specific feature on that web page. Hence, images optimized explicitly for the web follow best practices that can display images on varying screen sizes or different browsers.
3. SEO benefits
Human visitors and search engine crawlers like Google adore fast loading websites. Google has frequently alluded that page speed is a ranking factor in their ranking algorithms.
When images are optimised for performance, you are speeding up page load times. In contrast, Google’s algorithm gives preference to those websites that load quicker and penalises those that take ages to load, a vital cog of SEO/SEM marketing.
When websites accelerate their page loading times, they are inadvertently improving their SERP ranking – as search engines present faster loading and more relevant websites to their users, thus promoting a positive user experience.
4. Better user-experience
When a website loads fast and functions appropriately, its overall user experience is elevated for visitors surveying that site. Visitors are more likely to remain on pages and websites that load quickly and they can navigate what they need to find to do in the first place.
Better user experience is achieved by executing best practices, including structuring your web page correctly and by optimising the images, so they load faster and display better. A positive user experience is essential for all online businesses for a surviving and thriving business.
How to optimise images for faster page loading speeds
The below techniques can be used individually or collectively, depending on the level of performance you wish your website to achieve.
1. Choosing the right file format
Various types of file formats are available for images used on the web. Choosing the right format for your website is essential.
PNG (Portable Network Graphics) is usually used when lossless compressions (discussed later) is utilized. Image quality is very high, and because of this, so is the file size.
JPEG (Joint Photographic Experts Group) has a lower image quality than PNG but also reduced file size. JPEG uses both lossy and lossless compression algorithms and is widely used in digital camera images.
Website developers argue over which to use, JPEG, or PNG. PNG files are higher quality, and you can remove background from images which is not possible with JPEGs. However, JPEGs can be compressed easier and have a smaller file size.
GIF (Graphics Interchange Format) only uses lossless compression and is ideal for animated images due to its relatively small file size. GIFs are popular across the internet for displaying animated pictures on social media and blog posts. It is a powerful way of conveying a short message or for a more comical effect than a picture.
2. Begin image compression and resizing
Image compression is key when you need to optimize your web images. However, this can get tricky and if not done correctly, can affect the quality of the picture.
Image resizing
When discussing resizing images, we are talking about actually resizing them, and not only by shrinking it implicitly using HTML and CSS that is applied when the browser renders the web page.
For example, let’s say you wish to use an image of dimensions 3800 x 5000 px as a product’s display image of size 300 x 300 px. Instead of setting its height and width attributes in your HTML code, resize it before it is sent to the browser by the server. Not only does this reduce the time it takes to load your web page, but it also reduces the bandwidth and disk space where it is being hosted on the server.
Similarly, many developers overlook the need for resizing the images concerning the website’s layout. Images that are sized for an old design probably will not be the right dimensions for the new website design. For example, if previously you were using a banner image size of 1600 x 1800px, yet your new design only has space for an 800 x 1000 px image, then you can save a few kilobytes by resizing the picture to fit the new dimensions.
Image dimensions
A widespread misconception is that only images of large pixel sizes guarantee the best quality on the web page. People often use images of 2000 to 5000 px even though the most commonly used format for large screens is only 1926 px wide.
3. Check your image quality
Image quality represents its visual representation on a web page. Businesses, especially those that sell highly visual products, are reluctant to reduce their quality for fear of appearing lousy to a website visitor. However, reducing image quality correctly does not affect its quality yet reduces its file size, so it loads faster for the visitor.
Image quality reduced from 100% to 0% will greatly impact its appearance and file size. Great for page speed, yet will look ‘grainy’ and pixelated for human visitors. Yet, reducing the quality of an image by 10% to 20% does not have any visible impact on image quality. Still, it will drastically reduce the file size enough to load the image faster.
4. Understanding Lossy and Lossless compression types
Lossy is a compression type when a compressed image loses its data. This data loss will not be noticed by a user yet will significantly reduce the file size per se.
Once the compression has taken place – only part of the original information is retrievable. Lossy compression is ideal for JPEG file formats with small file sizes. Yes, the compression loses data, yet, reduces the possibility of compromising on image quality.
Lossless compression is when an image is compressed, all of its information remains intact, and all data is retrievable upon uncompressing. Since all the data is present, Lossless compression does not damage the quality of the image, however, it needs to be uncompressed before it can be rendered.
To implement Lossy and Lossless compressions, you can use either Adobe Photoshop or Affinity Photo.
5. Use image optimization tools
There is a plethora of free and paid image editing software available that can be used to optimise images for performance. Deciding which to use will depends on user preference and the type of optimisation sought. A few common image optimisation tools are:
What are SVGs and why you should consider using them?
Scalable Vector Graphics (SVG) are a scalable vector principally used for simple images, text, and logos. SVG files contain text that delineates images' shapes, curves, and lines.
Because of this, SVGs can quickly scale for any screen size and resolution.
They can be indexed by search engines the equivalent to JPEG or PNG images yet have smaller file sizes than them. Moreover, the SVGs format is supported by the majority of web browsers and devices.
Mobile ready images
With almost 60% of online traffic now coming from mobile, and with Google emphasising mobile-first browsing, a mobile-friendly website is necessary for online businesses.
As more of us are using mobile devices to surf the internet, mobile browsing must contain responsive images (in other words, look good on all device types, tablets, android, iOS, etc.). Using SVGs is one such way to ensure you are using responsive images.
Other best practices for image-heavy websites
The above points are important ways to improve image performance, and the tools listed can be used to remedy your current website. When considering adding new content and images to your website, ensure you are executing these web image best practices:
Resize your images before adding them to the server
If you cannot resize them before uploading them, define the height and width in HTML
Compress your images to reduce the unnecessary file size
Use SVGs if you can
Use alt text to describe the image in one sentence
Appropriately use PNG, JPEG, and GIF file types
Use web fonts rather than placing text within images
Plus, it would be best if you considered the following webpage performance tips:
Browser caching
Browser caching helps websites store static data inside a user’s web browser. Next time a user requests the same data, it is instantly served the identical data from local storage, rather than downloading the data from the webpage. Browser caching offers a faster and improved user experience on your webpage.
Lazy loading
Instead of loading all the photos simultaneously, websites using Lazy Loading can load images in segments, typically when scrolling down the page, providing more time and resources to load the initial page faster. Hence, avoiding the time taken to load all the images on that part of the website, which takes longer to load and could lead to the visitor bouncing off the page.
How can I find image-related issues on my website?
You can use several tools to test your website specifically for image-related issues and page speed.
Google PageSpeed is a free tool that highlights if you have any unoptimized images on your website and makes recommendations on how to improve it. Google Lighthouse is a free open source software that web developers can use to ensure that the sites they are building are light and not image-heavy.
My favourite tool is the website analyzer ImageKit. You can type in any page URL, and within a few minutes, it will provide suggestions for that page concerning the following:
Best image format,
l=Lazy loading,
HTTP/2,
Image resizing, and;
A percentage score for both desktop and mobile.
You may be surprised, yet the scores for both desktop and mobile will be different – ensure you pay proper attention to both, especially mobile.
Final thoughts
According to Google, pages that take over 10 seconds to load will increase their bounce rates by 123%. Image-heavy websites will then struggle to increase page speed and thus increase their webpage bounce rates.
Following these actionable tips and best practices ensures that your website provides a great user experience and will rank higher in search engine results pages, getting more traffic to your site.
The benefits of optimising images are clear – when will you begin optimising?
This article was first written for Jeffbulla's Blog.