7 Ways to Optimize Images in WordPress to Improve Page Loading Speed

Images are inevitable part of any website. As the popular quote goes – “A picture is worth a thousand words”. Images are very useful in expressing the thinking, especially for tutorial, 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 the page affecting loading speed. Enter your page URL on 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 on 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

All these issues can be resolved easily with plugins and by following simple guidelines.

How to Optimize Images in WordPress to Improve Page Loading Speed?

Here is the summary of optimization techniques to improve the page loading speed:

1. Reduce number of images on server
2. Use plugin to compress images to save size
3. Serve images from subdomain
4. Use correct image size
5. Avoid resizing within HTML / CSS
6. Use vector icons wherever possible
7. Select appropriate image format

1. Reduce Number of Images

Each single image on a page will send 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 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 host. Especially WordPress generates huge 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 of the images.

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 WP-Smushit. EWWW Image Optimizer has lot of settings and does the compression on your own hosting server. While 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 WP-Smushit plugin.

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. WP-Smushit 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. Below is an example use of font icon:

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.

Conclusion

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.