Imagem da logo do site no qual estou desenvolvendo perde qualidade quando abro o site no Safari.
Alguém já passou por isso e sabe como resolver?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeImagem da logo do site no qual estou desenvolvendo perde qualidade quando abro o site no Safari.
Alguém já passou por isso e sabe como resolver?
Não é o Safari, é que computadores Macs mais modernos estão usando tela retina ou ecrã retina, as imagens ficam um pouco desfocado geralmente se usado em backgrounds, duas soluções são:
Imagem com dobro do tamanho:
Por exemplo, suponha que você quer criar uma imagem com 442px x 116px, então você cria ela com o dobro do tamanho (885px x 233px) e usa background-size
para reduzir pela metade:
.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>
Se usar <img>
pode experimentar usar width=""
, assim:
<img src="https://i.stack.imgur.com/AXDKB.png" width="442">
Usar SVG:
O SVG é uma imagem vetorial, podendo ser redimensionada sem perda de qualidade (apesar que em alguns casos a imagem pode parecer ter um efeito borrado quando muito pequena, mas depende do desenho):
.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>
<img src="image-600px_400px.png" width="300" height="200">
, claro que sendo imagens não vetoriais podem não funcionar bem, de qualquer forma se o Wordpress não permite usar SVG então não tem o que fazer infelizmente.
17/04/2017 às 19:08