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

CSS

Posted by Ibrahim AT
Ibrahim AT
1,963 Points

What's the most efficient way to resize images without killing the quality?

I want to resize images in my CSS, but I do not know the to go about it. I use margin:auto; and width:45% to make it smaller, but I don't think that's the best way. What do you guys think? Thanks!

2 Answers

Kevin Korte
Kevin Korte
28,149 Points

Well shrinking images down is pretty easy, you shouldn't notice any lose in quality doing so. Resizing images up creates new problems, and any way you enlarge a photo with css can/will cause it to degreade. If the image has enough resolution, it will still look good at a larger size, but at some point, every image runs out of resolution to look good.

If you really need to resize an image up, sampling the image in an application like photoshop can help, but even then, if you upsample the anything more than about 3x the native resolution seems to start breaking down.

Going back to your question's body, there really isn't a right or wrong way in CSS to downsize an image, it's just whatever works best within your sites framework or structure. The browser is going to handle it in the same way.

Christopher Parke
Christopher Parke
21,978 Points
Christopher Parke
Christopher Parke
21,978 Points

You always want to go down from higher quality, and maintain aspect ratio. Aspect ratio is the difference between width and height. So if you take a picture and make it smaller with relative values like 45% as you did, it will only look "good" when the pixels at the 45% width are still in the same aspect ratio as the original image. So as it grows and shrinks it will go between "not the right aspect ratio" to " correct aspect ratio" and back again.

The best way to make sure images look good on multiple viewports is to use multiple static files that are various sizes that maintain the aspect ratio. Then you use media queries to change the image source, and use px to align them manually at the different viewports. Then you can use containers to position the content around them relatively.

Hope that's clear.