Images are inevitable part of any website. As the popular quote says, “A picture is worth a thousand words”, you can easily use an image to replace lengthy text paragraph. Images are very useful in expressing your thinking, especially for tutorials, photography and how to sites. With buzzing social media, it is necessary for you to have featured image for every individual post to share it attractively. Now the question might be popping out of your mind – I am using plenty of images on my WordPress site and what optimization should I do?
The simple answer is that each image on your page affects the loading speed which in turn directly impacts the user experience. No one likes the slow loading sites and hence you need to treat image optimization issues with highest priority.
How Do I Know Image Optimization Issues?
It’s very easy and there are plenty of free tools to check the page loading speed. Google has a dedicated PageSpeed Insights tool to measure the issues on a page affecting loading speed. Enter your page URL in the tool to see the results like below:
You should see “Optimize Images” as a top priority issue when your images are not compressed. Image compression is one of the main issues you will see in Google PageSpeed Insights tool. But there are many other issues you can find when using tools like pingdom and GTmetrix as below.
- Parallelize downloads across hostnames
- Serve static content from cookie less domain
- Specify image dimensions
- Serve scaled images
- Serve images in next-gen format
All these issues can be resolved easily with plugins and by following simple guidelines.
1. Reduce Number of Images
Each single image on a page will send a separate HTTP request to your server and take time to download. The proverb “A picture is worth a thousand words” may look good but in reality you should use images only when required. Fewer images mean less number of server requests and fast loading page.
On the other hand, images occupy space on your server and increase the hosting cost. Especially WordPress generates large number of thumbnails depending on the theme and plugins installed. Check out the article on how to reduce thumbnails on WordPress site.
2. Compress Images to Save Size
Browser needs to download the images from your server when the page loads. Reducing each KB of size will count on performance; hence ensure to serve the images after appropriate compression. For example, images have meta data like location, camera details, etc. Unless you need explicitly, delete those data using plugins to reduce the size.
Images can be compressed in two methods – lossy and lossless. In simple words, lossy compression is an irreversible way and removes some pixel of data from the image. And lossless compression is a reversible way which compresses the image without any removal of pixels. Based on the image format (PNG / JPEG / GIF), quality and the compression required, you may need to try out with different plugins to see what works for you.
If you have few webpages or few images to optimize then we recommend getting it done through image compression tools. Below are some of the image compression tools you can use:
- gifsicle – for creating and optimizing GIF images
- optipng – use lossless compression to reduce the PNG image size
- pngquant – use lossy compression to reduce the PNG image size
- jpegtran – compress JPEG images
WordPress has many free and premium image compression plugins. Two such popular plugins are – EWWW Image Optimizer and Smush. EWWW Image Optimizer has lot of settings and does the compression on your own hosting server. While Smush (earlier known as WP-Smushit) is simple and straightforward, it compresses the images on external server. Once installed and activated, these plugins will help to automatically compress images when they are uploaded. Here is the complete tutorial on how to use Smush plugin.
Note: Remember the image compression plugins will consume high server resources. Do not compress hundreds of images at once which will lead to violation of terms of your hosting company. Compress fewer images with sufficient interval to avoid high load on the server.
3. Serve Images From Subdomain
It is recommended to host images on separate subdomain. This will help to load the images in parallel to the content from the main domain. The content on your page will load faster since the images are loaded from different place.
Check out our article on how to move WordPress images folder to subdomain.
4. Use Correct Image Size
Prepare images exactly with the size how it will be displayed on the site. When you need 600×350 image, do not prepare 1200×700 size. Browser needs long time to download larger image files due to the size. Smush plugin also has an option to set the maximum size for uploaded images. This will help resizing the uploaded images to the max size limit and reduce the image size.
5. Avoid Resizing Within HTML / CSS
People use HTML and CSS to resize the image after it is been downloaded to the browser. This will only add some more time in loading, as the browser needs additional time for rendering the image to the required size.
For example, it is not a good practice to upload 90×90 pixel image and trying to reduce the size with the below HTML code.
<img src="your image URL" height=45 width=45>
6. Use Vector Icons
The normal images (called raster images) come in different format and will not render properly when zooming to larger dimensions. The best way is to use SVG scalable font icons like font awesome icons instead of images. For example, the icons on the navigation menu should use SVG font icons. Using images for such smaller icons will not only distort the look but also increase the page loading time.
Ensure to enable GZIP compression at server lever to reduce the file size of SVG images and other content.
7. Select Appropriate Image Format
There are three universally supported image formats – GIF, PNG and JPEG. Each one has its one pros and cons.
- Use GIF when you need animation
- PNG can be used for high resolution and high quality images like photography images. But PNG images will be larger in size.
- JPEG is more suitable for normal screenshots and web images with lower image size and lower quality (compared to PNG).
Choose the required image format and compress it with plugins before serving to users. It is also a good idea to dynamically serve images in WebP format to fix errors like serve images in next-gen format in Google PageSpeed Insights tool.
8. Lazy Loading
Lazy loading helps to show the images only when user scrolls to that position on your page. In this way, you can stop loading the images available below the fold and improve the speed of visible content. You can use plugins like WP Rocket to lazy load images, iframes and videos.
When you are starting a website then we recommend to try with multiple combinations and check which one is working for you. If you have an already running site with large number of images, then use plugins to compress all existing images. Use Google PageSpeed Insight tool to check whether “Optimize Images” issue is removed and your page speed score is improved. By following all the above listed optimization techniques will help to improve the page loading score drastically to the green zone.