Optimize Your Images for Website Pages - Compression

By
Education & Training with Tech Training for You!

Images are very important to help your web pages engage your audience. The combination of informative text along with appropriate photos and illustrations is the formula for a captivating post.

Some of the biggest amateur mistakes of creating web pages is related to working with images. Doing it wrong will not "break" anything, but doing it right shows your expertise. 

The ways to optimize images that you should be aware of are:
(1) file resolution/pixel size not exceeding actual page frame size
(2) file aspect ratio
(3) maximizing file type compression
(4) SEO optimization

In this post, let's talk about the first 3 ways noted above to optimize our images. To illustrate the process, let's use this image from Pixabay
(h/t to Bruno /Germany from Pixabay - While pixabay allows free use of images without attribution, it is a courtesy to give attribution when you can so the site and their generous contributors get more visibility)

In the download options, notice how the resolution and the file sizes vary. Many desktops and laptops use screens with what is known as "Full HD" resolution. This means that they are 1920 pixels wide and 1080 pixels tall. Based on that information, any image with more pixels than that is just transmitting more data over the wires than is necessary. Larger files take longer to transmit.

This translates in longer page load times. This is both a negative user experience and can result in a lesser valuation in search engine page rank scoring.

Cropping your image to a specific use case will help reduce your file size. For instance, on many blog themes in wordpress, each post will have what is known as a featured image (also known as a "hero image").  Let's say for instance that your theme has a 3:1 aspect ratio hero image (i.e. the width is 3 times more than the height). You should crop your image to match your target aspect ratio.

This has two advantages. First, your file size will be smaller (loading faster). Second, you have control over which part of your image is cropped out. Because if you don't crop it, the theme will crop it and will quite likely chop off a part that you wanted to keep.

You can use your favorite editing app to do photo cropping. Some of my favorite free choices are iPiccy.com (web app) or photopea.com (web app) or Irfanview (windows desktop app). 

Another instance that cropping can be useful is when you want a square image. This shape works well for images in the main body of a blog post where you want to wrap the text around the image.

 

After you have your image cropped to the shape (aspect ratio) that you want, the next thing you should do is resize the image to match the size of frame on the web where it is to be used. In my blog post "Resize a Photo", I walk you through the specific steps if you want some assistance with that.

Let's consider a couple of cases. If you are doing a hero (featured) image that spans edge to edge of the width of the window. The max width you should consider is 1920 pixels as noted above. That means if a photo from your 12 megapixel camera is 4000 pixels wide, that 4000 should be reduced down to 1920 pixels. Another example, a square crop image in the body of your blog post. If you want the square to be half the width of the text area, that would be a 350 pixel wide square if your blog text area is 700 pixels wide (that's the width here in ActiveRain).

Once you save your file as a JPG, there is one more step easily overlooked and that is how to maximize the compression of your file to make it as small as possible. We now have tools available that go beyond the basic compression to eke out as much as possible in our size reduction. Two sites that I have used and can recommend are tinyJPG.com and squoosh.app (from GoogleChromeLabs).

TinyJPG site is quick and easy to use and will shave off file size nicely without any user intervention in the settings. Squoosh.app site however will take it to another level because it puts you in control. Because every image is different, by putting you in control of the 'quality' slider setting, you can instantly visualize how your adjustment is both reducing file size and altering the appearance of the image. You can usually move the quality slider down quite a ways before your eye will even be able to discern that anything has changed. So that's the trick, find the sweet spot where you can reduce the file size down to and still have a quality looking image. In the illustration below, note how this works. By moving the blue bar in the middle of the image you are able to visually compare the original image (left) to the compressed version (right). For full width images at 1920px, it is a good target to aim for 150KB-200KB max. More complex photos will be the higher amount, but lesser complex photos can easily hit 100KB-150KB and that is great!

 

 

Now let's compare the two images visually. (Because the image is wider than I can show in this blog post, I took a vertical slice to illustrate.) Below on the left is the higher quality original where the file size was 373 kB. On the right below, is the more compressed copy that is 57% smaller in file size at 162 kB. If you look very closely at the detail, you can see minor differences. But that is the point, you have to look very hard to even perceive it. The file size advantage outweighs the minor loss of detail.

 

Once you have an understanding of the various ways to optimize images, these couple of extra steps only take a few more minutes of your time but the result that you are producing has the mark of more professionalism. Your pages will load faster, your readers will have a better experience of non-laggy page loads and the search engines will be more pleased with your site as well! By understanding crop optimization, you will have more control over your pages and the images will not appear sloppy or haphazard but well thought out and complimentary to your textual content.

Posted by

Craig Daniels
This blog is all about technology and helping you to use it smarter! Your digital footprint is your chance to attract new clients. What kind of impression are you making via your website, blog, and social media? We’ll be talking about that! Are you as productive as you can be? What apps might help you out? Do you know how to use all the best tools inside the apps? I enjoy photography and videography, you can expect to see those topics also on this blog.
Are you ready to learn?
Welcome to Craig’s Classroom!

Don’t forget to subscribe! 
PS - get ready for some homework… :) 

Comments (17)

Nina Hollander, Broker
Coldwell Banker Realty - Charlotte, NC
Your Greater Charlotte Realtor

What a great post, Craig, with so much useful information. I've bookmarked to go back to some of the recommended sites.

Jan 15, 2020 05:41 AM
Craig Daniels

glad you liked Nina, thanks!

Jan 15, 2020 04:29 PM
Nina Hollander, Broker
Coldwell Banker Realty - Charlotte, NC
Your Greater Charlotte Realtor

Carol Williams good morning, Carol... my recommendation for your Second Chance Saturday post. Great information for so many.

Jan 15, 2020 05:41 AM
Raymond Henson, SRES, GRI
eXp Realty of California, Inc. (lic. #01878277) - Elk Grove, CA
Realtor

Very interesting post.  I have a lot to learn, for sure!  Thank you.

Jan 15, 2020 07:28 AM
Craig Daniels

one step at a time gets you there, thanks Raymond :)

Jan 15, 2020 04:30 PM
Debb Janes EcoBroker and Bernie Stea JD
ViewHomes of Clark County - Nature As Neighbors - Camas, WA
REALTORS® in Clark County, WA

Wow, a lot of great information here again, Craig. I do resize to the 700 width, but I'm guessing there is more here for me to digest. I will be back. 

Jan 15, 2020 07:31 AM
Craig Daniels

coming down to 700px helps in a big way. The second level of compression helps especially on those big featured images that we put on our websites. thanks Debb :)

Jan 15, 2020 04:31 PM
Carol Williams
Although I'm retired, I love sharing my knowledge and learning from other real estate industry professionals. - Wenatchee, WA
Retired Agent / Broker / Property Manager

Good morning Craig. 
You are so generous with your knowledge and we could, literally, Feature every one of your posts!  Slow page loads are a kiss of death when I'm reading posts.  Thank you, thank you, thank you.

Jan 15, 2020 07:36 AM
Craig Daniels

hi Carol, yes, when you see the page crawling forward on the load you can see right away what happened! thanks for your kind words :)

Jan 15, 2020 04:32 PM
Dario Ferreira
Attleboro, MA
Internet Marketing

Great information.

Thanks for posting about squoosh.app - very nice.
Wasn't familiar with that one.

Jan 15, 2020 01:31 PM
Craig Daniels

hi Dario, that came out fairly recently and I've been putting it to good use! thanks

Jan 15, 2020 04:32 PM
Myrl Jeffcoat
GreatWest Realty - Sacramento, CA
Greater Sacramento Real Estate Agent

This is very valuable information you are sharing, Craig.  And, it answered a couple questions I had about compression and optimization.

Jan 15, 2020 04:20 PM
Craig Daniels

I'm glad to hear that, thanks Myrl!

Jan 15, 2020 04:33 PM
Myrl Jeffcoat
GreatWest Realty - Sacramento, CA
Greater Sacramento Real Estate Agent

CONGRATULATIONS Craig, on having this blog FEATURED in the Old Farts Club group!  

Jan 15, 2020 04:20 PM
Grant Schneider
Performance Development Strategies - Armonk, NY
Your Coach Helping You Create Successful Outcomes

Good morning Craig Daniels -  so many bad images out there and people do not know how to fix them.  You have a great tutorial here.

Jan 18, 2020 06:59 AM
Craig Daniels

thanks Grant

Jan 19, 2020 05:48 AM
Sheri Sperry - MCNE®
Coldwell Banker Realty - Sedona, AZ
(928) 274-7355 ~ YOUR Solutions REALTOR®

Hi Craig Daniels,

My husband does all my photography and uses raw images and adjusts them as needed. MLS - about 1200px wide and blogs - 700px wide.  

Like you said, generally, you can't tell the difference until you zoom in. That is when it can be a noticeable difference. Having a master copy in raw format is very important and knowing how the image is going to be used is also important. 

Jan 18, 2020 08:22 AM
Craig Daniels

hi Sheri - glad to hear you have a good system going there. You are creating optimized images per each need AND you can always go back to the originals whenever you need to

Jan 19, 2020 05:49 AM
Jeff Dowler, CRS
eXp Realty of California, Inc. - Carlsbad, CA
The Southern California Relocation Dude

Thanks for this useful tutorial, Craig. Seems I could do more with my images than I am curently doing. I'll have to review this again.

Jeff

Jan 18, 2020 04:30 PM
Craig Daniels

small things here and there add up when we implement, thanks Jeff!

Jan 19, 2020 05:50 AM
Mimi Foster
Falcon Property Solutions - Colorado Springs, CO
Voted Colorado Springs Best Realtor

What great information, Craig. Thank you for all your hard work. I tried your suggestions and I did it! Yay! Love working with you!

Jan 18, 2020 10:08 PM
Craig Daniels

smiling at your success... ditto that!

Jan 19, 2020 05:51 AM
Endre Barath, Jr.
Berkshire Hathaway HomeServices - Beverly Hills, CA
Realtor - Los Angeles Home Sales 310.486.1002

Craig you need to teach us rocks how to swim more often:)with that said I need to revisit those darn pictures:)Endre

Jan 20, 2020 09:05 PM
Craig Daniels

thanks Endre, fun to see swimming rocks :)

Jan 31, 2020 09:21 AM
Ginny Gorman
RI Real Estate Services ~ 401-529-7849~ RI Waterfront Real Estate - North Kingstown, RI
Homes for Sale in Southern RI and beyond

Hi Craig!  A near and dear post to heed...I had been told in a guru class on WP that 50KB was the maximum you should have for your pics in Wordpress sites...do you think that still holds?  Always appreciate your posts.

Jan 31, 2020 04:39 AM
Craig Daniels
Tech Training for You! - Staten Island, NY
Technology Instructor/Project Consultant

hi Ginny Gorman !
If you are placing images inside the main content area of a post or page, then the 50KB target is a good one. However, modern site themes often have a really big featured image (like full screen width size). It is really hard to hit 50K for these and still have them look non-fuzzy. I try and aim for 150K ballpark whenever possible for the larger featured images. 

Jan 31, 2020 09:20 AM
Ginny Gorman

thanks Craig...hope the family is doing well.

Jan 31, 2020 01:32 PM
Thom Abbott
MyMidtownMojo.com |770.713.1505 | Intown Atlanta GA Condo Living - Atlanta, GA
Midtown Atlanta GA Condos For Sale

Have always been soooo impressed with your knowledge about all this tech stuff! I can ALWAYS learn something somewhere about something. So to keep on top of all this takes real skill!

Mar 24, 2020 12:59 PM
Thomas J. Nelson, REALTOR ® e-Pro CRS RCS-D Vets
Big Block Realty 858.232.8722 - La Jolla, CA
& Host of Postcards From Success Podcast

I need to start doing this, my website pages load slow where my photos are not optimized. Thanks for the links too!

Jun 18, 2020 10:28 PM
Jerry Lucas
ABC Legal Docs LLC - Colorado Springs, CO
Mobile Notary Colorado Springs, CO Notary Training

On my WordPress blog, I use 320-pixel width for images.  That is for quick loading for all users, including small-screen smartphones.

I use the free Smush plugin to compress images.

On AR today, I saw people are still loading 2 MB high-resolution large-sized photos at the top of their blog posts, clueless on this topic.

Maybe AR should flag large-sized images to warn the blogger.

Google will be penalizing the SEO for web pages that are too slow to load. It creates a bad User Experience (UX), wasting time waiting for a page to load.

Jul 23, 2020 01:28 PM
Craig Daniels

hi Jerry - I'm glad you have a good procedure for working with images. It's not hard once you realize the difference and that's why I keep reminding whenever I get the chance :)

Jul 24, 2020 06:35 AM

What's the reason you're reporting this blog entry?

Are you sure you want to report this blog entry as spam?