Image without quality - Safari

Navigation
0

Image of the website logo I'm developing loses quality when I open the site in Safari.

Has anyone ever had this and knows how to solve it?

    
asked by anonymous 17.04.2017 / 20:14

1 answer

1

It's not Safari, it's newer Macs computers are using #, the images get a bit blurry usually if used in backgrounds , two solutions are:

  • Double size image:

    For example, suppose you want to create an image with 442px x 116px , so you create it twice as large ( 885px x 233px ) and use background-size to reduce by half: 

    .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>

    If you use <img> you can try using width="" , like this: 

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

  • Use SVG:

    SVG is a vector image , which 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 drawing): 

    .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>
    • 17.04.2017 / 20:50
    Ubuntu Terminal access a website every day Returning MySql Table Fields