Images and media queries

Question

I'm new with responsive design and am designing a web page starting with 240px width for old phones and building up from there.

On my banner image, which is a PNG, is it best to: 1) Start with my largest image and shrink it for each media query? or 2) Start with a small banner and then display a higher resolution file for each breakpoint?

Stretching and shrinking images seems fine for vector graphics but on some gifs and other images it looks rather ugly.

So I wasn't sure if I should load one banner image that I manipulate or if I should have at least 3 images (phone, tablet, desktop sized) that I load at certain resolution trigger points.

Thanks.

Answer 1

Overall, I'd say to use media-queries to find the size of the screen and use whatever image fits best.

Example of CSS:

.banner{
    background: url('banner-1024.png') no-repeat;
    background-size: 100%;
}

@media all (max-width: 400px){
  .banner{
    background-image: url('banner-400.png');
  }
}

@media all (max-width: 900px){
  .banner{
    background-image: url('banner-900.png');
  }
}

But if you aren't expecting a lot of viewers on mobile devices, don't have the time to create the re-sized images, or just want the least amount of CSS, I've never had to much of a problem just using a large image for all devices.

If that's the case then just use the top four lines of code and you'll be good to go.

Answer 2

using at least a few images works great for me, phones (iOS, Android, Opera Mini) seems to choose whitch one to download, without requesting those for desktop, and medium-screen-devices. I started with one desktop image, performance was horrible. Then tried few smaller for each media query (with a little bit worse quality at 240px ;) ). It's way much faster.