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

The biggest mistake you're probably making with your blog images. Plus a free cheat sheet. Only on http://designyourownblog.com

The biggest mistake you're probably making with your blog images. Plus a free cheat sheet. Only on http://designyourownblog.com

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!

This post is part of our October AND November Monthly Topic on Blog Images. Here are the other posts in the series:
9 Ways to Create Better Blog Images
How to Create Stunning Blog Post Title Images with Resources
More on Blog Images

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.

I should let you know in full disclosure that although the links to Optimus.io in this post are not affiliate links, I was given a free 8 month license to try the upgraded HQ version. There are also some affiliate links in the post below and they are denoted by a (*). Read my full disclosure here.

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:
WebPageTest for DesignYourOwnBlog.com. Learn how to speed up your page load times by optimizing your images.

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.

WebPageTest for DesignYourOwnBlog.com. Learn how to speed up your page load times by optimizing your images.

Google Page Speed Insights

Google Page Speed Insights for DesignYourOwnBlog.com. Learn how to speed up your page load times by optimizing your images.

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.

Improve your page load time! Download this free Blog Image Performance Cheat Sheet 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:
Image Optimization: save for web in Photoshop. Learn more about optimizing your images for page speed at http://DesignYourOwnBlog.com

  • 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:

An illustration of how baseline JPEGs load on a web page. Image performance for blogs. Source: Darn Office http://darnoffice.com/always-deliver/

Source: Darn Office

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

An illustration of how progressive JPEGs load on a web page. Image performance for blogs. Source: Darn Office http://darnoffice.com/always-deliver/

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.

Editor Quality File Size (kb) Notes
Photoshop* 30 quality
60 quality
48.67
100
Pixlr 30 quality
44quality
40
49
In both, the visual results were slightly poorer than Photoshop
BeFunky 30 quality
65 quality
30
50
In both, the visual results were slightly poorer than Photoshop
PicMonkey* Roger (lowest) quality 102 That was the lowest file size I could get and it was about equal visually to 60 quality in Photoshop
Fotor Normal (lowest) quality 95 This was the lowest file size I could get and it was a bit poorer visually to 60 quality in Photoshop
Photoshop Express Editor one size 145 I don’t even recommend using this editor at all. It’s so basic that it only edits JPEGs and gives just one option to save which resulted in a 145kb file

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.

Install on Your Computer:

Mac: ImageOptim – This free software for Mac lets you easily drag and drop images into for instant compression.

When I ran a 142kb JPEG through ImageOptim, it brought the photo down to 137kb.

PC: RIOT Radical Image Optimization Tool – This free software for PC’s is pretty robust as it lets you choose optimization settings before saving. I was able to select Progressive as an option and at only 90% reduction, the image was saved at 87kb!

A word of caution: when I installed RIOT, I chose the easy set up and so it automatically installed 2 other (non-malicious) programs on my computer. I was able to remove them, but save yourself the trouble by going to the advanced option and unchecking them from the install.

WordPress Plugins:

Optimus.io – Automatically compresses any image as you upload it to your blog, plus you can optimize all images you have already uploaded either one by one or in bulk. The free version only allows images smaller than 100kb, whereas HQ (which costs $29.99/year) can handle up to 5mb.

When I ran a 142kb JPEG through Optimus.io HQ, it brought it down to 138kb without any visible loss in quality.

EWWW Image Optimizer – A free image compression plugin that automatically compresses images as they are uploaded to your blog.

This gave me the same result as Optimus.io: 142kb to 138kb.

Note: I tried a plugin called WP Smush Pro from WPMU Dev that is supposed to be quite popular, but when I tested it with the same JPEG, it didn’t reduce the file size at all.

Online:

Kraken.io – There is a free online version where you can drag and drop your images in to compress them. There is also an option for lossy compression which should reduce your file size even further, but you will definitely see a reduction of quality in the photograph.

The same 142kb image compressed down to 137kb on the lossless option and 86kb on the lossy option! The best part is, I could not tell much of a difference in the visual quality.

Note: You may have heard about something called Smush.it. Unfortunately it’s no longer being supported by Yahoo and from what it sounds like, it doesn’t even work anymore.

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: coveloping.com/tools/css-shapes-generator.

This is a CSS button, not an image:

CSS Button

Click here to view the HTML
<a class="css-button-test" href="#">CSS Button</a>
Click here to view the CSS
.css-button-test {
background: #9dfbf5;
background: -moz-linear-gradient(top, #9dfbf5 0%, #1bded1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dfbf5), color-stop(100%,#1bded1));
background: -webkit-linear-gradient(top, #9dfbf5 0%,#1bded1 100%);
background: -o-linear-gradient(top, #9dfbf5 0%,#1bded1 100%);
background: -ms-linear-gradient(top, #9dfbf5 0%,#1bded1 100%);
background: linear-gradient(to bottom, #9dfbf5 0%,#1bded1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dfbf5', endColorstr='#1bded1',GradientType=0 );
border-radius: 8px;
border: 3px solid #15b1a6;
padding: 10px;
color: #fff;
font-size: 18px;
font-weight: bold;
}

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)
    • Use Dropbox as a CDN. Apparently increases page speed quite a bit, but is also a cumbersome process.
    • Here’s a helpful post on how to use a CDN with Blogger.

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?
The biggest mistake you're probably making with your blog images. Get your free blog image performance cheat sheet from http://DesignYourOwnBlog.com

Improve your page load time! Download this free Blog Image Performance Cheat Sheet now!

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.

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

36 Comments

  • Kristie Hill says:

    I just gave a presentation at WordCamp this weekend about website speed optimization, so this was fun for me to read. I spent a good chunk of the time talking about images because they are one of the biggest things bogging blogs down. I chanted “resize and optimize” the whole time. Ha. So crucial though! Totally agree that Photoshop is the best.

    I used to agree with you about saving pictures to be 736 px 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 736 is full width for desktop, but the majority of the people use mobile devices for Pinterest anyway, and as long as your pictures are 600 px wide they’ll be full width on phones and tablet apps.

    On a completely different note, you should take a new screenshot of your webpagetest. I would cry for you if your site was loading that slow, but the test I just ran said it is loading in 4.4 seconds. Big difference. 🙂
    Kristie Hill recently posted…An easy way to brand your blog: personalize your favicon.My Profile

    • Marianne says:

      Haha thanks Kristie! I have a lot to learn still! Funny that you got a different result! I was kinda wondering about those numbers haha, but haven’t done much optimization in other aspects yet.

      I’m SO glad you mentioned that about Pinterest! That’s been a huge thing for me and I’ve been very conflicted about it myself, which is why I said you have to do what’s best for you. I think I’ll update that part now 🙂

      I wish I could have seen your presentation!

    • Pia says:

      A really insightful comment, Kristie.
      <3
      Pia
      Pia recently posted…The Most Divine – and yet simple – Paper ButterfliesMy Profile

  • Catherine says:

    Thank you so much for this! I recently launched my website and after trying for ages to find the correct “optimal” file size for my jpegs I just gave up and settled on a size that I was happy with… Now I see that the size I chose is waay to big! I’ll be working on re-sizing them in the next few weeks. I’m happy with my page load speed though — at least 2.4 seconds is lower than 3! Thanks again!

    • Marianne says:

      Hi Catherine! So glad this helped you. There is SO MUCH to learn when it comes to optimizing your website and glad this helps a little bit 🙂

  • Jo says:

    Hey Marianne,
    This is such a comprehensive, practical post, thank you so much! Dealing with all my huge images has been on the to-do list for a long time, but you’ve inspired me to get onto it today 🙂
    Jo recently posted…The Science Agrees – Life is Better with Pets!My Profile

    • Marianne says:

      Hi Jo! Oh good I’m so glad this has inspired you to make some changes! If you can’t get to all your images right now, you can at least use this for future uploads 🙂

      On another note, your Pin it button is adorable!

  • My new theme on my new website uses larger images so reading about the various ways to keep the loading time down was a timely post. I already use PhotoShop’s “save for web” but I hadn’t figured out the progressive JPEG’s. I’ll try those out.

    Thank you!
    Erika Swafford recently posted…Welcome to ErikaSwafford.com!My Profile

    • Marianne says:

      Hi Erika! You know, I learned a few things myself about the Save for Web options in PS too while researching for this post! Glad it was helpful. You have some fabulously beautiful (but large) images on your blog so yes I hope this helps a lot!

  • Vivian says:

    You’ve saved my life with this post! I’ve been doing the image thing all wrong by saving in large sizes and re-sizing to smaller. Of course, my load time is atrocious! I’m now going to fix all that.
    Vivian recently posted…Sor Juana Inés de La Cruz: Rebel Nun, Poet, Playwright & FeministMy Profile

    • Marianne says:

      Vivian, I am so glad this helped! It’s one of those things that a lot of people don’t realize is weighing down their blogs. I’d love to know what kind of scores you get after making some changes!

  • Pia says:

    Marianne

    This is such an amazingly research, written and comprehensive blog post – and SO informative.

    I am devastated that my scores were so utterly crap –
    WebPage Test . . . F A F F F X + 11.09 secs
    Google . . . .42/100

    I have been using Canva to edit/design my images and then compressing in TinyPng
    I though I was doing all the right things and now see that I have to suck it up and start again – BUT at least I now know ‘how’.

    Thanks for sharing all this knowledge – as a Mac user, discovering helpful tips and techniques can be quite challenging.

    <3
    Pia
    Pia recently posted…A Third GraveMy Profile

    • Marianne says:

      Oh Pia, I totally understand that you would be devastated by those scores! But at least now you know how to bring them back up again. Imagine you had never known what was causing your site to load slowly? 🙂 Good luck making your changes!

  • Denise says:

    Wow! You’ve got my gears turning. I have so much to learn. My web page test revealed an F in one category and a D in another. I’ll ignore the A’s for now. That’s what perfectionists do. I am loading some of your recommended plug-ins and will be more mindful when editing images using Canva, actually cropping out the portion of the image that exceeds the masked area. Bulk Optimize is optimizing as I type. You make me smarter. Thank you.
    Denise recently posted…With Thanks – Printable TagsMy Profile

    • Marianne says:

      Oh Denise you are too sweet and give me too much credit haha! But yay some A’s! That’s awesome! Less for you to work on in getting your scores up across the board. I’d love for you to come back and let me know when your scores have improved.

  • Lianne says:

    This is super, super helpful! I’ve been blogging for 10+ years, but just recently decided to launch a website to share publicly, and I’m realizing (despite my career in marketing and content creation) that there’s a lot to learn. It’s really nice to know that Design Your Own Blog can be a hub of resources I can access as I move forward in my blogging “career!” Thanks a ton!
    Lianne recently posted…How Meditation Can Improve Your Sex Life (Even if It’s Already Amazing.)My Profile

    • Marianne says:

      Oh Lianne, I am so happy to hear that and really appreciate you letting me know. You’re right, there is TONS to learn so if you’re ever looking for anything and can’t find it here on DYOB, let me know and I’ll see if I can’t fill in the gap!

  • Pauline L says:

    I didn’t think I would need this post as quickly and as desperately as I do now!

    I’ve just moved to self-hosted for the first time (and what an intense challenge that is of itself!) and I’m just setting up the blog, trying to figure out plugins and what not, and my loading time is soooo slow… Image compression is a great big RED right now, as is cache static content (whatever that means, no idea how I’m going to sort that one out) but at least I know there’s something I can do about images! So thank you very much for giving me the tools to tackle the problem!

  • Wow, this is such a detailed and awesome post! Thanks so much for sharing! 🙂

  • Hi Marianne,
    It is indeed a great joy to be here today to read one of your wonderful and informative post.
    I am here today via Anh’s page, and am glad that i found you and your page.
    It is no doubt and informative and educative post for all bloggers including the veterans in blogging industry, Though a picture/image can speak volume, but in some cases it gives its side effects too!! LOL
    You brought out those serious issues thru this post.
    I am so glad that i curated, up-voted this today on the pages of Inbound dot org and posted a comment too.:
    Yes, our blog images can do good and at the same time bad too to our pages!

    In this post the writer Marianne brings in some serious thoughts and points ans suggestions in relation to our blog images. A must read to all online writers and bloggers.
    Thanks.
    https://inbound.org/article/the-biggest-mistake-you-re-probably-making-with-your-blog-images-cheat-sheet#comments

  • Melissa says:

    Great article!! I had lots of A’s on that test…and 2 F’s. Luckily, all of my images that failed are pretty recent and easy to fix, but it brings up a question: how do we optimize images for retina displays??? I got a new MacBook for Christmas and was horrified to see my once crisp blog all blurry and sad looking. Thanks for that, new retina display. So I started saving my photos at twice the pixel width and height, uploading them, and changing the display size to my regular image size in WordPress. Which makes my new pictures look so pretty on a retina display, but apparently really huge, clunky file sizes. Any advice??

    • Marianne says:

      Hi Melissa,
      First of all, what a lovely blog you have, it’s very pretty! Second, I think your images look just fine (I’m on a 15″ Retina display). I looked at it on both the Retina and non-retina displays and there is hardly a difference (to me anyway)! 🙂 Mine don’t seem to look too different to me either.

      However, that said… there is something you can do to avoid having super large file images load for those without a retina display but it involves a little bit of work. Stupid technology! haha. Check out this post here: http://briangardner.com/optimize-images-retina-display/

      Hope that helps!

  • Doreen says:

    Hi Marianne! Optimizing images has always been challenging, not to mention time consuming for me, but I received an ‘F’ so I guess I better get my butt in gear.

    One thing I’m confused about…I have jetpack and have the ‘photon’ option enabled. Why would I have such a terrible score then? 🙁

  • Doreen says:

    Me again :). I’ve disabled the Photon option since it obviously wasn’t doing me any good. I tried to download BeFunky but even though it was downloaded it wasn’t letting me open it so I deleted it. Anywho…I downloaded imageoptim and I have a question: I edit and save photos via Lightroom (I don’t have PS). That’s a necessary part of my workflow because I shoot in RAW. So now the photos are in a folder, and if I drag a photo into imageoptim and it compresses it, then what? Is the picture then automatically compressed and magically remains in the original folder? I can’t locate an option to do anything with the compressed images in imageoptim so I’m thinking the answer has to be yes, but that would be too easy ;).

    Thanks so much!

    • Marianne says:

      Hi Doreen, sorry for the delayed response! ImageOptim does seem a little confusing but it does automatically resize the image and saves over the old one. If you look at the image info before you drag it into ImageOptim and after, you’ll see that the file size shows the reduced value afterwards. Hope that makes sense!

  • Anna says:

    Hi Marianne!
    I already knew most of all the tips you provided at this extra analytical article.
    I want your permission to add a link to this post in my photography templates in github for the users to help them out with their loading issues.
    Keep up the great work!

    • Marianne says:

      Hi Anna, thanks so much for asking and sorry about the delayed response (been busy moving!) Yes, you can most certainly link to it. I’d be happy to share your post too if you want to send me the link to your own post!

      • Anna says:

        Yes, of course I will share the post, though it is going to be a placeholder blog post for my template, so all the users can read it every time they visit and simply check or download it for their needs.
        I would also like to inform you about a minor mistake in the emails we receive after we are asked to get notified about new comments in any of your posts. The link is missing a “/” between the http://designyourownblog.com and comment-subscriptions/?xxxxxxxxxxxxxxxxxxxx. This means that when I tried to verify my subscription to this comment thread, I wasn’t able due to this missing slash. I added it manually and the subscription got confirmed. So, I suppose this is something you need to correct in your newsletter service host.
        Thank you for your permission.
        I will check back when the website template is properly credited.

  • Robin Bank says:

    Great tips! Agree with everything that you said here. I’m using paid photos from shutterstock and app.boundforstyle for my blog. So far I didn’t have any problem with my site performance.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge