How to Optimize Images for Your WordPress Website

Have you optimized your WordPress images? Most of the people don’t know that images, just like content, play a vital role in reducing site load time, generating a massive amount of organic traffic, and making your content more popular across the web. While publishing an article, their main focus is on optimizing its text part. Ignoring the optimization of the image part, they miss the traffic that was supposed to come from image-based search engines such as Google Images.

Since website speed is now has a big impact on search engine rankings, you must be an expert in image optimization art. The more optimized images you have on your site, the faster your site will be and hence the higher it will get ranked in search engines. Following are a few important things that you should consider when working with images on your WordPress site.

#Alt Text:

Alt Text, which stands for Alternative Text, is one of the most prominent aspects of image optimization. It is a word or phrase that is associated with an image. It doesn’t only help your site visitors to have a better understanding about your images, but also tells search engines what an image is about.

When a visitor sees an image of a child smiling, he instantly recognizes what’s going on in the image. But unfortunately, like human, search engine bots are not able to instantly identify what the image is all about. Therefore, you need to help the bots recognize your images by making use of the Alt Text.

To apply it, simply add alt=” the text alternative to image” to your <img> tag. Here is the source code of an alt tag:

<img src=”child-smiling.jpg” alt=”Smiling Child” />

That’s all!

#Image File Name:

Before uploading an image to the WordPress media library, it’s absolutely crucial to give it a descriptive, keyword-rich and relevant name. While naming your images, keep the following things in your mind:

• Pick an appropriate name that clearly explains what the image is about. You can also add a geographic location, if you want.
• Don’t use a single word or words together to name your image files.
• Avoid using generic filenames like DCMIMAGE10.jpg or pic.gif, as they don’t deliver any useful information to the search engines.
• The file name should not be extremely lengthy. Instead, keep it short and simple.
• Since Google assumes dashes as separators and underscores as word joiners, avoid using underscores/pluses. Instead, prefer using dashes/hyphens. For Google:

WordPress-Image-Optimization = WordPress Image Optimization

and

WordPress_Image_Optimization = WordPressImageOptimization

So it’s better to use wordpress-image-optimization.jpg.

#Image Formats:

There are three image file formats that are most commonly used online: JPEG, PNG and GIF. Let’s understand their usage:

• JPEG: Used for images with a large variety of colors such as photographs.
• PNG: Well suited for simpler decorative images like icons, logos, screenshots, banners, and other computer-generated imagery.
• GIF: Best for animated images.

Now, let’s look how these three file types affect the same image:

This image is a JPEG at approx. 39KB.

JPEG (or .jpg) images use lossy compression (which often results in degradation of image quality) in order to provide reduced file size. In the above image, the JPEG format is providing nice quality with smaller size.

This image is a PNG at approx. 128KB.

On the other hand, PNG makes use of lossless data compression technique. That means the quality of a PNG image will always be better, however the file size may be much larger than a JPEG file.

You also would have noticed that the above PNG file is over three times larger than its JPEG version. That’s why you should be very careful while using PNG images.

This image is a GIF at approx. 53KB.

Like PNGs, GIFs also use lossless compression technique and are not better than JPEGs in terms of image quality. Also, the size of a GIF is slightly larger than a JPEG. Notice the above GIF file is 14KB larger than its JPEG version.

When it comes to image optimization, JPEG wins everywhere due to providing the best image quality at the smallest file size. If you really want to improve your website’s page load speed, try to pick the best balance of image quality and file size.

#Image File Size:

Images that take more space than expected may tremendously affect the performance of your WordPress site. Heavy images slow your site down, which is not only bad from SEO viewpoint, but also results into a bad user experience for your visitors. Today’s users don’t like to wait for a website to load. If they found your site taking more than 3 seconds to load, they click the back/cross button and say goodbye to your site!

There is an option available in WordPress Post Editor, using which you can resize your images. But that’s not a good practice, because in real, WordPress doesn’t resize your images. Instead, it just shrinks the dimensions of image via CSS/ HTML source code. Consequently, the browser first loads a larger image and after that resizes it.

The best way to avoid this issue is using an image editing program like Photoshop to make your image a desired size without sacrificing its quality. In Photoshop, there is an option called “Save for Web” under “File” menu, using which you can quickly find compromise between acceptable image quality and minimal file size.

Save for Web Dialog Box.

As Photoshop is fairly expensive, you may try one of the following programs that are absolutely free.

• Windows: PNGGauntlet, RIOT
• MAC: ImageOptim
• Linux: Trimage
• Cross Platform: GIMP
• Online: TinyPNG

#Captions:

As of right now, image captions don’t affect your site’s ranking in search engines but they can lower your bounce rate. That’s because they are quite explanatory and satisfy your visitors by delivering their desired information. On your entire site, captions are the most well-read pieces of your content. Therefore, make it a habit to add nice and relevant captions to your images to make them more attractive.

WordPress Image Optimization Plug-ins

It’s always better to optimize images before you’re going to upload them. Luckily, there are plenty of plugins that allow you to optimize images even after uploading. Some of them are given below:

WP Smush.it:

WP Smush.it is indisputably the most popular and widely used WordPress plug-in that is perfect for reducing the size of an image file without losing its visual quality. By taking advantage of the Smush.it API, which performs several image optimization techniques, it removes non essential bytes from your images.

EWWW Image Optimizer:

This plug-in makes use of lossless optimization techniques to optimize your WordPress images; means the quality of your image will remain same before and after the optimization. The best thing about this plug-in is that it also lets you optimize the images that you had uploaded in the past.

Hammy:

Hammy is another WordPress plug-in that takes your uploaded images and generates smaller sized images depending on content width. When a visitor lands on your site, it automatically serves the smallest one possible image to him. This delivers visitors a better user experience, especially on mobile devices.

Imsanity:

Imsanity automatically scales huge image uploads down to the configurable width, height and quality. Best of all, you can free up your disk space by using its bulk-resize feature that lets you selectively resize your existing images. This plug-in is well suited to blog owners who don’t want to store hi-resolution original images on the server.

CW Image Optimizer:

Like EWWW Image Optimizer plug-in, this WordPress plug-in also uses lossless optimization techniques to maintain the image quality. It uses Linux image optimization programs – like littleutils – to optimize your images. This plug-in is based on the WP Smush.it plug-in, except your files are not uploaded to a third party server.

Conclusion:

If you spend hours researching and writing high-quality post, never forget to optimize your images to take the full advantage of search engine. You may not realize this, but using well-optimized images can make a huge difference on your site’s ranking in search engines. Moreover, your visitors will thank you due to faster web page load speed.