Shopping Cart

You have no items in your shopping cart.

30 days money back

We will refund to you if you want to return a product for any reason during 30 days after purchasing it. Read More...

6-month free support included

We guarantee free and fast support during the 6-month term after purchasing a product. Read More...

BUG FREE

If you find any bugs in our product during the support term, we will fix them for free. Read More...

Swipe to the right

How to Fix Blurred Buttons and Images on Your Site

How to Fix Blurred Buttons and Images on Your Site
By July 22, 2015 713 Views No comments

Have you ever faced a problem of blurred images or buttons on desktops and smartphones? I suppose, you have.

About 10-12 years ago, a coder just cut an icon and inserted it into the necessary place on a site. Everybody was happy with such algorithm of icon integration and its quality for quite a long time.

But today, there is a great number of screens with different densities and screen resolutions. What does it mean? It means that if you want to make a button with an icon of 20x20 px, and you simply insert the PNG of this icon with size 20x20px, then it will be blurry on a Mac Book with retina display. The same concerns modern smartphones and tablets.

Thus, blurry images became a real problem.

How can you check if your icons look good on retina displays? Just zoom in your browser. If your icons are blurry, instead of a clear image you’ll see something like this:

But you need the icon that looks so:


There are a few variants how you can make your images and buttons clear on all types of devices.

A bigger image size

As one possible solution for this problem, you can load an icon of 2x bigger size then the initial icon. But it’s possible only if you have such icon.

Let’s suppose that you have one. So, how can you realize it?

Here's an example of the icon code:

.btn-remove { 
      background-image: url("../images/theme/icon-remove.png"); 
      background-size: 12px 13px; 
      background-repeat: no-repeat; 
      display: inline-block; 
      width: 12px; 
      height: 13px; 
  }

Below the icon code you should write the following :


@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) {
      .btn-remove { 
          background-image: url("../images/theme/icon-remove@2x.png"); 
      } 
  }


Thus, you tell the browser that if the pixels density is 1.5 or more times higher, you should do that thing.

It’s quite a simple solution but not an ideal one.

A better solution with the SVG format

There is another way of solving the problem of blurred images. It’s use of the SVG format. This vector format will look great on any displays except old IE versions. To match all browsers, we’ll use PNG and SVG simultaneously.

Don’t be afraid of SVG, you can generate it easily in the latest Photoshop or Avocode versions and even the Brackets editor.

Note: the initial layer with the necessary graphic should be vector.

So as icons look awesome everywhere, even in IE, upload PNG and SVG of the icon and put them in the queue:

.btn-remove {

      background-image: url("../images/theme/icon-remove.png"); 
      background-image: url("../images/theme/icon-remove.svg"); 
      background-size: 12px 13px; 
      background-repeat: no-repeat; 
      display: inline-block; 
      width: 12px; 
      height: 13px; 
  }

Having done this, the icons will be clear in all browsers:

Apr 3, 2015 4:15:16 AM

A solution for inserting icons via HTML instead of CSS

Ok, you’ve started to use SVG everywhere. But one day you can face a task to insert an image via the <IMG> tag. The problem is that it should be done as both SVG and PNG for old browser versions.

Don’t worry, there’s a solution for this:

<img class="pattern" src="img/pattern.svg" onerror="this.onerror=null; this.src='img/pattern.png'">

Thus, if you have any browser problems with the SVG format of icons, the route to the image will be changed. There you should write the PNG of the image. Modern browsers will show SVG.

We hope these little hints will help you integrate clear high quality images and buttons into pages. All the solutions are easy to realize, so you shouldn't have problems with them.

Best regards,
Anastasia Pletneva