How to Perfectly Fine-tune Images for WordPress: KIJO's Ultimate Guide

When it comes to web design, KIJO knows that a picture paints a thousand words. Incorporating images into your posts and articles brings them to life in several ways:

• Visual cues can amplify your call-to-action (CTA), whether that's a newsletter sign-up or sharing content.
• They foster a deeper connection between the writer and the reader.
• Images articulate so much in such little space.

Yet, there's a challenge. Although images are pivotal, they hog about 63% of a website’s bandwidth. Therefore, the need for speed and optimisation is paramount. After all, a mere one-second delay in page load can slice conversion rates by 7%. Despite captivating imagery, if they don’t pop up swiftly, your audience's interest can wane.

Most websites stumble upon this hurdle: they flaunt brilliant images, but the delivery is less than efficient. Oversized images, lacklustre optimisation, and SEO faux pas plague the web landscape. Fear not; KIJO is here with 10 pro-tips to ensure your images are spruced up for WordPress:

Optimise and Compress Images

Optimised images are 40% lighter than normal images. This improves load-time and saves bandwidth. Tools like WPSmush.it and Kraken.io can help you trim the fat without compromising quality.

Use Progressive JPEGs

For the common man, JPEGs are of two types – Baseline and Progressive. Visually, both are same. The difference lies in the way they’re loaded:

Baseline JPEG has only one layer – containing the whole image. When requested, the entire image is loaded at one go.

Progressive JPEGs compose the image with multiple layers. A Progressive JPEG image is loaded layer by layer, which gradually increases in quality, ultimately giving you a lossless view

All major image resizers allow you to save images as Progressive JPEG.

Declare the 'alt' Attribute

The ‘alt’ attribute describes the image for the search engine. The text you enter in this field will be displayed to the user in case the image cannot be loaded. A lot of people tend to leave these fields blank. This is very detrimental for SEO, and you lose out on traffic. You should always try to include your site’s keywords in your images’ alt tag.

Harness the Right Image Format

As a general rule of thumb, use PNG for vector graphics and computer-generated images such as clip art etc. Use JPEG for photographs or images with a variety of colours.

Resize Those Bulky Images

This one’s a classic. Suppose you need a 150×150 pixel photo in your site’s “Team” page. Usually, you’ll use a 5MP headshot, edit it a bit and finally upload it.

Did you spot the problem? Some folks directly upload the actual 5MP image! The WordPress theme will load the entire 5MP image (that’s 5 x 10^6 pixels) and ask the browser to shrink it to the required dimension of 150x150px. In essence, the browser displays only 0.0045% of the original image!

You end up wasting both your and your visitor’s bandwidth consuming more hard disk space and increasing the load time. None of the features are something you’d want in your site.

Always resize (and by resize I mean downsize) the image to the required dimensions and then upload it!

You don’t need fancy software to do this – there are free online tools like ImageResize.org you can use to quickly resize and optimise your images. Just upload and tweak your photo settings. When you’re done download your optimised image to use on your site. They also offer a quick Image Compressor if you just want to cut down on file size.

Roll Out Responsive Images

Even if your site is responsive, doesn’t mean your images are. That means the header image you use for a 22″ desktop screen is also served to a 5″ iPhone. When you upload an image, WordPress resizes it into multiple versions – Thumbnail, Medium, Full Size, etc. This can be changed by the developer. A well coded theme will serve the “Medium” sized version of the image, thereby saving bandwidth.

The Power of Lazy Load

This an excellent resource saving technique where an image is loaded only when the visitor scrolls down to the view-frame of the image. Consider an article – “15 of the Most Fuel-Efficient Cars in 2023”. Naturally, this article will contain at least 15 images. And no matter the height of the display device – monitor, tablet, or smartphone, you cannot fit all 15 images in the view-frame. You must scroll down to view all the images.

With Lazy Loading enabled, images will be loaded only when a visitor is in the vicinity of the image. In other terms, the images start to load just when you scroll down to view it. The first few images, however, are loaded instantaneously, since you’re already in the view-frame. Lazy Loading saves bandwidth at both ends and improves load time!

Add a CDN to Your Arsenal

Using a Content Delivery Network (CDN) will serve the image from a server which is physically closest to the visitor’s location. If a visitor from USA requests an image, and the CDN has a POP (point of presence, or simply a server) in London and New York, the image will be served from the server located in New York.

When you have considerable traffic, you should setup a CDN with WordPress in order to lower your load time and gain overall performance.

Name Your Image Thoughtfully

Think about the filename from a search engine’s point of view. Use the same text as you would in the ‘title’ tag of the image. Also, try to include your keywords that are most relevant to your site.

Capitalise on Captions

Captions aren’t always necessary, although in some cases, it is required – such as screenshots in a tutorial. Captioning images helps readers understand the topic better, while boosting your SEO.

To Wrap It Up…

Perfecting image SEO isn’t a mere luxury; it's a necessity for any forward-thinking website. By implementing these guidelines, you're not just optimising images—you're paving the way for sustained organic traffic growth in the digital age. Here at KIJO, we're all about crafting optimal web experiences. Happy optimising!