Using media queries to display a high resolution logo for Retina Display users?

Question

I have the following HTML that I would like to take and use a higher resolution image for Retina Displays via CSS. I'm just not sure how to do this, or if I have to completely change my HTML as well.

<a class="navbar-brand " href="/">
    <img src="/utilities/file_library/images/logo.jpg" alt="Store">
</a>

Thank you.

Answer 1

I encountered this not long ago myself and I found this article very informative in the matter: css-techniques-for-retina-displays.

Now TLDR?

• Alternate high resolution pixels via pixel size ratio media queries.

• Most people would use plenty of icons in their site, use face fonts instead of icons.

• Use SVG images whenever you can.

Answer 2

First of all you can't change the image source with css so the logo would have to be a background image for instance. Then use media queries to ovewrite the background image src for hight dpi screens.

Here is a great article on the subject - https://css-tricks.com/snippets/css/retina-display-media-query/

However the best solution today for logos is to use vector images (.svg) in the first place that are perfect on any screen.

Answer 3

You shouldn't use a media query to do this in this way. The reason being that you will be loading to versions of the image on every page load which isn't a great idea.

Instead of doing this you could set up your logo as a background image on .navbar-brand this way you CAN use media queries in your css to change the image itself and only load one image. In this case you would have two version of the image but only one would be loaded depending on your screen size.

.navbar-brand {
  display: block;
  height: what-ever-height-px;
  width: what-ever-width-px
  background-image: '/utilities/file_library/images/logo.jpg';
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  .navbar-brand {
    background-image: '/utilities/file_library/images/logox2.jpg';
  }
}

An even better solution is to use SVG icons or an SVG sprite or making your icons into a font.