web-dev-qa-db-fra.com

Les images d'arrière-plan redimensionnées sont floues dans le bureau Safari

Le site Web que je crée (test6.lazyfoxdesign.co.uk) est réactif et utilise beaucoup d'images pour le fond. J'utilise des images haute résolution et les réduit à l'aide de CSS pour les résolutions plus petites. Tous les navigateurs Web, à l’exception des images de bureau Safari, sont bien nettes.

J'ai joint une capture d'écran du problème. Google Chrome à gauche et Safari à droite.

enter image description here

Source: http://imgur.com/e3EmrQS
(Agrandir l'image pour voir la différence.)

Dans la capture d'écran ci-dessous (taille réelle) Chrome est en haut, Safari en bas:

enter image description here

imagessafari
4
Matthew C

J'avais le même problème et ce n'est toujours pas parfait à 100%, mais avec cette approche, j'ai pu augmenter la qualité. Je dois mentionner que nous avons redimensionné les images avec CSS (transform: scale (value)):

Peut-être que cela aide:

 filter: none; 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px); 
-ms-filter: blur(0px);
 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

Les images sont encore un peu floues dans Safari.

Source: - webkit-transform: scale/images floues /utilisateur: rcro

4
grindking

essayez de définir ces styles ..

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
2
kiran bhandare

J'ai eu le même problème et j'ai pu le résoudre en utilisant Photoshop:

  1. dupliquer l'image (pour éviter de perdre l'image originale en raison de formats avec perte tels que JPEG)

  2. image -> taille de l'image -> définir la taille en pixels (en gardant à l'esprit qu'un navigateur classique a une résolution de 100 pixels par pouce)

  3. fichier -> Enregistrer pour le Web. Ici, différents paramètres peuvent être prévisualisés. Ensuite, enregistrez et utilisez une image avec une taille de 100%.

1
FFT

J'ai rencontré le même problème, mais j'ai essayé de changer la résolution de mon "image problématique" à 100 dpi dans Photoshop. Je passe maintenant à Safari et mon flou est parti! Il semble donc que la mise à l'échelle fonctionne correctement dans Safari tant que le DPI de l'image d'origine est défini sur 100 dpi. Eureka! Un grand merci à la personne qui a dit que les navigateurs typiques ont une résolution de 100 dpi :-)

1
Matt Gourd

Toute différence sera due aux algorithmes de mise à l'échelle utilisés par les navigateurs - ce que vous ne pouvez malheureusement pas faire, à part servir l'image de taille correcte et ne pas mettre à l'échelle.

Les navigateurs ont considérablement progressé ces dernières années. Il n'y a pas si longtemps, les navigateurs ne faisaient que redimensionner les pixels et les résultats n'étaient pas très bons du tout.

Pour être honnête, je ne pense pas que votre capture d'écran soit particulièrement concluante - la photo Safari n'est qu'un IMO légèrement moins net, ce que les utilisateurs ne remarqueront probablement pas - puisqu'ils ne voient pas de comparaison côte à côte. Et les utilisateurs de Safari sont peut-être habitués aux images qui paraissent légèrement floues si elles le font avec toutes les images redimensionnées. De plus, la plupart des utilisateurs ne remarquent généralement pas les détails les plus fins - à moins que votre site ne cible d'autres concepteurs? Ce que je remarque le plus de votre capture d’écran, ce sont les artefacts JPEG, qui affectent les captures d’écran de gauche et de droite - mais c’est peut-être juste un problème avec le JPEG compressé (ou imgur)?

1
MrWhite