DESIGN

How to Optimize Images for Web Use

by Dustin J. Hall | 12 MIN READ

how-to-optimize-images-for-web

Images play a massive role in your website's performance—from boosting click-through rates to increasing conversions and, as this article's title suggests, improving visibility on search engine results pages (SERPs).

I understand optimizing web images and photos likely isn't news to you, or any digital marketing professional or web designer for that matter.

But if that's the case, then why the heck do so many websites lack optimized images and photos?

From first-hand experience running an agency that offers web design services, of the hundreds (perhaps thousands) of websites we've audited over the years, poor image optimization is continually within the top 5 critical issues we see affecting a website's ability to rank, drive traffic or convert leads.

The reality is that website image optimization remains a serious and pervasive issuethe exact issue the steps I've listed below are designed to address.

Here's how to optimize images for web use, better UX and improved SERP results.

Image Size Optimization

When it comes to web images, "size" refers to two basic things:

  • visual size - often expressed in pixels (i.e. 550px)
  • file size - often expressed in bytes (i.e. 250KB or 4MB)

In both cases, there's one specific optimization goal: reduce the image size as much as possible without sacrificing clarity or quality.

Visual Size Optimization

Large image sizes can sometimes cause issues in visual formatting across devices and, most importantly, they can negatively impact the time it takes for your web pages to load on desktop and mobile (aka "load speed").

As a best practice, you should always adjust the size of your images (in pixels) to match their intended use.

For example, the image below is sized at exactly the width of this blog article (780px wide) on desktop - the largest possible format in which this image could be viewed by website visitors.

optimize-image-visual-size

Virtually all graphic design tools allow you to crop and resize your images as needed, including basic programs baked into most PC and Macs (i.e. Microsoft Paint). You can also use 3rd party image editing software like Photoshop, Canva, and my personal favorite for fast (and even free) image edits, FotoJet.

File Size Optimization

While visually large images might cramp your design and SEO style, the biggest culprit of poor image optimization is the image's file type and size.

TIFF, BMP, EDS and other image files that provide higher resolutions require larger file sizes to accommodate the added visual detail. This makes them ideal for printing and large format digital applications, but less practical for standard website and SEO applications since their hefty file sizes place an unnecessary burden on browsers to load (especially on mobile).

JPEG and PNG image file types are often the best for everyday web use because they deliver acceptable image clarity with an exceptionally smaller digital storage footprint.

Using JPEGs and PNGs solves a big part of the optimization puzzle, but it doesn't win any gold medals in the SEO race. For that, you'll need to compress the image files.

While there are several free image compression tools online, my favorite tool for compressing JPEGs and PNGs is TinyPNG. It provides aggressive image compression with little to no loss in resolution while also preserving transparency (and it's free).

You'll see in the screenshot below I was able to shave off roughly 61% of my image's file size, once compressed. It's actually the image I used prior to this screenshot.

image-compression-tinypng

When images are sized and compressed appropriately across an entire website, the positive impacts on UX and load speed will be felt all the way to the sales funnel. Huge win.

  • NOTE: If your web page supports and utilizes thumbnail images (as often found in blogs), they should be appropriately sized down and compressed as separate image files.

Image File Name Optimization

When optimizing images and photos for your websites, you'll also want to use your target keyword(s) and keyword variations within the actual file names of your images.

Like any applications involving keywords, you'll want to be very careful not to over-optimize all of the image file names. It can be considered "keyword stuffing" and penalized by Google in much the same way as over using keywords within your web page's content.

Choose an image file name that aligns with the web page's keywords (or keyword theme) AND accurately describes the image itself. If you're using images that visually reinforce your page's written copy (which is what web images should do), than finding a good file name should be easy.

For example, this article focuses on the keywords optimize images, optimize images for web and how to optimize images for web. The screenshot below shows some of the images used in this blog post stored in Firesnap's internal file management system (we'll cover file folder optimization in the next step).

Notice how the highlighted image file names align with this blog's keyword theme, as well as what each image visually represents.

optimize-image-file-name.png

Quick Tip: Be sure to use hyphens between the words in your image file name since Google reads these as spaces (i.e. image-optimization-tips). Underscores and periods are actually read as dedicated characters.

Image File Folder Optimization

Now that you've optimized the name of your image file, the next step is saving the image file within an optimized file folder structure created within your CMS (such as WordPress, or in this case, HubSpot COS).

  • Prerequisite: Keep in mind that proper file folder optimization requires that you have an on-page SEO strategy and website architecture built upon that strategy.

Your image file folder structure should align with the same thematic keyword silos (also known as "pillars") that your website pages and sitemap follow. Also be sure that you are not hosting these images on a 3rd party's server!

If you're comfortable with your on-page SEO strategy and website architecture, creating optimized image file folders quickly will be a breeze.

The screenshot below shows the image file folder structure I'm using for this blog article, created in Firesnap's CMS (we use HubSpot COS). Notice how the folder name is optimized for this blog article's previously mentioned keywords, and the image files within the folder are a optimized as well.

Note: I've slightly over-optimized the file folders and file names for the purpose of exemplifying these optimization steps. This exact approach may not be ideal in more practical applications.

optimize-image-file-folder

  • Warning: Be careful when renaming or relocating image files and folders! Doing so haphazardly can break image URL links, resulting in those annoying broken image file icons on your website and damaging the page's hard earned position in search results. Fixing these on-page SEO errors is an extremely manual, time-intensive process.

Image Alt Text Optimization

Alternative text attributes (referred to as alt text) play a critical role in optimizing images for SEO and UX.

Image alt text serves 3 general purposes:

  1. Alt text serves the purpose of helping search engine bots understand what the image is of (since bots can't visually "see" images as users do).
  2. Alt text displays a text description in place of images with broken URLs or otherwise can't be rendered for visitors to see.
  3. Alt text is used to audibly describe images to visually impaired web users.

Optimizing the alt text for your web images works just like image file names. In fact, your image alt text often mirrors the image's file name.

The image alt text should accurately describe the image while aligning with the general keyword theme for the page, and not all images should have alt text exactly matching the web page's or blog's target keyword to avoid spammy keyword stuffing.

Alt text is typically edited and optimized in a couple different places:

  • In your CMS tool's image editor, typically found by clicking on the image within the file manager or clicking on the image after you've inserted it in the web page.

image-alt-text-cms-editor

  • In the web page's source code after you've inserted the image.

image-alt-text-source-code

Image XML Sitemap Creation

Your website's XML sitemap helps search engines understand what web pages are available and how they're structured.

Image XML sitemaps work the exact same way, helping search engines more clearly understand the images on your website. These sitemaps have the added benefit of helping bots see images found within your website's JavaScript (i.e. not seen within the web pages HTML source code).

You can create an image XML sitemap in one of two ways:

  • Append website XML sitemap:
    Within each page in your existing website XML sitemap, you can add specific image information for each image displayed on that page. Below is an example of adding image details to this blog page within the Firesnap XML sitemap.
<url>
<loc>https://www.firesnap.net/blog/how-to-optimize-images-for-web</loc>
<image:image>
<image:loc>https://www.firesnap.net/hubfs/Blogs/optimize-images-for-web/image-alt-text-cms-editor.png</image:loc>
</image:image>
<image:image>
<image:loc>https://www.firesnap.net/hubfs/Blogs/optimize-images-for-web/optimize-image-file-folder.png</image:loc>
</image:image>
<lastmod>2017-11-28</lastmod>
</url>
  • Create a separate image XML sitemap:
    You also have the option to create an entirely separate XML sitemap exclusively for your images.

Check out Google's Image Sitemap guidelines for more details on this option and the one above. If you have a WordPress website, you can use this Google Image Sitemap plugin to help simplify this process as well.

Optimizing Embedded Text on JPEG Images?

Perhaps the least known (and still controversial) way to further optimize your images (specifically JPEG images) is to add embedded text in the image itself.

Google's 2008 patent focusing on technology that can read text embedded in images and video has resulted in a wide variety of interpretations by industry experts. However, most digital marketers and SEOs now agree that Google does have the ability to scrape JPEG image files and "read" any words that may have be embedded in them.

No one is sure exactly how this is weighted within Goggle's complex algorithm, but why miss out on an additional opportunity to rank for image and web search terms?

The image below is a blatant attempt at...I mean, uh...prime example of a JPEG image with embedded text, along with the other optimized elements I mentioned above. Will it rank for "how to optimize images for web?"

I guess we'll find out.

optimize-images-for-web


Optimized images are just a fraction of what makes a high performance website.

Free Guide: 25 Website Must-Haves for Better Traffic, Leads & Sales

Originally published November 29, 2017. Updated November 30, 2017.