DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

The Crazy Egg Guide to Website Image Optimization

by Sean Work

The lowest hanging fruit when it comes to conversion rate optimization (CRO) is to reduce the file size (memory) of your images.

It doesn’t require A/B testing, and you don’t need a statistics or scientific background. For these reasons, image optimization is a go-to conversion rate optimization practice that all companies should employ as soon as possible.

The actual work of reducing the size of your images is relatively easy. So it’s a great task for interns or entry-level employees.

This guide is quite lengthy. Also, it is intended to remain timeless. We will continually update this guide throughout the years to make sure the information stays fresh and relevant.

Why Reducing Image File Size Is Important to CRO

We all know how frustrating it is to wait for a webpage to load. Many of us will simply click back or start a new search if there is the slightest delay. Therefore, reducing your page load time is critical to conversion optimization.

page load time vs. abandonment

This section from the infographic How Loading Time Affects Your Bottom Line shows the detrimental relationship between page load time and page abandonment rate. For sites like Amazon.com, a 100-millisecond increase in page load time results in a 1% loss in sales. That translates into a billion dollar loss!

More often than not, the number one culprit in slow loading webpages is images that are exceedingly large when it comes to memory size. Not only can one large image make a page slow to load, but multiple large images obviously compound this effect.

ten image download time

A big part of CRO is striving to provide an amazing user experience. A good user experience relieves the stress of the visitor, and a great user experience will delight the visitor. The reason this is important is it keeps the visitor around longer, which means the chance of a conversion increases tremendously.

Basically, you want to present a user experience that gets visitors saying, “This site is cool! Hey! Look at this!” When you achieve this level of “user experience Zen,” the absolute best form of marketing starts to happen automatically – word of mouth marketing.

Why Reducing Image File Size Is Important to SEO

Webpage loading time is also an SEO ranking factor. It appears to be climbing in terms of importance year after year. Below is a chart from MOZ that shows page load speed is the fourth most important criteria when it comes to SEO for “Page-Level Keyword Agnostic Features.” This means for SEO criteria that’s not related to the specific keyword in question (such as whether the keyword is in the title tag or URL).

page loading time as SEO ranking factor

Think about how your SEO performance would improve across the board if you could decrease page load time 10 percent for every page on your site. The difference could boost your ranking from page 2 to page 1 on Google. That type of performance increase can be a game changer for your business.

Later on in this guide we’ll discuss how to optimize your images for SEO.

Why Reducing Image File Size Is Important to Hosting Costs

The final and sometimes most painful lesson of not reducing image memory size is in the effect that large images have on your web hosting bandwidth.

If your website gets a lot of traffic, large images can cause your web hosting costs to skyrocket. It’s one thing to have 50 people a day download a 1MB image from your website, but imagine when 50,000 people a day start downloading that same 1MB image.

So reducing your image file sizes now, instead of when you break big, can save you tons of money down the line. Remember, you can tell yourself “Well…that would be a good problem to have,” but you would incur additional costs hiring people or devoting resources to personnel spending time reducing image files and re-uploading them to your website.

There are workarounds like website caching and using content delivery networks. But again, these require web developers to set them up, and they only help to a certain degree.

With that said, let’s get into how to reduce the file size (memory) of your images!

Know Your Image File Types Inside and Out

There are a number of image file types that can be used on a webpage. In this guide, we will cover the five major types:

  • .jpg
  • .png
  • .gif
  • .svg
  • .bmp

All image files will end with one of these file extensions. If you go to any webpage on your desktop computer and right click on an image, you can usually open just the image in a new tab.

open image in new tab

When you open the above image in a new tab, you can see that it ends in a .PNG file type. You can also right click and download images by choosing “Save Image As…” This will download the image to your computer where you can then check the file format.

image open in new tab

Sometimes viewing file types on your personal computer can be tricky. Many default computer operating systems will hide the file type extension by default. It’s usually a good idea to go to your personal computer settings and set your preferences to display file extensions.

On a Mac, go to Finder > Preferences > Advanced. Then simply click on “Show all filename extensions.”

show all filename extensions

If you are using a Windows 10 computer, go to Start > File Explorer > View > Options > View. Next, uncheck the box next to “Hide extensions for known file types” and select the radio button for “Show hidden files, folders, and drives.” Finally, click OK.

windows 10 file extensions

windows 10 folder options

Turning on your file extensions helps a lot. There will be less confusion if you’re going to work on optimizing lots of images. You’ll also reduce your chances of making mistakes.

For example, if you decide that a certain image will work better as a .JPG than a .PNG, having the file extensions displayed will help you keep from getting confused as to which file is which if they are both on your desktop.

Another important thing you should know how to do is determine the memory and dimensional size of an image.

On Mac, just right click on your image and then click on “Get Info.”

get info on an image mac

A window will appear that will show the image memory size and dimensional size. The number in the dimensional size (area) is the width followed by the height.

image info mac

To do this on Windows, it’s pretty similar. Right click on your image and select Properties.

right-click on image windows

The property window will show the image file memory size. To see the image dimensions, click on “Details.”

image properties windows

And you’ll be able to see all the pertinent image file information.

image file details windows

Now let’s switch gears and discuss the pros and cons of each of the major image file types. Each file type has a set of qualities that will make it ideal for some jobs and less ideal for others.

We’ll start with the jack-of-all-trades image file format.

.JPG / .JPEG

Abbreviation Meaning: Joint Photographic Experts Group

Year Released: 1992

This is the most common image file type you will run into. Most phones and digital cameras will shoot in this file format. It’s also the “jack of all trades” when it comes to image file types: .JPGs scale down nicely, and .JPGs tend to be the best choice when it comes to reducing the memory size of a photo while maintaining image quality.

You can change the file name of any image that ends with .JPEG to .JPG and nothing catastrophic will happen.

However, if you simply download an image from your phone or digital camera and use it on your website without doing any image optimization, you’re going to be in for a big surprise. An uncompressed .JPG image from a phone or digital camera can have an enormous file size. We’re talking anywhere between 1 MB and 10 MBs (maybe more in some cases).

That’s why you should never use images from your phone or digital camera on your website without reducing the file size first. We’ll explain how to do this further down.

Here is a good example that should be a .JPG:

irises vincent van gogh

This photograph of Vincent van Gogh’s Irises is a good example of when to use .JPG. There’s a lot going on: lots of colors, absolutely no white space, no straight lines – only a .JPG can help here if you want a smaller file memory size.

Takeaways:

  • When in doubt, use .JPG
  • .JPG is the best file type for photographs
  • .JPG scales down extremely well, scales up terribly
  • You can usually reduce the memory size of a .JPG while maintaining good image quality

.PNG

Abbreviation Meaning: Portable Network Graphics

Year Released: 1996

The new image on the scene! .PNGs are a curse and a blessing. For web designers, they provided a wonderful alternative to .GIFs.

.PNGs are very useful for images that have large dimensional sizes (meaning big areas), but are not photos or images with lots of colors and…well…stuff going on in them, such as the Van Gogh picture above.

For example:

price vs. value

Simple graphs, charts, and diagrams tend to work well in the .PNG file format. The image above is only 34 KB. Sometimes you will find that infographics will look the best and be the smallest file size as .PNGs.

.PNGs scale down dimensionally very nicely. .GIFs have similar attributes to .PNGs but they scale down terribly. A dimensionally scaled down .GIF will become pixelated and ruin the aesthetic of a webpage.

Takeaways:

  • Great for simple charts, graphs, and diagrams
  • Can be a good file format for infographics
  • Scales down nicely
  • Not good for photos or images with lots of colors and things going on in them
  • Mac computers take screenshots in .PNG by default

.GIF

Abbreviation Meaning: Graphics Interchange Format

Year Released: 1987

.GIFs are an ancient file format that pre-date the public Internet. They worked well when the Internet was relatively new and websites where designed to exact pixels.

The beauty of .GIFs was that for small images like icons, buttons, background patterns, and decorative images they provided an extremely small file size. We’re talking bytes, not megabytes or kilobytes – bytes. Basically, nothing in terms of memory size.

the benefit of gifs

The problem with .GIFs is they don’t scale up or down nicely. They instantly pixelate once they are scaled in any direction. And with the advent of the .PNG, there really is no reason to use .GIFs any longer.

What about Animated .GIFs?

We all love a funny animated .GIF. However, they tend to be enormous when it comes to memory size. It’s not uncommon to see animated .GIFs in the 2MB range.

Many bloggers are tempted to use animated .GIFs in their blog posts, but they are sacrificing page load time for the sake of humor. If it’s worth it – use ’em!

Takeaways:

  • Outdated for the most part, just use .PNG
  • Generally, avoid using .GIFs unless you MUST use an animated .GIF
  • .GIFs can still serve as a low memory alternative for tiny decorative images that aren’t meant to scale

.SVG

Abbreviation Meaning: Scalable Vector Graphics

Year Released: 2001

.SVG files are absolutely amazing. And like the name suggests, these images are great for scaling! They are also extremely small in memory size.

There is one downfall though – photographs can’t be vector graphics. So you’re pretty limited as to what can be an .SVG. Basically, any vector illustration can be an .SVG (if it was made in Adobe Illustrator or Corel Draw, it can be exported to .SVG).

Again, .SVGs work well for simple charts, diagrams, and graphs. Logos and icons can also work well as .SVGs. Generally, they need to be a simple and/or abstract design to work as a vector graphic.

The NASA logo above happens to be an .SVG file. It’s only 14KB! And look at how large and clean it looks. That’s the beauty of vector graphics. There is zero pixelation, regardless of how large you scale the image in size.

The real issue is they almost always have to be created by a skilled graphic artist (unless you download an .SVG from a graphics site). But if you’re working on a site that gets lots of traffic, it’s wise and worth the skilled resources to use .SVGs where appropriate.

Takeaways:

  • Small memory size
  • Very useful for responsive websites where you need logos, graphs, charts, and simple icons to scale in any direction
  • Can’t be used for photos
  • Requires advanced graphic design or front-end designer skills to implement correctly

.BMP

Abbreviation Meaning: Windows Bitmap

Year Released: 1985

Bitmaps are really a Windows graphics file. It’s actually the most ancient file format of the web-supported image formats.

If you’ve ever used Microsoft Paint, then you’ve created a .BMP file. Most web browsers will display .BMP files, but they don’t have much use really. They tend to have a big memory size and are usually pretty pixelated.

Takeaways:

  • Don’t use them.

How to Optimize Web Images for Reduced Memory Size While Maintaining Quality

In this section, we’re going to get into the nitty-gritty of editing your images to improve site speed, SEO, and CRO. We’ll start with Photoshop.

Photoshop

Adobe Photoshop is the “industry standard” when it comes to image editing. You can pay for a subscription at $19.99 a month. It’s software that you download onto your computer, and really what you’re paying for is a monthly license. The Adobe software that sits on your computer will be updated regularly so long as you keep your subscription active.

There are some die-hards out there who refuse to go with the subscription version of Photoshop CC. You can find copies of Adobe CS 6 out there for a pretty penny. CS 6 was the last version of Photoshop that didn’t require a monthly subscription.

The really useful part of Photoshop when it comes to image optimization is its “Save for Web” feature. It allows you to quickly compare file size and quality for multiple file types.

First, open the image you wish to optimize in your Photoshop application.

open photoshop

Next, you may want to consider resizing the image to a smaller width. This usually is a good first step to reducing the image memory size before determining the file type.

If you are using your image in a blog post, resizing them almost always makes sense. If the image is required to be a specific size, then resize the image to that size.

But for the sake of example, let’s say you are resizing your image for a blog post. And let’s say your blog content area width is 800 pixels wide.

typical blog content width

Let’s assume you took a photo of your office buddies, and this image is going to be in your blog post. Your camera shot the image, and it happens to be 4000 pixels wide (this is quite common). Obviously, your image is much larger than it needs to be. Chances are it’s a few megabytes as well!

You can resize the image to 800 pixels wide, but in some cases, you might want to scale it to around 1,000 pixels. Mac retina screens are GREAT at revealing poor image quality. Most designers have a rule of thumb that they require images to be twice the content width. This usually ensures that the image looks crystal clear on a Mac retina screen.

The only problem with this is the images tend to be larger in memory size than they need to be, thus increasing page load time and possibly worsening conversion and bounce rates.

Again, I recommend making images around 25% wider than they need to be. Usually, blogs will scale down images, which tends to improve image quality. A 25% “safety margin” seems to work well, but you’re more than free to experiment with your own resizing to see what works best for your scenario.

In our example here, the image is over 8,000 pixels wide. In order to resize it, we go to Image > Image Size…

photoshop image size

8000 pixels wide

We will resize the image to 1,000 pixels because our blog width is less than 1,000 pixels wide.

1000 pixels wide

The next step is to “Save for Web.” Go to File > Save for Web…

save for web

In this panel, you can select the final file type and other options to optimize your image for the web. The first thing you should do is a cursory check to see what file type will best serve your needs.

Underneath “Presets” in the upper right-hand corner is the file type selector.

save for web file type selector

Cycle through each file type and record the file size for each. When you select .JPG, you may want to slide the quality slider all the way to the right (100%) so you can get a conservative number for the highest possible .JPG quality.

image quality slider to right

Once you’ve seen all the possible file sizes for the different file types, pick the file type with the lowest file size that still retains a good quality image. In our case, .JPG was the smallest memory size and the best looking, too. Therefore, we will save our image as a .JPG.

image as .png

Notice the memory size for .PNG – 731KB!!!

As we said earlier, other image types might work better as .PNG. If you try to optimize a simple chart or diagram, chances are .PNG will be the setting with the smallest memory size and best looking quality.

TinyPNG

If you don’t have Photoshop, TinyPNG is a free website that will help. You won’t be able to perform an ideal optimization, but you will be able to cut your memory size down considerably. The main drawback is that you can’t resize images with TinyPNG.

Go to tinypng.com.

tinypng homepage

Drag your images into the center of their homepage, and the memory size of your images will be automatically reduced.

tiny png savings

Next, you can simply download them one by one by clicking on the “Download” link next to the listed image, or you can download a .ZIP file of all your images.

That’s it!

If your file sizes are still pretty big (say over 350KB), you should try to resize them first. If you’re downloading photos from an iPhone, you can email yourself your photos and choose a smaller memory size than the largest (Actual Size). Usually Large or Medium is a good choice.

GIMP

gimp.com homepage

GIMP is pretty darn amazing. It’s a desktop application, and basically it’s a free alternative to Photoshop.

It can do everything Photoshop does. So if you’re strapped for cash, definitely download it. It’s available for Windows, Mac, and Linux.

We’re not going to cover how to resize and optimize images for GIMP. We may update this guide later with that information. But for the most part, GIMP operates similarly to Photoshop, so with a little Googling, you should be able to figure it out.

What Memory Size Should I Aim For?

The optimal memory size depends on the application, but the general rule of thumb is this:

Try to make your images as small in memory size as possible, while maintaining good image quality.

If your images start getting grainy, fuzzy, or pixelated after optimizing them, then you need to iterate your process so that the image quality improves.

If you’re using Photoshop and saving images as .JPG, try sliding the quality slider up to a higher value (say 80 or more). If you’re saving as .PNG, try saving as .PNG-24 instead of .PNG-8.

Let’s get into the ideal memory sizes to shoot for – for various applications.

Ecommerce

A typical ecommerce site will have anywhere from hundreds to thousands of product images. So image optimization is crucial to the success of the site.

A good rule of thumb is to keep product images 75KB or less. If your site uses an image zoom feature, you may need your images to be bigger dimensionally, and therefore larger in terms of memory size. In that case, aim for 150KB or less.

Blogs

Generally, blog images should be 100KB or less. But aim for as small as possible if you can keep the quality up. Don’t use an animated .GIF unless it completely makes the article.

SaaS

SaaS websites have three main types of images: homepage hero shot, icons, and screenshots. Generally, the most important page on a SaaS website is the home page, so that’s where you start your focus.

  • Hero Shots – They tend to be fairly large, sometimes full screen. Aim for 250 KB or lower. It may be difficult. However, it’s common for hero shot memory size to be completely overlooked. Optimizing this one image could make a noticeable improvement in the home page conversion rate.
  • Icons – Many SaaS sites will use simple icons in features and benefits areas lower on the page. It’s quite easy to keep the memory size down (usually make them .PNG). Try to shoot for 15KB or less.
  • Screenshots – If the screenshots need to be wide to show what’s going on, then you’ll again, like a hero shot, aim for 250KB. Otherwise, aim for 100KB or less. .JPG is probably the best file format for screenshots.

Free Image Editing Tools

Free Online Tools

  • TinyPNG – The brilliance of this site is its ease of use. Just drag and drop images onto the homepage and watch the compression magic.
  • Pixlr – Very similar to Photoshop (the interface is nearly identical). You can adjust a quality slider while viewing memory size.
  • Picmonkey – All the functionality you need and fairly intuitive.

Free Desktop Tools

  • GIMP – As discussed above.
  • Paint.net – A better version of Microsoft Paint. One cool feature is unlimited history. You can undo as much as you need to!
  • Seashore – An open-source Mac photo editing application. It’s known to have bugs, but still usable. However, being a part of an open-source community is always a good thing :).

How to Optimize Your Images for SEO

Here are a few final tips to help optimize your images for SEO:

Be sure to name your image descriptively. For example, if you run an ecommerce site, don’t name your image 324q345q345.png – which is basically a bunch of numerical gibberish. Instead, name your image something like this: nike-air-max-teal-gold.jpg.

Also, make sure each image has a corresponding alt tag inside the image tag:

alt tag example

Adding alt tag information will help your images get found in Google Image Search (and other image search engines).

Parting Words

Images are an often overlooked part of conversion optimization, SEO, and online business costs. Taking a good look at your image inventory can be an easy way to make some quick performance gains for your business. Hopefully, this guide will help you chip away at your lost potential business and online costs.

If you have any questions, don’t hesitate to ask in the comments below or reach out to any of the authors on Twitter.

4 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Sean Work

Sean Work is the VP of Inbound Marketing here at Crazy Egg. You can follow him on Twitter @seanvwork. You can listen to his podcast "Worketing" on YouTube or SoundCloud.

4 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

  1. abramov says:
    December 13, 2016 at 11:19 pm

    Thank you, Sean! Great Article. It’s True. Stay awesome!

    • Sean Work says:
      December 20, 2016 at 8:03 pm

      Thanks Abramov! You too 🙂

  2. Jeff Stephens says:
    December 13, 2016 at 12:45 pm

    Great Article Sean!

    I’m glad you covered the “Save for Web” option in Photoshop as that is my go-to tool for making my images as small as possible! Although I think Photoshop CC 2017 has it under Export as “legacy” now. uh oh.

    The practice of image optimization is one of those necessary tasks bloggers need to do each time they post new content. You ultimately have to train yourself to go through these steps every time as one image can kill your load times and negatively impact your visitor’s experience.

    I also liked when you mentioned right-sizing your images. What you size and post in the middle of your content will be different from what goes in a sidebar or a footer. Instead of using the image scale option within WordPress, size the image appropriately before using it and you’ll save load time as well.

    It’s also important to find the “right” number of images for your content. Even if you shrink the size, having 143 images on one page will still increase page load times. Finding the balance between augmenting your content and inundating it is a challenge many bloggers face.

    Thanks again for the post and for the ongoing resource for those working with a lot of images!

    – Jeff

    • Sean Work says:
      December 20, 2016 at 8:05 pm

      Oh good to know! Yep – I still have CS6 so that’s my go to version of PS. We’ll update the article to reflect this.

Show Me My Heatmap

Tools like @CrazyEgg & @mouseflow are a few user testing tools to make websites more awesome: hubs.ly/H01gDZZ0

HubSpot

@HubSpot