Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by Jonathan Petersen
Jonathan Petersen
45,721 Points

Optimizing Images For the Web

I am currently working on a website for a local dealership, which will have a lot of images. Most of the images are lazy loaded, but I believe that I may be able to decrease page load times by optimizing the images for the web.

When I Google the topic I can find a lot of information from 2007-08, but I am assuming that best practices have changed since then. I have also searched the Treehouse library and found very little.

Does anyone have good resources for web image optimization best practices? Any pointer, suggestions, or reference material would be helpful.

Thanks everyone.

7 Answers

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

I like myths :)

So I’ll be using 72ppi in the future as well. I suggest you do the same until some smarter user of Treehouse can enlighten us both on the topic at hand.

Jonathan Petersen
Jonathan Petersen
45,721 Points

I think this will probably be the way to go. Thanks for your time.

Michael Alaev
Michael Alaev
5,415 Points
Michael Alaev
Michael Alaev
5,415 Points

I use 144ppi-240ppi (I was reading some were that this will make sure the images will look great on retina and high screens) save as maxed, then go to this awesome tool to compress my image (I think it works better then photoshop or illustrator compression engine). compressor.io

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

In Photoshop use Save for web & devices.

https://developers.google.com/speed/articles/optimizing-images

Hope this helps!

Jonathan Petersen
Jonathan Petersen
45,721 Points
Jonathan Petersen
Jonathan Petersen
45,721 Points

Thanks for the quick response, and yes it does help. Does anyone have suggestions for the best resolutions, or is this more of a trial and error sort of thing?

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

You’re welcome!

72 pixels/inch for images used in web.

Jonathan Petersen
Jonathan Petersen
45,721 Points
Jonathan Petersen
Jonathan Petersen
45,721 Points

That is what I thought, and I have been setting it to 72 ppi. Then I read a blog post here -> http://www.photoshopessentials.com/essentials/the-72-ppi-web-resolution-myth/

They give reasons why 72 should not be used, but then don't make a suggestion for what should be used instead. So now I am not sure what to use, so I posted the question to the Treehouse forum.

So 72ppi results in a smaller file size, but could I go lower, or is there something to be gained by going higher, because I have also read that I should use 144ppi.

tuukka uosukainen
tuukka uosukainen
22,107 Points
tuukka uosukainen
tuukka uosukainen
22,107 Points

Thanks for the information Michael. Need to investigate this issue further. I’ve never thought about retina and other super displays.

is Compressor.io free service?

Michael Alaev
Michael Alaev
5,415 Points
Michael Alaev
Michael Alaev
5,415 Points

Yes and its great, it will save you a lot of % on each image and without any quality drop.