Making raster logotypes responsive

The logotype is very important part of the website as user gets first impression from it. If you're building a responsive website, it preferable to create a vector logotype in SVG format, which can be easily scaled via CSS using media queries.

In our case the logotype is a raster image (bitmap) in PNG format. Fortunately, there is a way to use media queries on bitmap images. it's the PICTURE tag. We've used that technique to make the logotype responsive.

We've prepared separate (smaller) images for every breakpoint (media query).

In Picture tag we can declare several image sources depending on media query. Every Source tag has two attributes - "srcset" which is similar to image tag's "src attribute" and "media" - corresponding media query condition.

The browser scans media queries of Source elements and switches nested image element's "src attribute" value with "srcset" value, so as a result we have different logotype images for different devices.

<picture>
    <source srcset="http://rts.support/sites/default/files/template/logos/rts_logo_sm.png" media="screen and (max-width: 479px)">
    <source srcset="http://rts.support/sites/default/files/template/logos/rts_logo_mob.png" media="screen and (min-width: 480px) and (max-width: 767px)">
    <source srcset="http://rts.support/sites/default/files/template/logos/rts_logo_tab.png" media="screen and (min-width: 768px) and (max-width: 1023px)">
    <img src="http://rts.support/sites/default/files/template/logos/rts_logo.png" border="0">
</picture>

During the tests with real devices we detect that the logotype is blurry. It's because of pixel density, as modern devices have higher resolution DPR (device pixel ratio).

We decided to add one more "Source" element for devices which have DPR > 1, insert a large image and make it smaller with CSS.

Here is the added source element:

<source srcset="https://rts.support/sites/default/files/template/logos/rts_logo" media="screen and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 767px)">

Here is CSS with different media queries:

@media screen and (max-width: 479px){
    #logo picture img {width: 80px;height: 82px;}
}

@media screen and (min-width: 480px) and (max-width: 767px){
    #logo picture img {width: 100px;height: 103px;}
}

The result is evident in screenshots:

Type: 

Make my existing website responsive - request form

 
1 Start 2 Complete

If you don't have web development skills, just fill in the form below. Our specialists will make your website responsive.