Comment faire pour convertir une image pour l'écran retina?

J'ai un 40px par 20px image à 72 Pixels /Pouce.

Je voudrais créer un affichage de la Rétine version.

Que dois-je faire? Le Double de la taille? Changer la résolution?

Et dans quel format dois-je l'enregistrer? PNG? JPG? ...

Je suis à l'aide de cette image sur un site web ...

cochez cette webdesign.tutsplus.com/articles/general/...
Ceci pourrait vous aider.
Avez-vous votre réponse?

OriginalL'auteur Miguel Moura | 2013-05-09

  1. 8

    Dans votre éditeur d'image, le double de la taille de votre image de 80px par 40px.

    Dans votre balisage définir la largeur de 40 et hauteur de 20.

    <img src="example.png" width="40" height="20" />

    Vous devez l'enregistrer au format png si vous avez besoin de transparence ou de l'image est l'art en ligne. Enregistrer les photos au format jpg.

    Avez-vous besoin de définir la largeur et la hauteur dans le balisage ou vous pouvez définir avec CSS?

    OriginalL'auteur meobyte

  2. 3

    Ma réponse est convertir votre image en SVG

    Avez-vous de l'Illustrateur? Si donc enregistrer votre image SVG (et avoir un png comme une solution de secours si vous le souhaitez). 

    <img src="images/logo.svg" alt="" />
<img src="images/logo.png" alt="" />

    Aussi longtemps que vous utilisez Modernzr qui peut travailler pour obtenir svg amical dans la plupart des navigateurs.

    Vous pouvez le voir ici comment c'est fait:
    http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

    Espère que cela aide 🙂

    OriginalL'auteur Riskbreaker

  3. 2

    Un écran retina de l'image (ou à haute densité d'affichage de l'image) est le double de la taille des pixels d'une image standard - son facteur d'échelle est de 2,0. Cela signifie que, oui, pour votre 40x20 pixel de l'image, vous aurez besoin de faire un 80x40 pixel version (qui est ensuite affichée à double densité de pixels à l'écran). Le format n'a pas d'importance, comme beaucoup, PNG et JPG fonctionne correctement (PNG ne va pas se dégrader dans la qualité de la compression, mais la taille du fichier sera plus grande que JPG).

    Cependant, le problème avec la haute densité d'affichage des images, c'est qu'ils prennent plus de bande passante, et sont inutiles pour les appareils qui ne disposent pas de la haute résolution ou les écrans de la Rétine. Cela signifie plus de données transférées sur le réseau, de pénaliser les utilisateurs mobiles et ceux qui ont peu de transfert de données casquettes.

    Une solution est d'utiliser quelque chose comme Retina.js. C'est un javascript open-source d'un script client qui charge automatiquement de la rétine, de la taille d'image à partir de votre serveur et remplacez-la en place pour la faible densité de la version, si elle existe. Il résulte d'Apple norme de nommage des images à haute résolution - @2x, de sorte que vous pouvez avoir un code HTML comme ceci:

    <img src="/images/my_image.jpg" />

    et le script va rechercher votre serveur aussi pour /images/[email protected]. Si elle existe, elle va le charger et de le remplacer sur place sans avoir à se soucier de jouer avec les CSS.

    OriginalL'auteur Aaron D

  4. 1

    Photoshop vous donne quelques options pour redimensionner une image. Par exemple, si l'image est iPhone taille, vous pouvez augmenter la taille de l'image à 200%. Photoshop vous donne quelques options pour le ré-échantillonnage de l'image. Bicubique, bilinéaire et etc. Ce remake de l'image à une résolution plus élevée et d'interpoler les pixels manquants. Espérons que cette aide.

    OriginalL'auteur Nitesh

  5. 1

    C'est un article vraiment intéressant montrant une belle option pour traiter la haute résolution des images:

    http://blog.netvlies.nl/design-interactie/retina-revolution/

    En gros, c'est dire que, si vous faites une image assez large (largeur et hauteur), mais ensuite l'enregistrer en qualité assez faible, il vient encore très forte sur les écrans de la rétine. Cela signifie que vous pouvez utiliser une seule et même image sur tous les appareils, et que la taille de fichier est très faible, trop, 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 visual dimensions que vous désirez.

    Cet article qui m'a sidéré, et mon approche pour traiter à la fois de la rétine environnement et de la bande passante de vos images. Gagner, gagner.

    OriginalL'auteur ralph.m

  6. 1

    Généralement de cette écriture, il y a deux types d'écrans de la rétine, et donc, vous devez créer une image pour chaque type.

    • Pour un 2× appareil, vous avez besoin pour produire deux fois la logique des pixels de largeur et de hauteur avec une résolution de 144 pixels par pouce (72 ppi ✕ 2).
    • Pour un 3× appareil, vous avez besoin de trois fois la logique de pixels avec une résolution de 216 pixels par pouce (72 ppi ✕ 3).

    Des exemples de 2× appareils sont sur le MacBook Pro (tous les modèles sont libérés après une année 2012) et la plupart des iPhone depuis l'iPhone 4. Des exemples de 3×
    les appareils sont l'iPhone 6 Plus, l'iPhone X. Cependant l'iPhone Xr est un 2× appareil.

    Donc pour votre cas, vous avez besoin d'images dans 80 px ✕ 40 px et 120 px x 60 px pour 2× 3× matériels, respectivement.

    Les écrans de la rétine ne sont pas dépendants sur le format d'image bitmap. Vous pouvez utiliser le format d'image d'origine. Pour les sites web, vous devrait utilisez JPG pour les photos et le format PNG pour ligne d'art graphique enregistré sous forme d'images.

    Vous ne doit pas seulement aveuglément agrandir les images sinon ce serait de créer un flou résultats serait – il pas mieux que si vous n'incluent pas toutes les versions haute résolution dans la première place. Soit obtenir l'original de la version à résolution élevée de l'images (généralement à partir d'un graphique vectoriel source) et de réduire ou d'utiliser une machine basée sur l'apprentissage d'amélioration de l'image de la solution comme Image Plus Grande à "convertir" votre image dans une résolution plus élevée.

    OriginalL'auteur adib

  7. -12

    Vous pouvez utiliser les CSS option opacité.

    Cela vous donnera un aperçu transparent de votre image en fonction de la valeur que vous définissez à l'opacité.

    Essayer d'apprendre opacité: http://www.w3schools.com/css/css_image_transparency.asp

    Comment est-ce lié à l'OP question ?
    A l'écran retina eu quelque chose à voir avec l'opacité?
    w3schools n'est pas une bonne source ... même digne de la source à lire ... merci de ne pas proposer cette
    Je ne peux pas croire pourquoi cette réponse est sur le dessus?
    Parce que vous avez plus ancienne de l'onglet sélectionné.

    OriginalL'auteur Rajesh