Image without quality - Safari

Question

Image of the logo of the site where I am developing loses quality when I open the site in Safari.

Someone’s been there and they know how to fix it?

Answer 1

It’s not Safari, it’s just macs computers most modern are using retinal screen or retinal screen, the images are a little blurred usually if used in backgrounds, two solutions are:

1. Image with double size:

   For example, suppose you want to create an image with 442px x 116px, then you create it twice the size (885px x 233px) and uses background-size to halve:

   .logo, .logo-original {
       background: url(https://i.stack.imgur.com/AXDKB.png) no-repeat;
   }
   
   .logo {
       background-size: 442px 116px;
       width: 442px;
       height: 116px;
   }
   
   .logo-original {
       width: 885px;
       height: 233px;
   }

   <div class="logo"></div>
   <hr>
   <div class="logo-original"></div>

   Use <img> can try using width="", thus:

   <img src="https://i.stack.imgur.com/AXDKB.png" width="442">

2. Use SVG:

   The SVG is a vector image, can be resized without loss of quality (although in some cases the image may seem to have a blurred effect when very small, but depends on the design):

   .logo, .logo-original {
       background: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66) no-repeat;
   }
   
   .logo {
       background-size: 442px 116px;
       width: 442px;
       height: 116px;
   }
   
   .logo-original {
       width: 885px;
       height: 233px;
   }

   <div class="logo"></div>
   <hr>
   <div class="logo-original"></div>