Website Optimization: Are You Sizing Images Correctly?

Gorgeous-beach via Compfight

Image by paul bica

An Internet without pretty pictures would be boring, wouldn’t it? So chances are you’re including graphics on your website to enhance the attractiveness of your pages and posts. Images add visual interest. They illustrate concepts, feelings, locations, products and services. They help keep visitors engaged with a site’s content and coming back for more. There’s a downside, though: As your website matures and the content grows, all those images add up and the bulky file sizes can significantly slow your page load speed.

Why should we optimize website images?
According to GTMetrix, a free online tool that will help keep your site load times fast, “Images hold data other than just the pixels we see on the screen. This data can add unnecessary size to the image, which leads to longer load times as the user waits for the image to download. Optimizing your images for the web means saving or compiling [them] in a web friendly format [which] can reduce your total page load size up to 80%.”

Image size issues: resolution and dimension
There are two issues involved: resolution, which is sharpness and quality of the image, such as 72 dpi vs. 300 dpi, and actual dimensions, such as 200 x 200 pixels.

  • Resolution: High definition is the future, but most of us browse the Internet with low-def devices that view images at a low-res 72 pixels. If you post a high resolution 300 pixel photograph, few have the capacity to view that sharp image quality.
  • Dimension: Websites should present graphics that are (ideally) the same height and width on the page as they appear in your website’s media library. That means if you insert an image into a post that is 200 x 200 pixels, it should be uploaded as 200 x 200 pixels. If larger, your site has to re-size it every time the page is loaded; that slows page delivery speed.

The dimension-resolution issue is particularly important when you use your own digital images. Whether it’s an iPhone selfie or a beautiful digital photograph from your trip to Italy, un-doctored digital photos are high resolution files. Crop and compress them before you upload.

Image file types
Basic web-friendly graphics file types are .png, .gif, and.jpg. Jpg delivers a larger file size because it offers the best quality. To read more about the pros, cons, and benefits, read Tips for optimizing your web images. One of the differences between these file types is lossy compression vs. lossless compression. It’s technical so I won’t address it here, but if you want to know more this post will explain it.

Tools to resize graphics
Several methods are available to optimize images, both those already on your site and new images you post going forward.

  • Offsite tools: PicMonkey and Webresizer are two free online choices that make this process easy.
  • Photoshop: If you have Photoshop, use the “save for web” function to compress the file size and reduce the dimensions. The original image in this post was 152KB; I used Photoshop to reduce it to 10KB – quite a savings! Here’s how:
    • Go to “File” > “Open” > Browse for image
    If applicable, highlight desired area with crop tool, then choose “Image” > “Crop”
    • Then choose “File” > “Save for web” > Cropped image appears
    On the right side of your screen, choose the “Image size” tab > Enter desired pixel width; height will auto-adjust.
    • IMPORTANT! Choose “Apply”
    • Choose Save > Name file
  • Dashboard method: You can edit images in your WordPress Dashboard. Choose Media Library, choose an image, choose edit, resize and save.
  • Plugins: Smush It and EWWW Image Optimizer will compress image files you upload to your website going forward. They also offer a “bulk smush” option for images already on your site.

Replace copyrighted images
While we’re discussing website images, this is a great time to review your media library and verify that you have the right to share the images on your site. In case you’re not aware, it’s copyright infringement to grab graphics from the Internet. The images you use should be Creative Commons graphics or those you’ve downloaded from a free imagery site or purchased from stock photo websites. Maria Granovsky’s guest post Copyright Basics For Authors provides details. And FYI, my most current favorite stock photo site is Inexpensive, lots of inventory, and many choices for only 1 or 2 credits.

Better late than never!
I learned about this whole issue late last year and had to play catch up by compressing all the images already on my site (and I’m still working on other elements that can slow page speed!). I’ll report that although it can be time-consuming, it’s not difficult. And don’t think you’re exempt if you have a web developer or someone who maintains your site  – it’s a still a good idea to plug your URL into GTMetrix to check.

If you’re like me and you are NOT a techie, you can still handle some aspects of the feedback GTMetrix’s site speed assessment tool provides. Image optimization is a perfect example. FYI, if you click on the “optimize images” line in your GTMetrix results, a list of photos that could benefit from being compressed will appear.

Note: Keep in mind that if your site is newer, GTMetrix may not identify your images as too large; there may not be enough of them to negatively impact your page load speed. You still need to understand optimization. Also, be aware that you can enhance SEO by adding Alt tags and photo captions that will help Google catalogue your graphics. Read about the benefits here.

And if you don’t have a website (gasp!), keep this issue in mind when you share graphics, headshots and/or book cover images for guest posts and web-based book promotions. Reduce your file sizes before you send them on!

Readers, check your website speed on GTMetrix and let us know your results. Do you need to optimize images?

Enjoy this article? Subscribe to my blog and you’ll never miss my weekly posts! Your email address will NOT be sold, shared, or rented – that’s a promise.

Image by Creative Commons License paul bica

, ,

26 Responses to Website Optimization: Are You Sizing Images Correctly?

  1. Belinda Pollard March 3, 2014 at 2:55 pm #

    Such a useful post, Molly. I was looking at a great site the other day and just one page of it was 25MB. Just. One. Page. Even though there was hardly anything but text on the page. I don’t know if it was the background image or what it was that was making it so huge.

    I used to be very rigorous about resizing my images but I’ve got a bit slack (busy) and this is a good reminder to me to Pay Attention.

    I’m going to check out that GTMetrix site you’ve recommended. I’ll be nervous while I’m checking my website on it!! Haha, what if MY page is 25 MB too????? *hides under desk*

    • Molly Greene March 3, 2014 at 3:00 pm #

      You made me laugh out loud! I’ve been using GTM to work on my site for weeks now and I refuse to reveal what my “starting” stats were – now I’m above 90 and reaching higher. Optimizing images (and I should have added these plugins are for WordPress) can make a huge difference, so it’s the place to start. Thanks, Belinda!

      • Belinda Pollard March 8, 2014 at 12:01 am #

        Well, Molly, I’ve gone to GTM and the report was BAD. *eek*

        But for today’s blog post I followed your instructions, and an image that was 538 KB came down to 20 KB. What a reduction! Thank you, Blog Coach! 🙂

        • Molly Greene March 8, 2014 at 5:00 pm #

          I’m so pleased! You know, Belinda, that the only reason I discovered this issue in the first place was because I ran head-first into the problem with my own blog. So happy to let my mistakes benefit others, lol!

  2. Diane Hughes March 3, 2014 at 3:32 pm #

    Great info! Thanks for the tips.

  3. John Chapman March 3, 2014 at 4:09 pm #

    It’s always worthwhile optimizing images but there’s a catch. Screen resolutions are growing and download speeds are increasing. What works fine on one screen may look awful on another screen. This blog for example has a 8cm white area on left and right side of the screen at my monitor’s standard resolution. With bigger images and an elastic screen layout it would fit better. Images could be re-sized to take up a percentage of the screen width, no matter what the resolution. You’re not alone though – the vast majority of websites are built for a ‘standard’ screen size of 1366 x 768 pixels. In my opinion a perfectly horrid screen. The good news is that things are changing because more and more people are viewing the Web using phones and tablets which are getting higher and higher resolutions. Web designers now have the challenge of making a website look good on a 3″ and a 27″ screen …and then there are smart TVs.

    • Molly Greene March 3, 2014 at 4:16 pm #

      John! You know too much. It’s true, website design is adapting rapidly for phone and tablet users; I think the next couple of years we’ll all be re-thinking our blogs. And download speeds are increasing – but you also have to take server housing into account. Super-high res image files take up a lot of space, and the more room you need (often) the more you’re charged by your hosting company. Another reason to optimize images for now!

      • John Chapman March 6, 2014 at 1:22 pm #

        That may have been true in the past Molly – and for some sites it’s still true. I host four websites at the moment with literally thousands of pages on one. Many of these pages have a significant graphic content. My biggest website has 16,000 files and takes up 2.25GB of web hosting space. That doesn’t matter though because my web host offers unlimited web space and I can host as many domains as I want for £5.00 ($8.40) per month. The price of large files is no bigger than the price of small files.
        What does count is download time. If your website takes longer than 20 seconds to appear people will just give up and go elsewhere. Not everyone has broadband there are many still using dial-up Internet. It’s often possible to use a low resolution image and offer a higher resolution image on clicking it.

        • John Chapman March 6, 2014 at 1:40 pm #

          As the buffer Blog puts it in the 5th commandment of ‘Landing Pages which work’ :
          Honor thy host, bandwidth, and client

          Honor thy web host, thy bandwidth, and thy client, that thy load times shalt not be excessive and the patience of thy visitor shalt not be exhausted.

          For thy visitor is Busy and Impatient, and hath not time to waste waiting for thy site to load.

          But yea, if thy page doth load quickly, thy visitor may tarry and thy bounce rate shalt surely dwindle.

        • Molly Greene March 6, 2014 at 2:00 pm #

          Thanks, John! I’d have to check to see if my hosting company charges more for websites over a certain size – I thought that was true but I may be mistaken. And I love the commandment, thanks so much for sharing it!

  4. Anne R. Allen March 3, 2014 at 4:43 pm #

    I’m such a cybermoron, I usually don’t use images at all, but I do have all those book covers in my sidebar. I’m not sure they’ve been resized. (runs to check them out….) Thanks for this post!

    • Molly Greene March 3, 2014 at 4:50 pm #

      Anne, before you go! I’m not positive blogger sites need to be concerned with image size – check out your URL on GTMetrix and see.

  5. Pamela Beason March 3, 2014 at 7:13 pm #

    Whoa! So much I didn’t know. Thanks for all the useful tips, Molly.

    Now I need to go check all my web posts!

    • Molly Greene March 4, 2014 at 9:03 am #

      Thanks, Pam. Check your GTMetrix rating and see what they suggest!

  6. Jo Ellen Roe March 3, 2014 at 7:46 pm #

    Don’t I just love this post!!! I am going to try the apps and see if they help.

    • Molly Greene March 4, 2014 at 9:04 am #

      Thanks Jo Ellen! The image-smushing plugins are a great option. Good luck!

  7. joybelle2012 March 3, 2014 at 10:09 pm #

    Thanks Molly, as usual, your notes are full of useful and interesting information.
    I have this one local SA blog, but I’d like to start another, so before I do I’ll read all the emails from you that I have stored on my laptop.
    Have a good day,

    • Molly Greene March 4, 2014 at 9:05 am #

      Thanks so much for your support and best of luck on the blogs!

  8. Heather March 4, 2014 at 5:13 am #

    Ugh. The learning curve of getting cyber savvy is overwhelming at times. Can’t I just write? No, no I can’t. I know it’s important to know these things. Better late than never, right?! Thanks for helpful post and links!

    • Molly Greene March 4, 2014 at 9:06 am #

      Hey Heather – I know, right?? Don’t be frustrated, just learn a little at a time and it’s not so overwhelming!

  9. Carol March 4, 2014 at 5:46 am #

    Here’s a tip if you have Microsoft Office.

    One Note allows you to blog directly to WordPress. You can place your images and resize directly in your document. One Note will even upload them to your library on WordPress. No cutting and pasting the file names! It’s a one step, super easy process. You can truly be a techie dunce.

    The only thing to watch for is paragraph spacing. Remove extra lines – somehow One Note over does those but you can fix it by deleting the break before you hit publish.

    I love One Note, it keeps everything so organized.

    • Molly Greene March 4, 2014 at 9:08 am #

      Thanks so much, Carol! Now I need to go learn One Note …

  10. Uber March 8, 2014 at 6:27 am #

    You need to learn more about formats. It’s a much more complicated matter than you seem to think. Try this tool to understand modern lossy image compression for the web:

    • Molly Greene March 8, 2014 at 4:57 pm #

      Gee, Uber! I wasn’t trying to dismiss anything as uncomplicated, just trying to bring the issue to my readers’ attention. Once we all understand that there IS an issue with over-large files, we can read more about it. And thanks so much for the link!

  11. joybelle2012 November 4, 2014 at 12:07 am #

    Thanks Molly, – as usual great content and lots of useful info.

    • Molly Greene November 4, 2014 at 6:48 am #

      Thank you so much, Joybelle!