Now that we've got a specific issue to deal with, I would like to clarify what I believe Ed was getting at: resizing images with CSS is easy, resizing on the back-end opens an abyss of practical scalability (no pun intended) nightmares. JPEG compression can deal with photos very well, and resizing is not visually problematic [1] with the right technique.
Scaling images allow fantastic responsive web designs (a technique which makes use of elastic [fraction-based] widths and CSS media queries to offer different layout styles to different-sized viewports) [2]. Their is a valid argument in the notion that images with a resolution higher than the end-user's necessities adds unnecessary bytes to the HTTP response: however, taking modern compression as granted, the real challenge with quick sites is in latency, which is to say the delay between HTTP request and response: and any technique that creates different resources for different sizes will A) hit on that or B) provide an image which is still not perfectly sized to accommodate the users' viewport-specific layout unless you are dealing with a fixed-pixel-width design. By and wide I would say image resizing is not a problem. Setting only one dimension (ie if the image is to occupy the full width of its parent, set width:100% and leave its height as the default 'auto' will achieve the effect. [1] IE used to offer awful resizing by default: you can counter this by specifying bicubic reds point as a MS filter — see the highlighted section at https://github.com/h5bp/html5-boilerplate/blob/master/css/style.css#l111-116 [2] The term was coined by Ethan Marcotte: http://m.alistapart.com/articles/responsive-web-design/ ; for a fantastic example of the theory in practice, see the recently relaunched http://bostonglobe.com/ Regards, Barney Carroll (+44) 742 9177 278 On 7 Nov 2011, at 15:34, [email protected] wrote: > Basically don't resize images it is a waste of bandwidth just download the > image once in the right size for your design and be done with it > > ------Mensaje original------ > De: John > Remitente: [email protected] > Para: CSS-Discuss > Asunto: [css-d] the realities of moving and resizing images > Enviado: 7 de nov, 2011 10:10 > > Would anyone care to weigh in on what they've learned in terms of > moving/resizing images within a css markup? > > Is one of the key things to keep in mind the size of the parent in relation > to the size(s) of images inside it? dumb question yeah, but if you're going > to move/resize images I'm curious the best way to view and attack the problem. > > Maybe you just put them where you need to put them, then adjust values in the > affected styles as needed to accomodate and ensure that the layout integrity > is preserved? > > thank you in advance for any experience you can share. > > John > ______________________________________________________________________ > css-discuss [[email protected]] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > ______________________________________________________________________ > css-discuss [[email protected]] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
