Re: [css-d] Fwd: Image resize with CSS
This is now off topic if you are talking about server techniques There are lots of image resize options you have. If you send me an email directly, off list, I will help you out with this. Simon -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Phillip Cavaco Sent: 07 August 2007 20:23 To: css-d@lists.css-discuss.org Subject: [css-d] Fwd: Image resize with CSS Thanks a lot for helping. So the best thing to do isn't resizing images on the client side (CSS) but doing it on the server side I think. Right? Using something to accomplish that task. What do you suggest to do a resize on server side? I use linux and PHP. ++ On 2007/08/07 18:01 (GMT+0100) Phillip Cavaco apparently typed: As a big photography enthusiastic I care a lot about photos quality in my websites. I used to be a photographer. My sister still is professionally. http://www.horsesites.com/r/ Imagine that I have a web page with 3 photos (original sizes are: 600x400 ; 353x200 ; 450x738) for example. If I want to display them with 100px height maximum, Why 100px? You don't know what size a px is (except those right in front of your face). Here's a table showing how the size of px can vary: http://mrmazda.no-ip.com/auth/pixelsize.html The problem is that different environments have different px density displays. Here's a table of the most common densities: http://mrmazda.no-ip.com/auth/dpi.html Doing this the width will adjust proportional. But this way the image get bad dimensions sometimes. Maybe that's because the original sizes, i.e, when readjusting width and the proportional height is a float number, when rounding it will make the distortion appear. I don't know if I was clear enough. The problem is there is only so much that can be done when insufficient px are available to do the job. A 400x600 image held to only 100x150 has a mere 6.25% of the original amount available to get the job done. That's a tough order. - How do you guys deal with this situations? - Do you resize images manually to achive the best quality or is there a hat trick? There are programs that attempt to optimize images for the web. The trick is to find an acceptable balance between quality and bandwidth consumption. Too large an image size means too long a download time for low bandwidth users (still most users). Too small an image size shortchanges those with the highest quality web surfing environment (high resolution, above 1280x1024 normal aspect, or 1280x800 widescreen) by making the image too small to visually detect any purported high quality. This is a problem with no good solution in traditional technology. For the future. SVG holds promise of solution. -- It is impossible to rightly govern the world without God and the Bible.George Washington Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Image resize with CSS
this becomes a non-CSS question, so I tread lightly. I use 'ImageMagick' and its command-line interface, convert, to do on-the-fly image manipulation in conjunction with upload forms. -Bob Phillip Cavaco wrote: Thanks a lot for helping. So the best thing to do isn't resizing images on the client side (CSS) but doing it on the server side I think. Right? Using something to accomplish that task. What do you suggest to do a resize on server side? I use linux and PHP. ++ On 2007/08/07 18:01 (GMT+0100) Phillip Cavaco apparently typed: As a big photography enthusiastic I care a lot about photos quality in my websites. I used to be a photographer. My sister still is professionally. http://www.horsesites.com/r/ Imagine that I have a web page with 3 photos (original sizes are: 600x400 ; 353x200 ; 450x738) for example. If I want to display them with 100px height maximum, Why 100px? You don't know what size a px is (except those right in front of your face). Here's a table showing how the size of px can vary: http://mrmazda.no-ip.com/auth/pixelsize.html The problem is that different environments have different px density displays. Here's a table of the most common densities: http://mrmazda.no-ip.com/auth/dpi.html Doing this the width will adjust proportional. But this way the image get bad dimensions sometimes. Maybe that's because the original sizes, i.e, when readjusting width and the proportional height is a float number, when rounding it will make the distortion appear. I don't know if I was clear enough. The problem is there is only so much that can be done when insufficient px are available to do the job. A 400x600 image held to only 100x150 has a mere 6.25% of the original amount available to get the job done. That's a tough order. - How do you guys deal with this situations? - Do you resize images manually to achive the best quality or is there a hat trick? There are programs that attempt to optimize images for the web. The trick is to find an acceptable balance between quality and bandwidth consumption. Too large an image size means too long a download time for low bandwidth users (still most users). Too small an image size shortchanges those with the highest quality web surfing environment (high resolution, above 1280x1024 normal aspect, or 1280x800 widescreen) by making the image too small to visually detect any purported high quality. This is a problem with no good solution in traditional technology. For the future. SVG holds promise of solution. -- It is impossible to rightly govern the world without God and the Bible.George Washington Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
