fbpx

How to Optimize Images for SEO: A Picture-Perfect Strategy

by Toby

September 1, 2023

How To Optimize Images for SEO

In today's fast-paced digital landscape, it's not just about the words on your website that matter; it's also about the images that accompany them. 

Almost 25% of all searches in Google are image searches. And when you combine that statistic with the fact that there are more than 2 million searches per minute on Google, image optimization is not something you should ignore.

And slow site speeds will hit you in your wallet.

Research on site speed and conversion rates shows that every second your page loads slower than your peers, the conversion rate drops by 17%!! 

People will not wait around for slow pages. 

If you care about sales and profit, build image SEO into your blog post SEO workflow.

In this blog post, we're diving into the art and science of image optimization for SEO. This strategy can significantly enhance your online presence, improve user experience, and, most importantly, grow leads and sales.

So, grab your favorite beverage, settle in, and let's uncover the secrets to a picture-perfect SEO strategy for your images!

Understanding Image Optimization

What exactly is image optimization?

Well, dear reader, image optimization is preparing your website's images to be search engine-friendly so they rank in Google within search results and on the Image tab and contribute to the overall page SEO (related post on all the different places you can rank in Google). 

Below is an example of images ranking on the Images tab for an important search phrase. 

How To Optimize Images for SEO - Google Image Search

How To Optimize Images for SEO - Google's Image Tab

Images are beneficial to your readers because they help usability. Images can display information like charts and graphs, or appealing graphics, but also help break up thick content so itโ€™s easier to read. 

Image optimization is crucial in enhancing page load speed, directly impacting user experience and contributing to your overall SEO. Google wants a fast internet, and its SEO algorithms reward sites that load fast (you can read more about Googleโ€™s Core Web Vitals here, which are all about page speed).

File Format Options

1. JPEG

Pros:

  • Ideal for photographs and images with a wide range of colors.
  • Offers high compression rates, making file sizes smaller without significantly losing quality.
  • Widely supported across various platforms and devices, ensuring compatibility.

Cons:

  • Limited support for transparency (no background removal as there is in PNG files).
  • Compression may result in some loss of detail, especially in high-contrast images.

2. PNG

Pros:

  • Perfect for images with transparency, like logos and graphics.
  • Supports a wide range of colors and retains high image quality.
  • Lossless compression preserves image quality while reducing file size. But we often find that jpg images compress better, resulting in smaller image sizes.
  • PNG file format usually works best and results in small  image sizes when the images are simple text without many colors.

Cons:

  • Larger file sizes compared to JPEG typically, which slows page load speed.
  • Limited support for animations.

3. GIF

Pros:

  • Compact format suitable for simple animations and graphics.
  • Supports transparency and animation loops.
  • Can be used for small, decorative images that need to load quickly. We use the file format sparingly as the image files are usually always larger than if it was a jpg.

Cons:

  • Limited color palette compared to other formats, leading to reduced image quality.
  • Not suitable for photographs or images with complex gradients.

4. WebP

Pros:

  • Offers the best of both worlds โ€“ high-quality images with smaller file sizes.
  • Supports both lossy and lossless compression, providing flexibility.
  • Great for photographs, illustrations, and even animations.

Cons:

  • There is slightly less universal browser support than older formats (JPEG, PNG).

Image SEO Best Practices: Making Your Images Shine

File Naming and Alt Text: 

Imagine you're introducing a friend to a crowd. You'd use their name and provide context. For example, This is Carol. Sheโ€™s my neighbor - that has context. 

The same applies to images. Use descriptive file names and alt text that includes your target keyword. Not a random file name like 93883.jpg.

For instance, "handmade-leather-wallet.jpg" and "Handcrafted Leather Wallet - Ideal Gift for Any Occasion" for alt text.

Toby Danylchuk

Discover How Our Agency Can Drive More Leads and Sales To You

SEO - increase traffic and leads from Google

Content Marketing - from a data-driven topic strategy to awesome content

Paid Ads - Google Ads and Paid Social Media

Image Selection: 

Originality is the name of the game. 

Stock photos are like fast food โ€“ convenient, but lacking that special touch. 

Opt for images that resonate with your content's message and are high-quality. Authenticity trumps stock images any day!

But if you need stock imagery, modify them a bit. Add additional graphics, crop it, and put a filter on it to help it not look stock photoish. Canva is a great tool for this. 

Image Compression: 

Imagine packing a suitcase efficiently โ€“ that's what image compression does. It reduces file sizes without sacrificing quality. 

Tools like Canva or other free online image sites are your allies here. Follow their easy steps, and your images will be web-ready without the extra baggage.

Image Dimensions and Resizing: Crafting a Seamless Experience

While we strive for aesthetically pleasing images, balancing beauty and performance is essential. 

Larger images might look magnificent, but they can slow down your website's load times, leading to frustration and potentially driving visitors away.

The image below used on a spa website has horrible usability and hurts SEO. The hero image takes over this entire page. The file size was over 1 megabyte. 

And wait until you see the speed index below...

How to Optimize Images for SEO - Large Branding Images Are Bad for SEO

How to Optimize Images for SEO - Large Branding Images Are Bad for SEO

Page load times are drastically slowed down with such a large image. In this case, the Speed Index is an atrocious 8.2 seconds. A good Speed Index would be around 1 second.

Never mind that there's a whole host of additional issues wrong outside of just the negative SEO impact (read more about conversion rate optimization for spas). But large images like this typically do nothing positive for SEO or conversions, so just don't use them. 

How to Optimize Images for SEO - Google Core Web Vitals Metrics

How to Optimize Images for SEO - Google Core Web Vitals Speed Metrics. This score is horrible!

On the other hand, tiny images might load quickly but lack the visual grandeur that captures attention.

Resizing images isn't just about fitting them into a designated space; it's about optimizing their file sizes (kilobytes) without compromising quality. 

Free tools like Canva offer features that allow you to find that sweet spot โ€“ where images look stunning and load swiftly. By reducing unnecessary file bloat, you're ensuring that your website loads like a well-choreographed dance, captivating visitors from the moment they arrive. Let's go through the steps on Canva since it's free and easy!

Make Images Responsive

Responsive images are designed to automatically adjust in dimensions to deliver high-quality visuals across various devices and screen sizes, from desktops to tablets to mobile phones. This adaptability not only maintains image integrity across different browsers but also significantly reduces load times.

One way you can tell if your images are not mobile responsive is to shrink your browser window width to mobile width. If you have to scroll right to see the image, that image is not responsive to different screen sizes. 

Lazy Load Your Images

Lazy loading defers the loading of images and videos until they're needed โ€“ typically, when they're about to enter the viewport. This can significantly speed up initial page load time.

Optimizing Images for SEO Using Canva

Step 1: Upload the photo you want to resize into Canva

First, upload your chosen photo into Canva's creative playground to begin the image resizing journey. Canva makes this super easy. 

Once logged in, you can simply drag an image file onto the home page, or as in the screen grab below, thereโ€™s an upload button. And then watch as your image gracefully steps onto the virtual canvas, ready for its makeover.

How to Optimize Images for SEO - Canva Image Uploading

How to Optimize Images for SEO - Canva Image Uploading

 Step 2: Use the resize button to get the photo to the size you need

How to Optimize Images for SEO - Canva Image Sizing

How to Optimize Images for SEO - Canva Image Sizing

With your image in place, it's time to wield the resizing magic. Locate the "Resize" button on the top right corner of your workspace โ€“ it's your gateway to unlocking new dimensions. Upon clicking, you're presented with various preset sizes and dimensions.

Whether you're optimizing for social media, a blog post, or a custom size, select the one that suits your needs. As you click your chosen dimensions, witness your image elegantly conform to its new proportions. 

A side note about image dimensions for placement in a blog post or web page - resize your image to the exact size of the space it will fill. If itโ€™s too small or too large, the browser will resize the image before loading it, which slows page loading and hurts your pageโ€™s SEO.

Step 3: Download Your File

How to Optimize Images for SEO - Canva Options

How to Optimize Images for SEO - Canva Options

Locate the "File" button in your workspace's upper left corner, and click Download.

Step 4: Select which image format you wish to turn the image into under File Type (using JPG for this example)

How to Optimize Images for SEO - Canva Download Image Options

How to Optimize Images for SEO - Canva Download Image Options

From our experience, jpg is the format we use 90% of the time. It maintains the best quality while making the file the smallest overall size.  

Step 5: Adjust the quality slider to achieve a good balance

You will also notice a Quality slider before you download your image. It defaults to 80. 

Our experience has shown that jpg and Quality set to 80 is an ideal setting that minimizes file size while not sacrificing overall quality. But I recommend testing different levels of Quality with the slider and file types to find what works best.

How to Optimize Images for SEO - Canva JPG File Type

How to Optimize Images for SEO - Canva JPG File Type

Captions, Titles, and Image Descriptions: Adding Context and Flavor

Think of captions and titles as the captions beneath a piece of art in a gallery โ€“ they provide context. Captions benefit SEO and help the human visitor understand the image better. And the title often shows when a user mouses over an image.

Image descriptions will show if the image doesnโ€™t show or load on the page so you know what was supposed to be there.  The Alt Text and Caption are the most important. The caption can be a bit more explanatory since itโ€™s visible to users, but from there, you can use the exact text that you use in the alt text for the other image meta fields.

How to Optimize Images for SEO - WordPress Image Meta Fields

How to Optimize Images for SEO - WordPress Image Meta Fields

Page Speed Tools

Use Google's page speed tool to understand how your page is doing on speed. I would suggest testing a page before you optimize the images if it's an existing page, and then testing it after you have optimized the images. 

The below image shows that we could shave off a whopping 10.99 seconds of loading time by optimizing the images. That's a huge improvement. And we would save 2,198 KiB (2.2 mb) and 1,158 KiB (1.1 mb) off the first two images!!! 

How to Optimize Images for SEO - Page Speed Insights Tool

How to Optimize Images for SEO - Page Speed Insights Tool

Page Load Speed: Speeding Up Your Success

By reducing image file sizes, and compressing visuals, you're creating a better experience for users (fast page loads). Thus, search engines will reward you with better rankings, more clicks, and more impressions. Todayโ€™s internet is all about speed - itโ€™s the currency of the online realm. Visitors won't wait for a slow-loading website; they'll simply move on to greener pastures. By harnessing the power of image optimization, you're not just enhancing page load speed โ€“ you're crafting an experience that keeps visitors engaged and eager to explore further.

Your Picture-Perfect SEO Journey Begins

In the dynamic world of SEO, image optimization is your secret weapon. By implementing the strategies we've discussed, you're setting your small business up for long-term success. Improved SEO, faster load times, and enhanced user experience await those who dare to embark on this journey. So, take a leap of faith, optimize those images, and watch your online presence flourish like never before. Here's to a picture-perfect strategy that will leave your competitors in awe!

Remember, your images are worth a thousand keywords and are about to speak volumes for your brand. Cheers to a brighter, optimized future!

About the author 

Toby is the co-founder of 39 Celsius. He has over 20 years of digital marketing experience and has started several companies throughout his career. He's an expert in SEO, Social Media Ads, Google Ads, Marketing Automation, and more. He has a BA in Chemistry/Biochemistry from UC San Diego and an MBA from SDSU.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Get in touch - how can we help you?

Your journey for better results online begins NOW!


>