WordPress Image Optimization Guide [How To SEO Your Visual Content]

I think we can all agree that images have been an integral aspect of websites for a long time now. Moreover, WordPress is a heavy platform – so, WordPress image optimization is an important aspect to keep your site’s loading time low.

Why to WordPress Image Optimization is Crucial?

Images add to a website’s visual appeal, and help set the tone for the user’s visual experience with your site.

All this is well and good, except for one thing – the more images you use, the heavier your web page gets. Now why is this a bad thing? Well, consider these stats:

• Images take up majority of the page weight. (source)
• The heavier the web page, the longer it takes to load. (source)
• If a web page takes more than 3 seconds to load, the probability of the user navigating away from the page (bounce rate) increases by 32%. (source)

These statistics tell us that images, being on the heavier side when it comes to file size, increase the page weight; causing your site’s webpages to load slowly. Moreover, users expect to navigate through your website quickly, and get discouraged from using it when the response time is slow. So, the only workaround here is to make sure you optimize the images that are present on your website.

In this article, we’ll discuss the 5 best ways to do just that.

#1 Crop/Resize Your Images

Cropping your images to eliminate as much irrelevant content as possible is a great way to reduce its file size. Since images are made up of pixels that carry data, every pixel adds to the weight of the image. Cropping the image as much as possible removes unwanted pixels, and consequently, reduces image weight.

Another common mistake that often gets overlooked is not reducing the original image size according to the display size. For example, let’s say you’re using an image that has a dimension of 1620*780 pixels. If you’re displaying it on your web page at a size of 250*150 pixels without resizing the original image, then that becomes an unnecessarily large file, slowing down your page load speed. Hence, it’s always better to resize your images according to the display size. You can find a list of easy-to-use online tools to resize your images here.

#2 Lossy Vs. Lossless Compression

When it comes to the images that you use on your website, compressing them before publishing is standard practice. However, you also need to put some thought into the type of compression that you’re going to use. There are basically two types of compression that are used across file types. As you might have guessed by now, they’re lossy and lossless compression.

When you use lossy compression, you’re basically reducing the file size by omitting the pixel data wherever surrounding pixels are either similar or identical. The naked eye perceives color in different ways, and this compression technique takes advantage of that. The pixel data is only removed in places where it cannot be easily noticed. This leaves you with an image that looks not much different from the original image, but is significantly lighter. The visual result of this type of compression can only be seen if you zoom in quite a bit.

Lossless compression, as the name describes, does not omit any pixel data, but rather just compresses it with all the data intact. This results in a crisp and sharp image, but with little difference in the file size.

You can also get a relatively sharp image with a high compression rate, by using a combination of these two techniques. Here are some of the most effective online tools that you can use to compress images:

• Compressor.io
• Smush.it
• TinyPNG (they also have a WordPress plugin) – this by far is my favorite file compressor – it can get any image under 200 KB.

Keep in mind the end use of the image when you decide which compression technique to go with.

#3 File Type

When you edit/save the images that you will be using in your website, you also need to proactively choose the optimal file type, based on the end use. To give you more clarity on the subject, let’s go over the three most commonly used file types for images, and what they’re suitable for.

JPEG is the most commonly used image format. It has extensive color depth, and you can use both lossy and lossless compression techniques to adjust the quality and size of the files according to your requirement. Due to its color depth and adeptness, JPEGs are usually the preferred file type for complex images and photography.

PNG images are rich and sharp, but also carry a heavier weight owing to the fact that they only use lossless compression. This file type is commonly used for logos and other simple, flat imagery.

GIF files also use only lossless compression. Furthermore, they’re restricted to only 256 colors. However, they support animation, and are therefore widely used for low-quality animated images.

SVG file format is a vector image format (which we will discuss about in a bit) that is XML-based, and uses lossless compression. That being said, since it uses vector graphics, it has the smallest file size and is best used for geometric flat images and logos. To put it in perspective, if a JPEG image with 75% compression has a file size of 30kb, the same image would use only around 6-7kb in SVG format. That is, provided that the image is a pure vector graphic.

This is important to note, since SVG also supports interactivity and animation. You can embed bitmap graphics inside your SVG file, much like you would JPEGs in HTML. But doing this, however, would obviously increase your file size.

#4 Remove Unwanted Metadata

When you click a picture, your camera often stores certain metadata along with the image. Metadata is nothing but details such as the camera’s make and model, the picture’s location data, image ISO, shutter speed, date, time, etc. However, when your aim is to use these images for your website, this data becomes redundant weight, more often than not. Hence, removing this data can reduce your file size. There are a number of free online tools that you can use to remove this metadata, some of which are listed here. You can also remove this data manually, by following these steps.

• Right-click on the image(s) in your computer, and click on ‘Properties’.
• Go to the ‘Details’ tab and click on ‘Remove Properties and Personal Information’ at the bottom of the box.
• Select the properties you want removed, and click on ‘OK’. You can also choose whether to remove data from the original file or save a copy, from this dialog box.

#5 Choose The Right Graphics

When it comes to digital images, there are two basic types of graphics that are commonly used – raster and vector graphics. We’ll take a look at how these two are different, but before you process the image for website use, you need to consider these and choose accordingly.

The difference between these two graphic types is that raster graphics uses pixels to form images, and vector graphics uses paths (points, lines, polygons, etc.). Since raster uses pixel data, it is capable of producing rich images with a high level of detail, no matter how irregular the shapes contained within the image are. Because of this, images that use raster graphics have a heavier file size, and they also tend to get blurry when zoomed in beyond a certain extent.

On the contrary, vector images do not blur out, since they use paths, and are therefore independent of resolution. They also have a smaller file size. However, vector graphics is not the most suited for images that contain complex, irregular structures within them. Therefore, vector graphics is commonly used for images of a geometric nature, such as logos, icons, etc.

#6 Include Alt Text

The alt text is basically a short description of any image that you upload on your website. It is one of the most important aspects of optimizing your images for search engines, as it helps them understand the content of the image (since search engine crawlers cannot process images) and present it as a result for relevant searches.

For example, let’s take a look at this picture.

For this particular picture, you could use insert an alt text such as ‘Dark abandoned road’, instead of leaving it blank.

You can do this by adding the alt text to your HTML code right after the image tag, as follows:

<img src=”road view.jpg” alt=”dark abandoned road”>

If you’re using a CMS like WordPress, you will have the option of including the alt text when you select the image to upload. As a best practice, it’s always better to keep the alt text concise and short, preferably within nine words.

Apart from helping search engines understand the contents of the image and aiding in keyword optimization, alt text also helps describe the contents of the image to people who are visually impaired.

#7 Image Title

This is what’s commonly referred to as ‘image title tags’, although it’s technically not a tag. The image title usually appears in a tooltip when you hover the cursor over the image. Just like the alt text, the image title can be included in the HTML code or in the ‘Title’ field in WordPress or similar CMS UIs. If you’re using HTML, then you can insert the title tag for your image as follows:

<img src=”road view.jpg” title=”dark abandoned road”>

In the above example, a box with the text ‘dark abandoned road’ will appear when people hover the cursor over the image.

#8 Image Caption

An image caption usually appears below or above the image, and just like the image title, is meant for the benefit of users by giving them better context about the contents of the image. Here’s a good example of a captioned image:

This winding road along the western coast of Australia offers a magnificent view of the sunset

How to do WordPress Image Optimization?

Here are five steps, if followed properly, can do wonders for your website’s image SEO, and make your web pages light and super fast in no time.

However, we’re not going to stop with just that. Odds are that you probably already have a bunch of images uploaded on your site, and you might need to optimize them first, before you apply these techniques to the images you upload henceforth.

Going back through the older images on your website and optimizing them can get confusing sometimes, especially if the number of images are on the higher side. In order to help you with that, we’re going to take you through an image auditing process that you can use to do the same.

Step 1: Create an Inventory of Your Images

The first thing you need to do before you start auditing the images on your site is to create an inventory of them. You can use an online tool such as Screaming Frog to do this. Here’s a step-by-step guide on how to do this. Look out for the number of externally hosted images on your site. Usually, this would be either due to the usage of embed codes pulled from other sites or using a content delivery network to host your website’s images. Ideally, the number of external embed codes in your site should be at a bare minimum, if any at all.

Step 2: Delete Unnecessary Images/Replace Them with Web Fonts

Go through the list of images on your site, and figure out if there are any unnecessary images that you can take down. Alternatively, you can choose to replace them with web fonts if that works out better.

Step 3: Make Sure That The File Sizes Are Optimal

You can use Screaming Frog to sort out images that exceed a certain file size. For best results, you can set the maximum file size for each image as 75kb. Once you’ve done that, you can run the crawl again and get a list of images that exceed this limit and focus on further compressing them.

Step 4: Audit Image Names & Alt Text

Once again, you can make use of Screaming Frog to go through the image names and make any alterations necessary, according to the best practices we discussed earlier in this article. You can also filter out the images that don’t have any alt text and add the same. In case you’re using a CMS like WordPress, you can go to your image repository and edit the necessary fields, as shown in the image above.

These four steps are just a basic process, but they can be very effective in optimizing the images that you already have on your website.

Wrapping up

To summarize what we’ve covered thus far in this article, WordPress image optimization is crucial for the following reasons – it reduces your page weight drastically and improves load speeds, thus enhancing user experience and minimizing bounce rate. You can do this by following these steps:

• Cropping/Resizing your images
• Choosing the most appropriate compression technique
• Choosing the right file type for the purpose of the image
• Removing unnecessary metadata
• Selecting the most appropriate graphics for the type of image

You can further optimize for SEO by making sure you follow these steps diligently:

• Include alt text that is concise, and preferably 9 words or less
• Giving your images a proper title
• Including captions that clearly state the contents of the image

However, optimizing your images is just one portion of SEO. In order to truly optimize your website for search engines, you need to look at every aspect of SEO, right from content to your page layouts. If you’re not sure where to start, here’s a local SEO checklist that you can make use of.

These steps are pretty much all that you need to follow in order to optimize your website’s visual content and make sure that it’s light, fast, and provides a smooth experience for the user.

---

Antony Melwin is a marketing writer at Synup. When he’s not writing, he’s caught up in his own world that revolves around travel, fashion, poetry, and photography. Having studied textile design, he loves to analyze every bit of fabric that he can get his hands on. Currently, however, he’s focused on traveling to every location in his bucket list. You can follow his travels on Instagram @melwinish.