Contents
We all agree on that: Image is an important factor affecting website speed.
So, how to speed up image loading on websites?
We will bring a few useful tips in the article below
Currently, most websites use a lot of images, especially e-commerce websites. The rest of the website elements (HTML, CSS, JS,…) use negligible capacity, only about 10-20%. So the optimization of images is a matter of primary concern when working with the website.
1. Speed up website image loading by using correct image size
Standard image size on website
Using images on the website is not as simple as inserting images into your posts. You need to check image size because this is the reason affecting website speed.
Correct image size is the fixed or maximum size that the website allows displaying in a specific position that the user can see. It is usually specified according to website design.
Even if you use an image with a size many times larger, the website will only display the correct size or maximum default size.
How to know correct image size
There are many to determine the size of an image on a website, popular is 3 ways:
- Contact the website developer, they’ll tell you the list of image sizes for the best display of your website.
- Some websites will have instructions and suggestions in the admin panel. You can log in to the admin and check the image size.
- Use the browser built-in “inspect”
Click “Inspect”, you can see information:
In some cases, there is no fixed image size on the website because it depends on the purpose of use, location of use and what equipment your customer uses. Tablet? Mobile device?
With any purpose, the size of the image you use needs to meet search engine criteria. Search engines (popular like Google) cannot read images, they only read the size, the alt tag. Therefore, make sure your image size is adequate before posting on the website.
2. Speed up website image loading with resize image tools
Paint (Window)
This is available in the window and the operation is quite simple, even amateurs.
Open Paint in Window -> “Resize”
Mac preview
Open Preview application, enter the image you want to edit in the File menu.
Choose a new width and height for your image
Pixlr X
This is a popular online photo editing tool. It doesn’t require a powerful computer configuration to function.
Choose “Open Image from computer”, upload image to Pixlr .
Click “Image” on the left, choose “Image size”
In here, you can enter desired values for the image size.
Light Image Resizer
Light Image Resizer Is a premium image resizing tool.
The tool will minimize broken images and loss of sharpness when resizing. You will feel the best image quality even though the photo is resized.
3. Speed up website image loading by image optimization
Use the WebP image format
The advent of imaging and web technologies led to the next generation of image formats: Webpage.
WebP is the image format created by Google in order to maintain the image quality as well as the higher compression. Both lossy and lossless compression work well on WebP, providing good rendering in modern browsers.
Compared to traditional image formats like PNG, JPG, .. WebP offers better quality and compression, resulting in lower bandwidth requirements and faster downloads.
You can use the Bulk Images to WebP Converter tool to convert traditional image formats to WebP easily.
Compress images with Tinypng
This tool helps reduce PNG or JPG file size by selectively reducing the number of colors in the image. Therefore, the website will need less data to store the images.
My image “image-filename” drop has been reduced in size significantly: from 145.7KB to 56.6 KB (61%) but still ensure the image quality is not significantly changed. That’d be great.
Easily optimize images using PHP
Refer: https://github.com/spatie/image-optimizer
This package can optimize PNGs, JPGs, SVGs, and GIFs by running them through a chain of various image optimization tools.
- Easily optimize images using Node JS: Grunt
The tool helps minify PNG, JPG, GIF and SVG images.
It comes bundled with the following lossless optimizers.
Speed up website image loading with Lazy load
If you have ever worked with a website, you probably know Lazy Load technique.
It is a module that allows a website to only load images when the user views it. Simply put, when users visit the website, they do not need to spend time waiting for the website to load all the images. Where the user scrolls, the image will be loaded.
This gives users the feeling that images are loading very quickly.
You can enable Lazy load in the following ways:
- Use Javascript: we usually use libraries: https://github.com/tuupola/lazyload
- Using module Lazy load
If you are a professional programmer, you can customize the module according to website needs correctly.
However, to increase project efficiency and save time, we prefer to use Lazy Load module.
Benefit
- The module has been tested for errors
- Speed up website image loading
- Optimize the bandwidth for the server and client
- Increase website performance and customer experience
- Can be integrated with any page on the website
- Placeholder: features placeholders until images are loaded, creating a dynamic and beautiful website layout.
4. Image CDN
CDN helps to speed up the download of images to global customers
CDN stands for Content Delivery Network, which is a network of servers that store copies of static content within a website and distribute them to multiple PoP servers. CDN server networks are located all over the globe.
Image content delivery network is a great way to optimize image delivery.
Using an image CDN can greatly reduce the latency of your image delivery. It means your images are distributed faster around the world.
Some free CDN resources:
This is a popular CDN-enabled proxy service. If your website has a host located in the US or Europe, you can optimize the image download speed a lot.
This is the CDN service for the Javascript library. It supports over 1650 different libraries, almost every popular Javascript library is there.
Similar to jSDelivr, you can use the Javascript library links on Google’s CDN server to save bandwidth.
5. Optimize images for each type of device
Mobile internet speeds are generally slower than others. Therefore, do not let users wait long to load images on the page.
Solution:
- Compress images with tools
- Use the “srcset” property of the image to load images that are suitable for the size of each device. For example, mobile can download small images compared to desktop size. This will help to load faster for mobile.
6. Image Sprites
Combine several small images and one large image. This method is usually used for icons or thumbnails in style.
It will reduce the number of requests. For example: with 10 small pictures, the number of requests is 10 times. If you merge small images into one image, the number of requests is 1 time.
The less the request, the speed up the website image loading. You can see detailed examples here