Swapping bg images is easy enough with media queries, however, many mobile
device browsers will download images within other mqs. There is an easy way to
stop this in most cases.
For example, my base mobile styles (because you build pages mobile-first,
right?) have a bg img. I'll use that img until I hit a breakpoint of 37em at
which point I'll swap to a larger img. As is, most browsers will download both
imgs needlessly. You can easily stop this by wrapping the base style img in an
mq like:
@media screen and ( max-width: 37em){
Background img here
}
Notice the mq is a max-width of the next breakpoint.
Can't put my finger on the article and research that shows this, but will look
later.
HTH
Sent from my iPhone
> On Nov 6, 2014, at 12:48 AM, Crest Christopher <crestchristop...@gmail.com>
> wrote:
>
> Swapping will require more page requests from the server. The other solution
> mentioned requires by default a 5K image if you go by the highest screen
> possible, just so you can scale down appropriately without blurred images.
>
> I suppose gone are the days I could find an image at 800x600 do photo magic
> to the image in Photoshop then merge it with the design.
>
> Christopher
>
>> Karl DeSaulniers <mailto:k...@designdrumm.com>
>> Thursday, November 06, 2014 12:29 AM
>> +1
>>
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>>
>>
>>
>>
>> ______________________________________________________________________
>> 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/
>> Norman Fournier <mailto:nor...@normanfournier.com>
>> Thursday, November 06, 2014 12:24 AM
>> Hello,
>>
>> No, the idea is to swap out higher resolution images for the higher
>> resolution screens so that no visitor ever has to see distorted, pixellated
>> images.
>>
>> Norman
> ______________________________________________________________________
> 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/
