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

General Discussion

Posted by Nathan Jackson
Nathan Jackson
8,360 Points

Image optimisation formats (Foundation - Interchange)

So I am currently working on my design-portfolio site which I have built using Foundations frame-work. I have also used the Interchange plug-in to dynamically change the content to fit the device. My question/s is how many ways should I save out my images?

I understand that I should have standard resolution and 2x resolution for retina displays, so is this enough? Or should I also include optimisations for other devices such as common mobile dimensions, and is there a downsize to doing so?

Any advice would be great, thanks!

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

I personally do not go beyond having a 2x resolution version for retina displays.

My reasoning for this is if I use srcset or media queries to swap in and out different pictures of different resolution, if for example a mobile browsers vertical height and width change (say for example rotating the phone) or say for example someone changes the size of their browser window in their web browser, it is going to reload images each time to match the dimensions of the device.

I think it is better to just scale one image and have a version for retina displays.

Something you could do to improve bandwith would be to enable Gzip compression on your webserver (if it is compatible) this has a dramatic effect on reducing download times of all assets.