Resize image
in [CSS]
|
Prev: Newbie question
Next: Sprites for screen readers
From: shapper on 11 Feb 2010 08:38 Hello, I need to display a list of images on a page but I need to rescale them. I am planning to use CSS to rescale to 50%. Both width and height. The original width / height is 200px by 100px. What do you think? Thank You, Miguel
From: rf on 11 Feb 2010 09:03 "shapper" <mdmoura(a)gmail.com> wrote in message news:c9b90596-bc09-4713-a532-ee5eebf5c93c(a)36g2000yqu.googlegroups.com... > Hello, > > I need to display a list of images on a page but I need to rescale > them. > I am planning to use CSS to rescale to 50%. Both width and height. > > The original width / height is 200px by 100px. > > What do you think? <strong><b><i><font size=43>DON'T DO THIS</font></i><b><strong> 1) You would be downloading four times the data you need to, that is you would be making your viewers wait four times as long as necessary. 2) Browsers can (and often do) perform a lousy job of resizing images. Use your image manipulation software to build your thumbnails.
From: Andy Dingley on 11 Feb 2010 10:14 On 11 Feb, 13:38, shapper <mdmo...(a)gmail.com> wrote: > I am planning to use CSS to rescale to 50%. Both width and height. Use 50%, in the HTML, just set <img width="50%" ... > For simple power of two scaling, browser resizing isn't too bad. Also you're not rescaling by much, so the download size of the big image won't be a problem. Thirdly, they're only thumbnails and on most screens these days, that's the size of nothing. Reasons not to do this: 1. Thumbnails this small benefit from being carefully cropped, not just shrunken. Biggie! 2. Browser resizing still isn't as good as doing it carefully. Better than it was though. 3. Big big images will be slower to download than a proper thumbnail 4. Thumbs any bigger than this start to look bad when resized by browsers (esp. on phones and plamtops) 5. Scaling by varying amounts shows up the limitations of browser resizing more severely. Throwing several images, of several sizes, into this and resizing them all to be 200px wide is more likely to show this. 6. Your users will benefit from a selectable thumbnail size. 200px looks pretty small on many screens these days. Offering this as a range is more likely to show up poor browser rescaling.
From: Josiah Jenkins on 11 Feb 2010 11:15 On Thu, 11 Feb 2010 14:03:39 GMT, "rf" <rf(a)z.invalid> wrote: > >"shapper" <mdmoura(a)gmail.com> wrote in message >news:c9b90596-bc09-4713-a532-ee5eebf5c93c(a)36g2000yqu.googlegroups.com... >> Hello, >> >> I need to display a list of images on a page but I need to rescale >> them. >> I am planning to use CSS to rescale to 50%. Both width and height. >> >> The original width / height is 200px by 100px. >> >> What do you think? > ><strong><b><i><font size=43>DON'T DO THIS</font></i><b><strong> > > >1) You would be downloading four times the data you need to, that is you >would be making your viewers wait four times as long as necessary. > >2) Browsers can (and often do) perform a lousy job of resizing images. > >Use your image manipulation software to build your thumbnails. A good (FREE) thumbnail creator : http://www.fookes.com/ezthumbs/ -- http://www.ian-stewart.eu
From: jeff on 11 Feb 2010 13:25
shapper wrote: > Hello, > > I need to display a list of images on a page but I need to rescale > them. > I am planning to use CSS to rescale to 50%. Both width and height. > > The original width / height is 200px by 100px. A thumbnail 100px x 50px, does not carry a lot of detail. If you are satisfied with the results, try a few different browsers and images as they scale differently, then go for it. 50% is probably less likely to introduce jaggies than some other uneven amounts. If the existing thumbnails have been sharpened you are more likely to have undesirable results. Soft edges resize smoother. They aren't large files in todays world so I wouldn't worry to much about bandwidth. There are no hard and fast rules. Just guidelines. Alternatively just batch resize them. That really is the best solution as you control how it is resized and sharpened instead of the browser. You should be able to do this online without FTPing up and down. I believe you are using php and there are built in functions for that. What I do is upload a fullsize (the max desired) image and then resize to make my thumbs. Usually a little sharpening post resize works well. With fullsize in place you can always go back and make other sizes. Jeff > > What do you think? > > Thank You, > Miguel |