Optimizing Images for SEO: A Comprehensive Guide
SEO is an ongoing initiative made up of smaller tasks, one of which is image optimization and compression. Properly optimized images can help your site rank higher and provide a better visitor experience, and both digital marketers and web developers have a hand in making your site look and function well.
Much is made about Google’s feared algorithms and crawlers that proficiently visit and assess websites, then rank them based on a stringent set of criteria.
Those guidelines and best practices make up the foundations of search engine optimization (SEO). Well-executed SEO ensures web pages end up ranking on the first page of Google search queries.
Those first-page results prove undoubtedly lucrative, as 75% of internet users don’t go any further to find content. Therefore, it’s no surprise that SEO – done the right way – can increase online conversions up to 14.6%.
Unfortunately, some website developers and creators maintain a somewhat archaic view of SEO. They focus largely on keywords and don’t understand that Google heavily weighs the user experience, which goes well beyond what’s written on a website. Don’t get us wrong, properly utilized keywords will always be integral to SEO, but there’s more to the process.
For instance, there’s a matter of optimizing images (the subject of our blog).
Ensuring images on your website enhance the user experience is a balancing act. They must be conducive to quick load times – meaning, they can’t be of too high in quality. However, if an image skimps too much on quality, it’ll damage your brand.
Read below, for a deeper dive into the image optimization process.
Defining Image Optimization
In a technological, user-experience-driven nutshell, image optimization consists of numerous techniques that decrease file sizes without ruining said images. These methods necessitate the application of either a plugin or script—these effectively enhance load speeds on your webpage.
Also, the two main approaches for image optimization/compression are called lossy and lossless (we’ll examine these concepts further in a later section).
The Brass Tax of Image Optimization
It’s all well and good for us to discuss vaguely how image optimization boosts website results. But it’s the proven science and logic behind it that really illustrates the value of such a practice.
First and foremost, when weighing a website’s entire makeup, images comprise 21% of the material, according to reports from November 2018. As such, images take precedence over scripts and fonts. Video content is the only aspect of websites with further prominence.
Below, are some more specific benefits that come with focused image optimization:
Quicker Load Times
Consider this; a delay of 100-milliseconds in load time can cause a 7% drop in conversion rates. So, with finicky web traffic, there’s a minimal margin for error.
With properly compressed and optimized images, slow load times won’t be an issue – and site visitors will remain patient and satisfied.
Bolstering SEO
When part of a broader and savvy SEO framework, optimized images help websites rank higher on search engine results pages (SERPs). Google’s crawlers scoff at monumentally sized, slow-to-load images, and tend to index smaller images of decent quality for searches at a far more prolific rate.
The Odds and Ends
Here are some other plusses that illustrate the advantages of image optimization:
- It’s faster to create backups
- Networks and users will value how smaller images take up less bandwidth
- Depending on the number of thumbnails being optimized, smaller images require less storage space
The Nuts and Bolts of Image Optimization
When striking a balance between eye-catching image quality and reduced file sizes, the most common technique is compression before uploading. With tools such as Photoshop or Affinity, compressing image files is a breeze.
Also, it’s critical to put thought into both the file format and the compression-type put into use. With the correct combination of those two factors, you can potentially reduce image sizes up to 5 times.
Remember to test each combo of image and file format to find the optimal fit.
Deciding on File Formats
Efficient image modification means you must choose the right file type—which varies depending on the circumstances. Below, is a list of file types:
PNG
Generates images with high quality
Larger file sizes
Uses both lossless and lossy image optimization
JPEG
Allows users to adjust the quality, therefore offering a near-perfect balance of image quality and file size
Uses both lossless and lossy image optimization
GIF
Ideal for animated images
Uses just 256 colors
Uses only lossless optimization
While options such as JPG XR and WebP do exist, most browsers don’t support them.
For the web development layman: images with lots of colors best fit the JPG/JPEG mold, while more simplistic images suit the PNG format.
Striking a Balance with Compression
Medium compression is the way to go when it comes to uploading images.
A JPG image of high quality (for example, of over 500 KB) will look fantastic but take too long to load. Whereas, compressing the same JPG down too much (to around 70 KB) means the image will load quickly, but appear distorted and unprofessional.
Conversely, medium compression takes the JPG image mentioned above down to approximately 150 KB. This method produces an image that’s both aesthetically pleasing and quick to load.
Lossy Compression
Lossy is the compression technique that eliminates some data and degrades the image. Meaning, you need to be thorough and meticulous when reducing the image.
With tools such as Adobe Photoshop or Affinity Photo, etc., lossy compressions can significantly reduce file sizes while adjusting the quality settings of an image.
Lossless Compression
Lossless compression will filter and compresses data, so there’s no quality reduction. However, only uncompressed images can be rendered with the lossless method.
Desktop tools such as Photoshop, FileOptimizer, and ImageOptim, etc. can perform lossless compression.
Choosing Between Lossy and Lossless
Choosing between lossy and lossless comes down to experimentation. Examine which method doesn’t detract too much (or too little) from the quality of a given image.
Images are diverse, and there isn’t a one-size-fits-all approach that works. Make your choices on an image-by-image basis.
(Pro tip: Make sure to save your image files for the web – if it’s available on your editing tool. This will allow for the most optimal compressions).
Lastly, here’s a list of some of the better online tools for image compression.
What Are Alt Tags/Descriptions?
When an image fails to load on a website, written copy appears in its stead. This text is referred to as an ‘alt tag’ or ‘alt description.’
Alt text’s primary purpose is to aid screen-reading tools in describing images to visually impaired readers. Also, alt text provides search engines with information that makes it easier to crawl your website.
While there’ve been some rumblings that these tags are no longer relevant in an SEO sense, Google rep John Muller still cites their importance. He further elaborates that perhaps image advancement might reach a point where alt tags aren’t needed, but that’ll only happen within the next 5-10 years at the earliest.
For the most part, content management systems require users to click on an image to produce an image optimization module. From there, you can type and alter the image’s alt text.
The key with alt text is to be descriptive while also staying relevant to the contents of an image.
Here’s an example of bad alt text:
“Google office space search engine startup place bicycle-friendly zone.”
This is essentially just a bunch of keywords stuffed together without providing a real description of what’s going on. Keyword stuffing is a thing of the past, and crawlers/algorithms chew websites up and spit them out for such a misstep.
Instead, write something like, “A man sitting inside a Google office booth in a building with a white interior, with a red bicycle on his left.”
This gives Google all the information it needs to crawl the picture accurately.
Scaling Your Images
Many web development platforms now support responsive images.
What are responsive images, exactly?
They possess several sources that hinge upon factors such as the display density, or size of the image element in the page. The main purpose is to allow images to blend seamlessly into numerous platforms – from desktop to mobile and tablet devices.
Website builders of today generally create several sizes of the image automatically and upload them to the media library. These image sizes are available in a ‘srcset’ attribute and allow browsers to download the size that best suits the circumstances.
With rescaling options more flexible than ever, choosing 2x-3x your website’s div size or column provides a happy medium. Browsers automatically select the right image according to the device’s resolution.
Conclusion: Don’t Sleep on Image Optimization
SEO is crucial to the success of your website. One of the easiest ways to appease Google’s crawlers is through image optimization—and yet many site creators neglect this vital facet of web development.
With the above tips, it won’t only be web developers and programmers who can execute image optimization. Anybody, from writers, designers, and marketers can play a role in the process.
Keep in mind, this is a primer – or an introduction – to the process. You’ll continue to learn and grow through trial, error, and further research.
