A Complete Guide to Optimizing Images for WordPress

WordPress June 10, 2015

When was the last time you visited a website that did not use any image? Can you name a site that is not using any images?

I am sure you will have to think hard to answer these questions. It is also likely that you will not be able to find out a modern website that is not using any image.

As these questions illustrate, images have become an integral part of modern websites. Using high-quality images has become a common ingredient of today’s web design principles.

However, using HD images has some negative impacts too. Depending on the visitor’s internet connection, image-heavy pages can take several minutes to load. To prevent this, you need to optimize your images.

By optimizing the images, you will be able to increase the page loading speed and improve the performance of your website. In today’s post, I will show you how to optimize images for your WordPress site.

Use properly sized images

A common mistake among the newbie bloggers is to use images of improper sizing. Most of the time, they do this without even realizing that this will have a substantial impact on their website performance. This thing happens when you use an unnecessarily big-sized image to display a relatively smaller one.

An example will make this thing clear. Let’s say, you need to show a 150 X 150 preview of a 5MP image. If you use the original image to display the preview, the visitor’s browser will first download the large image and then resize it.

And if you have several images on a page, it could take a while to load completely. On the other hand, if you used correctly sized, small pictures, the page will load within seconds. Therefore, to avoid poor performance, always resize the images before uploading them to your website.

Save the images in proper format

Saving images in the incorrect format is another common issue. Unlike the previous one, this mistake is made by both new and experienced bloggers.

Only three image formats are used on the internet – JPEG (or JPG, as it is commonly known), GIF and PNG. Each of these formats has their separate purposes. Let me give a brief introduction about these formats.

gif-jpg-png

JPEG/JPG is the most popular image format on the internet. Thanks to its high compression technology, JPEG manages to keep the file sizes smaller, which is the main reason for its popularity. This format is best for photographs or any image that contains lots of colors.

PNG was created by Adobe to provide better quality images. However, images saved in this format are larger than the JPEG files and, therefore, it is not a commonly used format. Most of the time, logos, icons, buttons, etc. are saved in the PNG format.

Lastly, GIF is best known for its limited color and the small file size. This format is most popular for saving small animated files. Some people also create advertisement banners in GIF format.

jpeg-gif

Now that you know the difference and best use of different image formats, make sure that your images are saved in the correct format.

Use Lazy Load Plugin

Lazy loading technique is a very traditional method of increasing the page loading speed. When a visitor loads a page, his web browser tries to download all the images and other media files at once. This method slows down the page loading process.

Lazy loading technique prevents this scenario by preventing the browser from downloading all the images at once. Rather, it forces the browser to load only the images that are visible in the current window. As a result, the browser will not have to download all the media files at once, and your pages will load a lot faster.

bj-lazy-load

There are lots of free lazy loading plugins for WordPress. Some of the well-known ones include Lazy Load, BJ Lazy Load, jQuery Image Lazy Load WP, etc. It is possible to use lazy loading technique for the video files too.

Use CDN Service

Another traditional method of increasing the page loading speed is to use a Content Delivery Network (CDN). CDN service providers have their servers located in different parts of the world. When using a CDN service, your visitors will receive the images and other static files from the closest server to their location.

For example, let’s say your chosen CDN service provider has servers in Singapore, USA, and Brazil. When a visitor from India comes to your site, he will get the static files from Singapore, which will send the data faster than a server located in USA. As a result, the visitors will enjoy a faster page loading experience.

cloudflare

While there are both free and premium CDN services, it is recommended to start with a free CDN service. If your demand grows, you can always migrate to a premium CDN service later. Some of the modern CDN services include CloudFlare, Incapsula, Photon by Jetpack, jsDelivr etc.

Smush the Images

You can optimize your images even after uploading them to your website. This process is called smushing. Smushing an image includes removing unnecessary meta-data like date, time, camera model, etc. By removing the unnecessary information, images will become smaller in size and will load a lot faster.

wp-smush

WP Smush is the most popular smushing plugin for WordPress. This excellent free plugin lets you bulk smush your uploaded images. It is also possible to enable auto-smushing for the future uploads.

If your website uses a lot of images and you are not using a smushing plugin, install WP Smush now. You will be amazed after finding out how fast your site becomes after using a smushing plugin.

Final Words

So, these were my tips for optimizing images for WordPress. How many of them are new to you? Let me know by leaving a comment below. And if you have any other suggestion for optimizing images, please share your tip(s) with us.

Finally, if you find the article useful, feel free to share it with your friends too.

Leave a Reply

Your email address will not be published.