J'ai une image de 40px de 20px avec 72 pixels / pouce.
Je voudrais créer une version d'affichage de la rétine.
Que dois-je faire? Double la taille? Changer la résolution?
et dans quel format dois-je sauver? Png? Jpg? ...
J'utilise cette image sur un site Web ...
7 Réponses :
Vous pouvez utiliser l'option CSS Opacité.
Cela vous donnera un look transparent de votre image en fonction de la valeur que vous avez définie sur Opacité.
Essayez d'apprendre l'opacité: http://www.w3schools.com/css/csss_image_transparency.asp < / a>
Comment est-ce lié à la question OP?
@rajesh - L'affichage de la rétine a-t-il quelque chose à voir avec l'opacité?
W3schools n'est pas une bonne source ... Même la source digne de la lecture ... s'il vous plaît ne suggérez pas cela
Je ne peux pas croire pourquoi cette réponse est sur le dessus?
@Omartariq parce que vous avez onglet onglet sélectionné.
Photoshop vous donne quelques options pour redimensionner une image. Par exemple, si l'image est la taille de l'iPhone, vous pouvez augmenter la taille de l'image de 200%. Photoshop vous donne quelques options pour le rééchantillonnage de l'image. Bucubic, bilinéar etc. Cela refaire l'image à une résolution plus élevée et interpoler les pixels manquants. J'espère que cela aide.
Ma réponse est convertie votre image en svg Avez-vous illustrateur? Si oui, enregistrez votre image en tant que SVG (et avez un PNG comme retombe si vous le souhaitez). tant que vous utilisez modernzr qui peut fonctionner pour obtenir SVG convivial dans la plupart des navigateurs. Vous pouvez le voir Ici comment ça se fait:
http://toddmotto.com/ Mastering-SVG-Use-Use-Use-for-A-Retina-Web-Fallbacks-with-png-script / espère qu'il aide :)
Il s'agit d'un article vraiment intéressant montrant une belle option pour traiter avec des images élevées:
http://blog.netvlies.nl/design-interactie/retina-Revolution /
Fondamentalement, il dit que, si vous faites de l'image assez grande (largeur et hauteur), mais sauvegardez-la de manière assez faible, elle sort toujours très forte sur des écrans de rétine. Cela signifie que vous pouvez utiliser la même image sur tous les périphériques et que la taille du fichier est également très faible, ce qui est un bonus supplémentaire. Vous pouvez définir la largeur et la hauteur de l'image dans votre CSS et / ou HTML pour la définir sur les dimensions visuelles que vous désirez.
Cet article m'a éloigné et est mon approche de gestion pour traiter avec des images respectueuses de la rétine et conviviales de la bande passante. Gagner, gagner.
Dans votre éditeur d'image, double la taille de votre image à 80px par 40px.
dans votre balisage Définissez la largeur sur 40 et la hauteur à 20. p>
<img src="example.png" width="40" height="20" />
Avez-vous besoin de définir la largeur et la hauteur dans le balisage ou pouvez-vous la définir avec CSS aussi?
Une image d'affichage de rétine (ou une image d'affichage haute densité) est le double de la taille de pixels d'une image standard - son facteur d'échelle est de 2,0. Cela signifie que oui, pour votre image de pixel 40x20, vous devrez créer une version de pixels de 80x40 (qui est ensuite affichée à la densité de pixels à double pixel à l'écran). Le format peu importe que PNG et JPG fonctionneront bien (PNG ne se dégradera pas de qualité avec la compression, mais la taille du fichier sera plus grande que JPG).
Cependant, le problème avec des images d'affichage haute densité Est-ce qu'ils prennent plus de bande passante et sont inutiles pour les appareils qui ne disposent pas des écrans haute résolution ou rétine. Cela signifie que plus de données transférées sur le réseau, inconvénients utilisateurs mobiles et celles avec des capuchons de transfert de données limitées.
une solution consiste à utiliser quelque chose comme et le script recherchera également votre serveur pour @ 2x , vous pouvez donc avoir un code HTML comme celui-ci: /images/my_image@2x.jpg . Si cela existe, il le chargera et l'échangera en place sans avoir à craindre de jouer avec CSS.
Généralement à partir de cette écriture, il existe deux types d'affichages de rétine, vous devez donc créer une image pour chaque type.
Exemples de 2 × Appareils sont le MacBook Pro (publié en 2012-2019) et la plupart des iPhone depuis l'iPhone 4. Exemples de 3 ×
Les appareils sont l'iPhone 6 Plus et l'iPhone X. Cependant, l'iPhone XR est un périphérique 2 ×.
Par conséquent, pour votre cas, vous auriez besoin d'images dans 80 px ✕ 40 px et 120 px 60 px pour 2 × et 3 × dispositifs respectivement.
Les écrans de rétine ne dépendent pas du format d'image bitmap spécifique. Vous pouvez utiliser le format d'image d'origine. Pour les sites Web, vous Devriez utiliser JPG pour des photographies et PNG pour les graphiques de la ligne d'art enregistrés comme bitmaps.
vous ne devrait pas simplement agrandir aveuglément les images sinon cela créerait des résultats flous - cela ne serait pas meilleur que si vous n'incluez pas de versions haute résolution en premier lieu. Obtenez la version d'origine de la résolution d'origine des images (généralement à partir de la source de graphique vectorielle) et d'une solution d'amélioration de l'image basée sur l'apprentissage automatique telle que Une image plus grande pour" convertir "votre image en une résolution plus élevée.
Cochez cette case webdesign.Tutsplus.com/articles / Général / ...
Ce pourrait vous aider.
Avez-vous eu votre réponse?