Images are often overlooked when building websites. Find out how to optimize your images to deliver concrete results in terms of speed and improved search engine rankings with simple techniques including the use of alt text, correct formatting, lazy loading, caching, CDNs, and image site maps.
Apart from making your website look attractive, images can drive substantial amounts of traffic to your site if they are optimized and used correctly.
Just like any other piece of content, images need to be optimized for size, format, and description, so they do not slow your site and contribute to improving search engine rankings.
The good thing is that it is not hard to do this, and you could experience growth by implementing just a few simple techniques.
Use descriptive filenames
The first thing you need to do with your images is to name them properly. Avoid using random numbers, letters, or ambiguous explanations.
Use filenames that give context, describe the images, and make them easier to find when you want to use them.
If you are using more than one word in the description, use dashes and not underscores to separate them. While it might seem to be of little consequence, there are valid reasons for doing so.
Historically, search engines did not accept underscore as a valid character, and using them harmed SEO ranking opportunities.
In addition, dashes will not hide behind any underlined text, they feel more native in URLs (webpage addresses) and they are also easier to write on a standard keyboard because you do not need to press shift.
Make the images the right resolution and size
If you take images straight off your camera or phone and upload them to your website, they will likely be huge and will slow your website speed to a snail’s pace.
You must learn to optimize them in terms of resolution and file size. There are hundreds of free image editing software programs you can download off the internet, but the photo editing software on your phone, laptop, or tablet is sufficient to perform these tasks.
The key is to know what sizes to use. Images have file dimensions, which are measured in pixels for width and height. They also have a file size that is measured in Kilobytes or Megabytes. You can think of the two as size and weight.
If you are using a Mac, use the Mac Finder, click on the image, and it will tell you the resolution as well as file size. If you are using a Windows PC, right-click on the file and click properties, and it will give you the file size in a popup window. Navigate to the details tab and you will be able to see the resolution as well.
If you plan to use your images in full screen, then you should set the dimensions at 1,280 pixels wide. If you plan to use them smaller on the screen, then you should target around 600 pixels wide.
It is worthy to note that WordPress themes will create three sizes of the images you upload to your media library backend at 600 pixels (large), 300 pixels (medium), and 150 pixels (thumbnail). You can change these settings from your WordPress dashboard.
Sizing is the most important process in preparing images for websites. As a guide, you should aim for full-screen images to be between 80 and 100 Kilobytes, while smaller images only covering part of the page should be 20-30 Kilobytes in weight. If you drop the image quality by around 30-50 percent, the naked eye will not even be able to tell.
You can, however, go too far. If the image has jagged square edges, it is pixelated. This means that you have shrunk it too much, and it loses definition when you try to blow it back up. Hot tip… Always keep a copy of your original photos.
You should save the images for your website in jpeg format, but if you are using high-end editing software such as Adobe Photoshop, you can compress the images further without compromising quality by saving them in next-generation formats such as JPEG 200, JPEG XR, or WebP.
Alt Text Optimization
Search engines such as Google do not see websites as the shiny, flashy creations that we see. Search engine robots or crawlers simply see the header, subheaders, text, and other bits and pieces in a stripped-back version.
Most importantly, they cannot see or read or interpret images… yet (watch this space).
What they can do, however, is read ‘alt text’, which is also known as alt tags or alt descriptions. So, what is it? Alt text was initially created for screen readers for the visually impaired, but search engines soon realized that they could take the alt text of an image on a webpage and use it to give the image context and understand whether it is relevant to the page or not.
If you correctly optimize the alt text of your images, you are not only meeting your accessibility commitments for users, but you are also improving your SEO.
Alt text is different from on-page copy and SEO. When creating alt text, you should describe the image as literally and specifically as possible. You should also make sure that the length of the description has fewer than 125 characters as the screen reading software will truncate it after that threshold.
Do not fall into the trap of starting it off with “image of…” dive straight in and use your keywords sparingly. There is also no need to use the keyword in each image’s alt text on the page.
You may be wondering where you can do this. Most website Content Management Systems have the functionality to do this in a user-friendly window, but you can always edit your HTML directly on the page.
Implement lazy loading, use browser caching, and content delivery networks
Lazy loading is a technique that you can implement to make your page load faster. It means that your page will only load items that the user is seeing and will load the rest as the user scrolls down towards them.
Put simply, the browser will only load what is needed at the time. There are plenty of lazy loading plugins out there, including Lazy Loading by WP Rocket, A3 Lazy Load, Speed Up -Lazy Load, and many others.
You also want to make sure that you have a caching plugin on your website. Browser caching is the process where a webpage’s core will be stored within a browser if a person has paid a visit before. As soon as you visit the website, the browser will remember what it found last time and flash load the parts that have not changed, speeding up the process significantly.
Plugins to perform this task include WP Rocket, Cache Enabler, Comet Cache, and many others.
To speed things up further, you should use a content delivery network for your images. A CDN refers to servers that work together in different geographic areas.
If a visitor is browsing the internet in France, it makes much more sense to deliver images from a server that is closer to France, rather than from China, for example, which would take longer to make it to the browser.
CDNs will pick the closest location to the browser, which usually has the fastest loading time.
Bonus tip – Create an image sitemap
You can and should create an image sitemap which is a separate file to your actual website sitemap. If you want to make sure that Google, Bing, and other search engines index all your images, then you really should do this. However, you need to put it into context. If your website is about writing academic papers, then image sitemaps are not going to be a big traffic driver for you.
If you sell shoes, however, you want search engines to index all your images so they can show up in the image carousels.
