Well with Wordpress it creates the different sizes for you that you set in your prefs.
Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Nov 7, 2014, at 10:21 AM, Angela French <afre...@sbctc.edu> wrote: > 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/ ______________________________________________________________________ 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/
