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

HTML How to Make a Website Adding Pages to a Website Make an About Page

Would resizing images within CSS affect page load performance?

In one of the objectives in this course, specifically the about page exercise: We are instructed to select an image via an assigned .profile-photo class and use the max-width property to resize the image to a smaller size.

I remember reading somewhere online that for every image that is being sent at a size that is above what is needed, a tiny bit of delay is added to the end user experience. I understand that this example is for learning purposes, but for websites with large number of supporting assets, the benefit of convenient resizing within the code may be outweigh by the cost of sending larger-than-required image file sizes.

Is this something one should pay attention to when in a deployment phase of a site design process, or is it not that big of an issue.

Thank you for your time, Taki

1 Answer

lee F
lee F
1,564 Points

A site that goes live shouldn't have a bigger than needed image, say you have an image that is 2000px x 2000px but on the site it is only needed 500x500 the page will still load the full image first then focus on resizing the image so if the image is the exact needed size, loading will obviously be faster.