This discussion on responsive images is making me wonder how modern CMSs that support content editors inserting an image onto a page are handling the fact that they might need to upload three images ? Any ideas?
Angela French -----Original Message----- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Crest Christopher Sent: Thursday, November 06, 2014 6:35 PM To: Tom Livingston Cc: Karl DeSaulniers; CSS-Discuss Subject: Re: [css-d] Responsive Images @media is what you recommend for changing images based on browser size, correct ? Christpher ? > Crest Christopher <mailto:crestchristop...@gmail.com> > Thursday, November 06, 2014 9:11 PM > Basically the web is becoming a billboard, if I want to design for 5K > I'd need a 5K image, from there I scale it down, or up because I'll be > designing for mobile first, then I adjust the page and graphics > accordingly for desktop. > > Christopher > > Tom Livingston <mailto:tom...@gmail.com> Thursday, November 06, 2014 > 7:41 PM > > > > That does make sense to build simpler first then go desktop after, > I just may follow this logic ! > > > Not necessarily. Most of the time I can use just three images. > Each image can span more than one breakpoint. My base > (mobile/phone) images usually get me up to my 600px breakpoint, > for example. > > Let me understand, you typically keep your images up to 600px in > size regardless if the screen size is 2K or heck even up to 4K ? I > assume you do the 2x / 3x for Retina displays ? > > > > I have used images for 2x displays. I dont worry about it for > photographs. Logos mostly. > > see picturefill.js > > http://scottjehl.github.io/picturefill/ > > > -- > > Tom Livingston | Senior Front-End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > <http://medialogic.com> > > > #663399 > Crest Christopher <mailto:crestchristop...@gmail.com> > Thursday, November 06, 2014 7:32 PM > That does make sense to build simpler first then go desktop after, I > just may follow this logic ! > > > Not necessarily. Most of the time I can use just three images. Each > image can span more than one breakpoint. My base (mobile/phone) images > usually get me up to my 600px breakpoint, for example. > > Let me understand, you typically keep your images up to 600px in size > regardless if the screen size is 2K or heck even up to 4K ? I assume > you do the 2x / 3x for Retina displays ? > > See my second reply above. I'll also add that you will be hard pressed > to get perfection in a web page compared to a psd. > > I don't understand ? > Tom Livingston <mailto:tom...@gmail.com> Thursday, November 06, 2014 > 7:17 PM > > > Sent from my iPhone > > On Nov 6, 2014, at 6:38 PM, Crest Christopher > <crestchristop...@gmail.com <mailto:crestchristop...@gmail.com>> wrote: > >> Why do you recommend building mobile first ? > > Aside from being best practice, it is much harder and requires more > code to achieve a mobile layout from a desktop first build because it > requires you to "undo" a great deal of the desktop layout. It is less > code and work to build mobile first as it is a simpler, additive > process. I can tell you from experience that desktop first is a > nightmare. > >> >> There is a pro and a con with swapping images, the pro, you can use >> bitmap images, the con, you have to have, as I mentioned earlier, >> maybe up to six different resolutions for your images. The CSS may >> be the easiest to do, the hardest will be managing your image > > Not necessarily. Most of the time I can use just three images. Each > image can span more than one breakpoint. My base (mobile/phone) images > usually get me up to my 600px breakpoint, for example. > >> >> >> If you don't go the swap images route as suggested by Tom :) You have >> to design all in vector. I ask because, unlike previous web >> development experiences, I want to export my image assets perfectly, >> focus more on markup and styles and hopefully have an end result that >> plays well on most, if not all mobile phones and tablets and last but >> not least, desktops / laptops. >> > > See my second reply above. I'll also add that you will be hard pressed > to get perfection in a web page compared to a psd. > > >>> > Crest Christopher <mailto:crestchristop...@gmail.com> > Thursday, November 06, 2014 6:38 PM > Why do you recommend building mobile first ? > > There is a pro and a con with swapping images, the pro, you can use > bitmap images, the con, you have to have, as I mentioned earlier, > maybe up to six different resolutions for your images. The CSS may be > the easiest to do, the hardest will be managing your images. > > If you don't go the swap images route as suggested by Tom :) You have > to design all in vector. I ask because, unlike previous web > development experiences, I want to export my image assets perfectly, > focus more on markup and styles and hopefully have an end result that > plays well on most, if not all mobile phones and tablets and last but > not least, desktops / laptops. > > Christopher > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] 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 [css-d@lists.css-discuss.org] 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/
