The onset of high resolution screens on handheld and desktop devices have exposed just how low resolution artwork on the web really is. The rule of thumb used to be 72 dpi for all artwork. Anything higher would be a waste of file size.

Want to get rid of that fuzzy logo on your company website? There are two popular methods to achieve a nice, crisp logo.

Scale Down

This method takes a large image and shrinks it down.

Create your logo image at double the size you want it to appear. For instance, if your logo should measure 100px x 100px in your design, export it as 200px x 200px.

Insert your image in HTML like normal: 

<img src=”your-logo.png” class=”your-logo”>

Scale your logo down using CSS. 

.your-logo {
width: 100px;
height: auto;
}

Note the “height: auto” above. If your logo is horizontal, you only need to define the width or height size. The other can be set to “auto” and it will scale proportionally.

Device Detection

This method detects the pixel ratio of the screen that called your page and displays one of two images that you have prepared. This works best when your images are displayed as background images.

Export two copies of your image: one at actual size and one at double size. Name them accordingly: 

your-logo.png
your-logo2x.png

Add the following CSS: 

.background {
 background-image: url(your-logo.png);
 background-size: 200px 300px;
 height: 300px;
 width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
 .background {
 background-image: url(your-logo@2x.png);
 }
}

Use whatever method works best for you, but whatever you do, don’t have a blurry logo on your website!