bootstrap version 3 - how to use a custom image for specific media query

I just downloaded bootstrap 3. ( not a custom version... just the standard one) And I'm using the bootstrap carousel template for a prototype.

I've added some pictures in the carousel but now I'm wondering where / how I specify different versions of the same image for each device size? For example, for large screens like desktops,I wnat to use a file called "logo_desktop.jpg" but for iphones, I want something like "logo_smallphone.jpg"

I can see in the bootstrap.css file that they have media queries there but it's not clear to me how to switch out the image depending on what device is connected.

Thanks.

Solution

There are a lot of ways to do this. I'll walk you through three of them. Also note, I usually use Bootstrap-Sass, so I'll show you how to do it with that version of the framework (LESS would be very similar).

1- Media queries aren't designed to switch between different assets like you are trying to do. You really want to use srcset, a new feature of CSS that automatically switches images based on the type of device connecting to your server (A List Apart has a great article on the concept).

srcset adds a new parameter to img tags in your HTML, and you provide the source set of imagery to the tag. The browser determines when / how to provide the assets. This gives you a big performance bump on image heavy sites because the browser only has to download one of the assets.

Your code would look something like this:

<img 
    srcset="logo_desktop.jpg  768w,
            logo_smallphone.jpg 310w"
    sizes="50vw, 100vw"
    src="logo_desktop.jpg"
    alt="My site's logo file" />

srcset is where you provide the image declarations and their pixel widths. In this example, I'm saying your desktop image is 768px wide and the mobile image is 310px wide.
sizes is how much space the image takes up on the page. In this example, I'm saying the desktop image takes up half the screen while the mobile image takes the full width of the screen.
src acts like a fallback for browsers that don't understand any of the new parameters.

2- If you want to control image substitution with media queries, it's trickier but doable. Bootstrap does give you four breakpoints to use (see the documentation for more guidance):

@screen-xs-min / @screen-xs-max
@screen-sm-min / @screen-sm-max
@screen-md-min / @screen-md-max
@screen-lg-min / @screen-lg-max

You'd have to add the images as background images and use combination media queries to get the job done. A mobile-first approach would look something like this:

.my-logo-style {
  background-image: url('images/logo_smallphone.jpg'); 

  @media (min-width: @screen-sm-min) and (orientation: landscape) {
    background-image: url('images/logo_desktop.jpg');
  }
}

3- Lastly, you could also just show/hide images with media queries which incurs loading both images for your user but would probably get the job done.

HTML:

<div class="desktop">
  <img src="logo_desktop.jpg" alt="Logo" />
</div>

<div class="mobile">
  <img src="logo_smallphone.jpg" alt="Logo" />
</div>

Sass:

.desktop { 
  @media (max-width: @screen-sm-max) {
    display: none;
  }
}

.mobile {
    @media (min-width: @screen-sm-min) {
    display: none;
  }
}