Welcome to WebmasterWorld Guest from 54.146.59.202

Forum Moderators: not2easy

Message Too Old, No Replies

Images and resize

     
9:54 pm on Dec 29, 2013 (gmt 0)



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
1:42 am on Dec 30, 2013 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
9:47 am on Dec 30, 2013 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
4:27 pm on Dec 30, 2013 (gmt 0)



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.
4:56 pm on Dec 30, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
1:48 am on Jan 6, 2014 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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 32001800 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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month