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

Hi there! Thanks for checking out my blog today. I'm a tech guy living in New York City but I love that I can reach so many via means of the web. In my blog posts and tutorial videos, you'll get many new takeaway points that you'll be able to apply. By following my blog (button below), you will be able to see my new posts in your "following" newsfeed. If you enjoyed this post also be sure and click "like". It helps me see that my content is hitting the mark!

My blog home page lists my most recent posts, so if you feel like reading more, that's the place to go next!

Click to  

close

This entry hasn't been re-blogged:

Re-Blogged By Re-Blogged At
Topic:
Real Estate Technology & Tools
Groups:
Addicted to Active Rain
Bananatude
Ask An Ambassador
Old Farts Club
Tags:
blogging
images
optimization
activerain
irfanview
ipiccy
photopea
squoosh

Spam prevention
Show All Comments
Rainmaker
3,315,015
Nina Hollander
Coldwell Banker Residential Brokerage - Charlotte, NC
Your Charlotte/Ballantyne/Waxhaw/Fort Mill 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 #1
Rainmaker
3,315,015
Nina Hollander
Coldwell Banker Residential Brokerage - Charlotte, NC
Your Charlotte/Ballantyne/Waxhaw/Fort Mill 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 #2
Rainmaker
155,773
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 #3
Ambassador
1,951,329
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 #4
Rainmaker
1,415,179
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 #5
Rainmaker
110,125
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 #6
Rainmaker
2,652,061
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 #7
Rainmaker
2,652,061
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 #8
Rainmaker
2,052,872
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 #9
Rainmaker
1,316,819
Sheri Sperry - MCNE®
Coldwell Banker Residential Brokerage - 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 #10
Ambassador
4,125,193
Jeff Dowler, CRS
eXp Realty of California - 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 #11
Ambassador
853,265
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 #12
Rainmaker
3,277,451
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 #13
Rainmaker
1,811,423
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 #14
Ambassador
482,834
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 #15
Show All Comments

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

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

Ambassador
482,834

Craig Daniels

Technology Instructor/Project Consultant
Ask me a question
*
*
*
*
Spam prevention

Additional Information