Images and resize

[cfmtravel]

Hi everybody, I have a question for you guys. I have to present the same images (images about the category) in three different size. The files are pretty small not more then 1kb each.

What is the best way of presenting the three different sizes?
Can I use the css to resize the image applying a class for each size?

Thanks

[DrDoc]

If the images are that small and all the same size, yes, you can easily just style them using CSS.

If the original size varies greatly, it may not work as well.

Also, depending on how much you resize them, quality may be adversely affected.

Having images of the exact size you need is always preferred.

[swa66]

Having images of the exact size you need is always preferred.

A few years ago I'd agree with that, but in the mean time retina displays have shown up (and will do more so i the future). That means it's smart to at least offer via a media query or other technique an image of double the size that's scaled down.

[cfmtravel]

Thanks guys,

so the images are all 35px x 23px, I'm tried with this css {max-width:15%; height:auto;} . Is there any other technique to resize the images?

There are category icons and some flags. They seem ok but I haven't thought about the retina displays.

[lucy24]

15% of what?

35x23 is awfully small to be resizing dynamically; at that scale you may not even come out with a whole number of pixels! It's also a tiny filesize-- to the point where the number of requests definitely outweighs any size considerations.

Have you looked at css sprites? This is almost certainly something you already know how to do, even if you're unfamiliar with the name. One approach would be to make each image in a few standard sizes, combine them into a sprite, and then use a class name to pick the most convenient size. You may even be able to combine all your images into a single convenient packet.

[DrDoc]

First a nitpick -- the proper term would be "High Resolution" or "Ultrahigh Resolution". Retina is a brand name and is merely one brand of recent high resolution displays.

Just so there is no confusion -- swa66 and I are saying the same thing.

It is preferred to always have images of the exact size you need. If an image does not need to exist in multiple formats, you may still need to keep different resolutions around. "Having images of the exact size you need" means adapting to your needs, and that means considering both site design and layout, as well as user settings.

I, myself, am using one of these new Ultrahigh Resolution monitors. At 3200×1800 pixels fit onto a mere 15.6" space, the resolution is stunning. That said -- an incorrectly formulated media query will blow things up, since zoom level and many other aspects need to be considered. (I'm working at 100% zoom, which means ... well, how do I put it -- I can see this whole thread without scrolling. The footer is the only part that falls below the fold.)

But, the advice still stands -- don't resize images with CSS. Create the images in the size(s) you need.