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 to increase page speed.
Post summary:
- Benefits of optimizing images
- How to optimize 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 optimizing images
Optimizing 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 optimizing 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 well as compared to 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.
An example of low page speed
3. SEO Benefits
Not only human visitors but also 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 optimized for performance, you are speeding up page load times, where Google’s algorithm gives preference to those websites that load quicker and penalizes 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 are presenting the faster loading and more relevant websites to their users and 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 are able to 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 optimizing the images, so they load faster and display better. For all online businesses, positive user experience is essential for a surviving and thriving business.
How to optimize 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
There are various types of file formats available for images that are 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. JPEGs, however, can be compressed easier and therefore 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 it, 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 the images of large pixel size guarantee the best quality on the web page. Often, people even 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 who sell highly visual products, are reluctant to reduce its 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 have a huge impact on 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, but 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 an image that is compressed 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 that usually have 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 upon uncompressing, all data is retrievable. 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 optimize images for performance. Deciding which to use will is dependent on user preference and the type of optimization sought. A few common image optimization 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 the shapes, curves, and lines of images.
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 compared to them. What’s more, 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 emphasizing mobile-first browsing, having a mobile-friendly website is a must for online businesses.
As more of us are using mobile devices to surf the internet, mobile browsing must contain images that are responsive (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 before uploading them, define the height and width in HTML
- Compress your images to reduce 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 having to download 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 at once, 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 at faster speeds. 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?
There are several tools that you can use 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 favorite 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 is not only providing a great user experience but will rank higher in search engine results pages, getting more traffic to your site.
The benefits of optimizing images are clear – when are you going to begin optimizing?
