The Biggest Mistake You’re Probably Making with Your Blog Images + Cheat Sheet

I’m about to get all geeky on you.

But before you hit the back button and shout “Noooo, I’m tech illiterate!” hear me out.

I’m gonna try my best to make a complicated topic, easy to understand.

Bloggers and Images are Synonymous

Images add lots of beauty and interest to our blogs and posts, right?

The downside is that images have the largest negative impact on our page load speeds.

So how can we use lots of gorgeous images without weighing down our pages too much at the same time?

If you’ve been following along with the Blog Images series, then you know how important it is to use stunning blog post title images.

So what’s a blogger to do?

We’re gonna talk about how to optimize our blog image performance, that’s what. And there’s a free cheat sheet in it for you too!

Blog Image Performance

Is blog image performance necessary?

Consider this:

1. Your users don’t want to wait more than 3 seconds for your page to load
2. Google pays attention to your website speed and ranks it accordingly

So I’d say yes, it’s very necessary.

Now there are lots of ways to optimize your site (fonts, code, etc.) but for today we’re just concentrating on images and that’s because images are the biggest offenders when it comes to page weight.

A few weeks ago my day job sent me to a web design conference in Austin, Texas called An Event Apart. This event is put on by the people that run one of the original, old-school web design blogs called A List Apart which has been around since 1997. (Were some of you even born then???)

Anyway, the conference was pretty inspiring and I learned a ton, but there was one talk in particular that really stood out to me: Designing for Performance by Lara Hogan, Senior Engineering Manager of Performance at Etsy. Now we all know how many images run on a site like Etsy, so you better believe this woman KNOWS what she’s talking about.

Lara’s talk made me realize that I have a lot to learn when it comes to performance, so I’ve been doing a little research and testing of my own and since we were talking about blog images this month, I thought it’d be a good idea to discuss blog image performance today.

If you’re truly interested in performance, I recommend reading Lara’s book Designing for Performance. You can read it free online, but if you choose to purchase it, Lara will donate 100% of the proceeds to various charities focused on getting girls and women into coding, including Girl Develop It, Women Who Code, Black Girls Code, and DonorsChoose projects like Growing “Girls with Gadgets”! and Girls Can Code, Too!. Now who here can’t get behind that!?

While the book is super comprehensive, I’ve included some important highlights here from the book, Lara’s talk and my own research.

Get ready. It’s a lot of info but it’s really important if you care about your readers.

Test Your Site First to See Where It’s At

The reason you can’t test your own site’s page speed is that you will never have the same experience as other people will on various computers, locations, and internet speeds. Your site could load just fine for you, but not fine for someone else.

So let’s do a fun test and see where your site is currently at. Plug in your blog’s URL at the sites below then wait for the results.

Web Page Test
Google Page Speed Insights

Web Page Test

Here’s my test result:

I’m not gonna pretend to even understand a quarter of what the full report says, but you can see from the big letter grades at the top right how various aspects of your site are performing. Sometimes you may have to rerun the test to get a specific grade to come up.

For now, we’ll just pay attention to the Image Compression grade where you can see that I scored an A in this department, yay me! When you click on a letter grade, it will jump down to the findings from that section where you can get more information on how to better optimize your blog.

If your blog gets a low score for images, it means you should pay more attention to the size of the images you are uploading and see if that increases your score in future tests.

At the bottom of my report, there’s a breakdown of the content on my site. Notice how images (the purple wedge) is the largest. My second largest wedge is javascript so I’ll be looking into that in the near future as well.

Google Page Speed Insights

As you can see I have a few issues with my site. But since we’re only worried about images here today, we’ll just take a look at the details of the Optimize Images section. When I open it up, it reveals two images on my site that could be way smaller.

The first image is an ad I have on my blog that I had forgotten to compress before uploading. So I downloaded the original again, then saved it for web in Photoshop* as a progressive JPEG (more on this later) and re-uploaded the image. That image went from it’s original 72kb size down to 24kb!

The second image, unfortunately is hosted by an ad network which means I have no control over it. Since it wasn’t performing that well anyway, I removed it from my site.

What happened when I reran the test? My score improved by 1% on both desktop and mobile. A small improvement yes, but that was from two tiny changes. If you’re interested in making more improvements in other areas of your blog, you can start by googling the section headings on your reports to look for ways to fix them.

Ok let’s move on…

Image Formats and Their Impact on Performance

The first step in controlling your blog image performance is to make sure you are using the correct image format for each image. These are the most common image formats used on the web today:

JPEGs are:

• Lossy
• Images with many colors
• Best for Photographs and Gradients
• Good at smooth gradients and low contrast edges
• Bad at high contrast (hard edges)

GIFs are:

• Lossless
• Images with up to 256 colors
• Best for Animations that can’t be replaced with CSS
• Terrible at vertical gradients because of the compression algorithm of GIFs. They result in much higher file sizes.

Try not to use GIFs. Instead:

• Replace GIF animations with CSS
• Replace non-animated GIFs w PNG-8’s which are much much smaller in file size

PNG-8’s are:

• Lossless
• Images with up to 256 colors
• Best for images with few colors, like vectors
• Fine with vertical gradients

PNG-24’s are:

• Lossless
• Unlimited in color palette options
• Best for images with few colors, like vectors
• Best for images that need transparency
• Never us a PNG for a photograph. The same photo saved as a PNG vs a JPEG of 75 quality can be more than 4 times the file size!

SVGs:

• Are small file sizes that compress well
• Scale perfectly for Retina screens (like iPads)
• Scale to any size without losing clarity
• Eliminate http requests so they loads faster
• Are not supported by IE8

I won’t get into SVGs today because they could warrant a whole other post and frankly this post is long enough already. But SVG’s can be saved as incredibly small files without quality loss plus they’re completely responsive. So if you’re ready to dive in, Chris Coyier from CSS-Tricks has a pretty in-depth article on SVGs here.

WebP, JPEG XR, JPEG 2000:
These are relatively new image formats that will help with compression further, but the browser and device support is still rather limited so it’s probably best to wait on these for now.

How to Save Your Images to Reduce Size without Skimping on Quality

I’m not gonna lie, the absolute BEST way to optimize your images, hands-down is by using Photoshop.* If you’re experiencing slow page loads and have a lot of images in your blog posts, the $20/month investment can be totally worth it. You can also check out GIMP which is a free, open-source variation of Photoshop, though I have never used it and can’t vouch for it.

If you literally cannot get Photoshop, don’t despair. There are still things you can do to drastically reduce the size of your files, so read on…

I read a really interesting article about how Justin Avery compressed a photo and took it from it’s original file size of 1mb down to 152kb. That’s quite the savings! Here’s what I gleaned from that article in addition to Lara’s book:

There are 3 steps (4 for JPEGs) we should take to optimize our images:

1. Always resize the image to the largest size it will appear
2. Further reduce JPEG file size with these tricks
3. Reduce quality on save
4. Run it through a lossless image compression tool

1. Always Resize the Image to the Largest Size it Will Appear on Your Blog

And NO bigger!

Images should be served at the size at which they are displayed on the page to eliminate any unnecessary overhead for your users.
– Lara Hogan

That means that all small images like logos, icons, sidebar images, etc. should be no larger than they will appear on the page. When creating a PNG with a transparent background, always crop the transparent edges off to the very edges of the image area so that you are not requiring the user to download unnecessary bytes.

The same goes for photos. DO NOT upload an image at its full size, such as 2500 x 3500, and then resize it in the settings after you’ve uploaded it to your blog! That would take forever to load and is completely unnecessary! Resize your images first using any image editor to the largest size it will appear.

Now what size is that?

Well….if we’re talking blog post title images, it’s gonna vary because of your content width. But you should keep in mind the ideal size for Pinterest images which is 735 x 1102px.

Here’s what Kristie of Blog Ambitions (who has a great post on blog image optimization) has to say about it:

“I used to agree … about saving pictures to be 736px wide to be full width for Pinterest, but after crunching the numbers and analyzing Pinterest, I don’t think it is worth it.

If your blog content section is 650 px wide, but you’re uploading a 736 x 1104 picture, that’s still 164,494 extra pixels the browser has to load before it shrinks it down to the 650.

Pinterest’s minimum width recommendation is 600 px. They don’t dock you for anything 600+. The 736px is full width for desktop, but the majority of the people use mobile devices for Pinterest anyway, and as long as your pictures are 600px wide they’ll be full width on phones and tablet apps.”

2. Further Reduce JPEG File Size: A Few Tricks

Since JPEGs are always much larger in file size than their vector counterparts, there are some tricks you can use to further reduce their size.

1. Pay attention to the background of the photo and crop it if possible so that the background that’s left has less colors and contrasts.
2. Blur the background or any unimportant parts of a photograph. The less contrast there is throughout the photo, the smaller the file size.

3. Reduce Quality on Save

Next you’ll need to compress your images before you save.

In Photoshop, never click File > Save. Always click File > Export > Save for Web (File > Save for Web in older versions). This will bring up the Save for Web dialog box where you’ll be presented with several options.

The first thing you want to do here is select the correct image format to save your image in. Reference the list above to determine which is best for the type of image you are saving. For my example below, I am saving a photograph so I’m selecting JPEG.

I always click the 4-Up tab at the top to be able to compare different settings side-by-side. Here you see the original file which is always at the top left and in this case is a whopping 1.22mb. Now notice how the different quality settings will affect the file size output:

• Top right is 10 quality (low) at 31.66kb
• Bottom left is 30 quality (medium) at 48.67kb
• Bottom right is 80 quality (very high) at 165.4kb

Even though the low file size is attractive in the 10 quality option, it really degrades the image visually. We call that fuzziness that happens around elements in the photograph “artifacting” and there is a lot of artifacting on low quality images.

On the other hand the 80 quality is much larger in file size, but it’s pretty crisp. I think that the 30 quality image is good enough and at 48.67kb, it’s not too large so that is what I would personally choose.

Progressive vs. Baseline JPEGs

When working with JPEGs, you’ll have the option to create a Progressive or Baseline (shown as Optimized) JPEG in Photoshop.

The recommended format for the web now is Progressive for two reasons: For one you’ll usually save a few bytes and that’s always a good thing.

The other reason is not because progressive JPEGs actually load faster, but because they appear to load faster. This is what’s known as perceived performance and it’s a real thing. Here’s how Ann Robson, a front-end developer, explains it:

Web-optimized photos are jpegs, and jpegs come in two flavors: baseline and progressive. A baseline jpeg is a full-resolution top-to-bottom scan of the image, and a progressive jpeg is a series of scans of increasing quality. And that’s how they render; baseline jpegs paint top to bottom (“chop chop chop…”), and progressive jpegs quickly stake out their territory and refine (or at least that’s the idea).
-Ann Robson

In other words, a baseline JPEG will load the image vertically from top to bottom in rows until the image fully loads:

Source: Darn Office

A progressive JPEG will load the entire image right away, blurry at first, then sharper as it fully loads:

Source: Darn Office

Progressive is the better choice because even though the image displayed on page load is of low quality, the user can see the entire image right away.

Interlaced GIFs and PNGs

The equivalent of Progressive images for GIFs and PNGs is Interlaced. Unfortunately there’s a major drawback to interlaced images: Interlacing increases the file size by quite a lot. When I tried to save a full size logo as a PNG-8 it increased from 19.04kb to 27.46kb when I added interlacing. That’s quite the difference and not worth it in my opinion.

Bottom line: Use Progressive JPEGs. Don’t use Interlaced PNGs or GIFs.

So What Is the Ideal File Size for an Image?

You may be wondering what the ideal file size is for images you upload to your blog and unfortunately there is no right answer. It depends on how large in height and width the images are and what type of content they contain. A solid color image with some text is going to be way smaller than a photograph of the same height and width with lots of different colors.

I generally try to keep my photos to less than 200kb whenever possible. That is probably high for some standards but that’s my current benchmark. You have to see what works for you in terms of compromising quality for performance. Because of this research, my next project is to convert all my post title image templates to non-photographic images.

Curious to see if your JPEGs are progressive or not? You can run them through this test.

No Photoshop?

If you aren’t able to use Photoshop you can still save your images at a lower file size, you just won’t have the same control or the preview pane to compare options. You also won’t be able to save your images progressively.

Here are some free image editing options you can try although note that the quality numbers don’t translate the same as they do in Photoshop.* Remember when I said earlier that I would choose the 30 quality image of the flowers in the blue jars in Photoshop at 48.67kb? Here’s what happened when I saved the same photo in the following popular online editors:

Note: all images were saved at 800 x 533px.

As you can see, not all free editors are equal and I would recommend using Pixlr or BeFunky over PicMonkey, Fotor or Photoshop Express Editor. But remember, none of these editors will save your photos as progressive JPEGs.

But don’t worry, you’ll just need to take one extra step: run it through an image optimizer or lossless image compression tool.

4. Run Images Through a Lossless Image Compression Tool

Ok before we get into the tools, let’s talk about the difference between Lossy vs. Lossless Compression. According to Wikipedia,

“Lossy compression algorithms preserve a representation of the original uncompressed image that may appear to be a perfect copy, but it is not a perfect copy. Often lossy compression is able to achieve smaller file sizes than lossless compression. Most lossy compression algorithms allow for variable compression that trades image quality for file size.

Lossless compression algorithms reduce file size while preserving a perfect copy of the original uncompressed image. Lossless compression generally, but not always, results in larger files than lossy compression.” (jump back to image types)

Huh?

Think of a RAW photo taken from a DSLR camera. RAW files are super huge in size (sometimes as large as 25mb) because these files preserve all of the file’s original data like camera settings and every single pixel. Therefore RAW files are Lossless.

A JPEG on the other hand is Lossy because some data, including the quality of pixels, will be lost in the conversion.

Lossless Image Compression Tools

These optimizers don’t degrade the quality of the images any further but remove unnecessary meta data from the image files and therefore compress them a bit further. Some of them you can install on your computer and run as needed. Or if you’re on a self-hosted WordPress blog, you have the option to install a plugin that automatically compresses your images when you upload them to your media library.

So you have plenty of options for compressing your images and which one you choose depends on your blogging platform and work flow. My results here are from one tested image, but you should also probably test out a few options with your own images as I’m sure results will vary from image to image and format to format.

Other Ways to Bring Down Page Weight

Another way to decrease page weight is by reducing the number of image requests the browser has to make to your website. What’s a browser request?

Think of it this way: When a blog page loads, the browser has to send requests to the server that hosts the blog for everything that will load onto the page: the HTML, each CSS file, each Javascript file, each font, each image, etc. The more the browser has to request to load onto the page, the longer it takes for the page to load. For this reason, we can try and reduce the amount of image requests in two ways:

• Combine images by using image sprites (best for small images like icons, your logo, etc.) I won’t be going into sprites here because you need to be comfortable with CSS to pull them off, but if you are interested, here’s a great explanation on image sprites.
• Use CSS instead of images wherever possible. Did you know that you can create shapes, gradients, drop shadows, animations, even opacity using CSS3? Buttons should always be CSS instead of images. Sidebar category buttons and headers should always be CSS and not images.Scared of CSS? Don’t worry, there are handy CSS3 generators that will help you spit out whatever code you need. Try css3generator.in or css3generator.com. A good one for creating CSS shapes: CSS Shapes and Icons Generator.

This is a CSS button, not an image:

CSS Button

<a class="css-button-test" href="#">CSS Button</a>

All of this CSS was easily created using one of the CSS3 generators, so you don’t have to figure out what it all means if you don’t want to! 😉

• Reuse images or icons whenever possible so that you get multiple uses from the same requested image. A style guide can really help with this. I listed a bunch of great resources for style guides in this post.
• Use a CDN (content delivery network) to deliver your images. Here are a couple of options for you:
  • If you have Jetpack installed on WordPress, you can activate the Photon feature which will host all future uploaded images onto WordPress’s CDN and load them much faster than if they were coming from your own host.

    The big downside to this free CDN is that it severely compresses your images and degrades the quality. I personally want to control the quality of my images myself.

  • Try CloudFlare (free and paid versions available)

Responsive Images

If you really want to take this image performance thing seriously, responsive images are worth looking into. Remember that quote from Lara earlier?

Images should be served at the size at which they are displayed on the page to eliminate any unnecessary overhead for your users.

This is true for different size devices. An image that is 700px wide on a desktop browser will only show up at about 300 – 400px wide on a smartphone. So is it smart to send a mobile users the full size image?

No, it’s not. So what do we do?

Lara says we can save “overhead for our users by being precise and telling the browser exactly which single image file is the right one to retrieve and display,” depending on the size of the viewport. There are a few ways to do this but honestly this post has gotten long enough.

If you really want to geek out on this subject, you can read Lara’s chapter on Responsive Images for tons of CSS code snippets.

Then you can install this handy Responsive Images plugin that does all the coding work for you. Gotta love WordPress right?

Let’s Review

WOW that was a lot of info wasn’t it? We talked about how to test your website, the different image types, how to save your images for optimal performance and finally a few other things you can do to help bring down your page weight.

Because we’re bloggers and many of us tend to have a lot of images, knowing how best to handle them is vital to improving our page performance. Even if you can take just a few small steps towards optimization going forward, I think you will definitely start to see improvements in your page tests. Plan to test your blog from time to time to see how things are going.

A Free Cheatsheet

Would you like a free cheatsheet you can print out or save to your desktop to reference when you create new images?

Already subscribed? Enter the VIP password here. Check your emails from me for the password or if you can’t find it, just reply to one of my emails and I’ll send it to you asap.

Now tell me: what are you going to do this week to improve your image performance?

If you liked this post, would you consider sharing it? See the handy links below the sign up form below.