Resize image
in [CSS]
|
Prev: Newbie question
Next: Sprites for screen readers
From: Jonathan N. Little on 12 Feb 2010 13:17 Stan Brown wrote: > Thu, 11 Feb 2010 13:25:43 -0500 from jeff<jeff_thies(a)att.net>: >> A thumbnail 100px x 50px, does not carry a lot of detail. >> >> There are no hard and fast rules. Just guidelines. > > One "rookie mistake" is resizing the whole picture. Often it is much > better to crop it first,then resize only the interesting part to make > the thumbnail. > > Extremely easy to do in Irfanview: mouse, Ctrl-Y, Ctrl-R, select > size, S (for Save As). ^ * Note *: Depending on the reduction you may want to add Shift-S before S for "sharpen" filter. -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: Stan Brown on 13 Feb 2010 07:13 Fri, 12 Feb 2010 13:17:00 -0500 from Jonathan N. Little <lws4art(a)gmail.com>: > Stan Brown wrote: > > Thu, 11 Feb 2010 13:25:43 -0500 from jeff<jeff_thies(a)att.net>: > >> A thumbnail 100px x 50px, does not carry a lot of detail. > >> > >> There are no hard and fast rules. Just guidelines. > > > > One "rookie mistake" is resizing the whole picture. Often it is much > > better to crop it first,then resize only the interesting part to make > > the thumbnail. > > > > Extremely easy to do in Irfanview: mouse, Ctrl-Y, Ctrl-R, select > > size, S (for Save As). > ^ > * > > Note *: Depending on the reduction you may want to add Shift-S before S > for "sharpen" filter. A good thought; thanks! I don't have occasion to make thumbnails for my public Web sites, but I do for an internal one. -- Stan Brown, Oak Road Systems, Tompkins County, New York, USA http://OakRoadSystems.com/ HTML 4.01 spec: http://www.w3.org/TR/html401/ validator: http://validator.w3.org/ CSS 2.1 spec: http://www.w3.org/TR/CSS21/ validator: http://jigsaw.w3.org/css-validator/ Why We Won't Help You: http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you
From: Jonathan N. Little on 13 Feb 2010 07:39 Stan Brown wrote: > Fri, 12 Feb 2010 13:17:00 -0500 from Jonathan N. Little > <lws4art(a)gmail.com>: > I don't have occasion to make thumbnails for my public Web sites, but > I do for an internal one. IrfanView also has a batch process that will create an HTML thumbnail=>image webpage. Not the best HTML but you can edit the template to modernize the code. When viewing one image in the folder press T to open the thumbnail viewer, select thumbnails of images that you wish for your web page and from menu "File > Save selected thumbs as HTML file..." -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: Stan Brown on 14 Feb 2010 10:07 Sat, 13 Feb 2010 07:39:53 -0500 from Jonathan N. Little <lws4art(a)gmail.com>: > > Stan Brown wrote: > > Fri, 12 Feb 2010 13:17:00 -0500 from Jonathan N. Little > > <lws4art(a)gmail.com>: > > > I don't have occasion to make thumbnails for my public Web sites, but > > I do for an internal one. > > IrfanView also has a batch process that will create an HTML > thumbnail=>image webpage. Not the best HTML but you can edit the > template to modernize the code. > > When viewing one image in the folder press T to open the thumbnail > viewer, select thumbnails of images that you wish for your web page and > from menu "File > Save selected thumbs as HTML file..." Yes, I'm aware of that but it's easier to do it myself because the arrangement is important. -- Stan Brown, Oak Road Systems, Tompkins County, New York, USA http://OakRoadSystems.com/ HTML 4.01 spec: http://www.w3.org/TR/html401/ validator: http://validator.w3.org/ CSS 2.1 spec: http://www.w3.org/TR/CSS21/ validator: http://jigsaw.w3.org/css-validator/ Why We Won't Help You: http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you
From: Thomas 'PointedEars' Lahn on 25 Feb 2010 14:42
shapper wrote: > 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? I think it is generally a bad idea, although assuming from the dimensions of the image your image resource is probably not that large. However, once you got used to doing this, because it appears to work in your favorite browser, you will have become accustomed to working against one important purpose of thumbnails, which is to provide smaller versions of an image by amount of data to be transferred while preserving display quality (so that the user can have a fair idea what the original image would look like). I have often seen this phenomenon with Web documents created by beginners on the Mac, because Mac OS and WebKit quite naturally have the better graphics filters built-in (let's face it, the Mac is primarily about cool design, hence its users are more often graphics designers than not), while on Windows one more often than not needs to have additional software (e.g. MS PowerPoint from Office) to provide them (e.g. JPEG filters), and on Unixes if present they might be not available in a browser (except, perhaps on SGI machines) or if available, sadly they are often of inferior quality. (I am primarily using Linux, so you cannot call me biased in favor of another OS or platform.) You should also consider users with user agents that do not support CSS or have certain aspects of it (or the corresponding HTML format attributes) overridden by user stylesheets. This applies to both download size and display (perhaps an old lady in Leicester would use a preset user stylesheet with `img { width: auto !important; }' in it because she could not see it properly otherwise?) Therefore, you should crop and scale down such thumbnails locally manually (there are even applications that can automate that task for you, e.g. most notably on Windows, Photoshop -- so I have heard -- and IrfanView -- so I did before), or do it server-side (e.g., with GDlib, ImageMagick or Netpbm -- they can also be used locally) on the fly (perhaps cached if you can). The server-side approach gives you greater flexibility (e.g., for an image gallery where the user can choose the size of thumbnails), and in any case not only will the thumbnails load faster, but the overall thumbnail quality will also be a lot better then, both which benefit your visitors, and (in turn) yourself. HTH PointedEars |