Konvertieren Sie Sprite-Bilder in das Retina-Display

Hallo zusammen, ich habe eine Reihe von Symbolen als Sprites für und in Retina-Displays sehen die Symbole sehr verschwommen aus. Ich habe einige Dokumente für Retina-Displays gelesen. Verwenden Sie das Bild zu 200% (mit Photoshop). Jetzt ist die Frage, wie ich das gesamte Sprite als Retina ändere unterstütztes Bild durch Speichern des gesamten Sprites als 200% ah oder durch Auswählen einer separaten Ebene und Ändern als 200%, dann Speichern als Sprite ah guide me.hier meine Sprites

So verwende ich Sprite für Retina und Normal

für normalen Bildschirm

.logo {
background:url('../images/big-icons.png');
  background-position: -241px -289px;
  width: 217px;
  height: 69px;
}

.footer-logo {
background:url('../images/big-icons.png');
  background-position: -239px -359px;
  width: 217px;
  height: 69px;
}

für Netzhaut

@media (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) { 
    .logo{
    background:url('../images/big-icons@2x.png');
    background-size: 200px 100px;
    background-position: -375px 0; width: 434px; height: 138px;
}

.footer-logo{
    background:url('../images/big-icons@2x.png');
    background-position: -375px -158px; width: 434px; height: 138px;
}

}

Die Bilder werden im Retina-Display wiederholt.. wie ich den Sprite-Stil für das Retina-Display schreibe.

Für zukünftige Überlegungen: Verwenden Sie SVGs anstelle von PNGs. SVGs sind skalierbar und verhindern, dass Sie mehrere Versionen für Retina-Bildschirme erstellen müssen.
Außerdem muss sich Ihr Sprite-Sheet auf einer Art logischem Raster befinden, wobei jedes einzelne Bild von einem unsichtbaren Kästchen gleicher Größe umgeben ist, damit es praktisch ist.

Antworten (1)

Die Unschärfe wird während der Skalierung eingeführt.

Wenn Sie zwei Bildersätze bereitstellen, arbeiten Sie an der 2x-Größe und skalieren Sie für den zweiten Satz herunter, optimieren Sie alle Teile, die nach der Skalierung Probleme aufweisen (manchmal werden Linien und Rahmen usw. zu dünn und müssen erhöht werden {etc usw.}). .

Wenn Sie einen Bildsatz bereitstellen, geben Sie den größeren Pixelabmessungssatz an. Beachten Sie jedoch, dass die Browserskalierung schlecht sein kann.

So:

(1) Das 2-fache Hochskalieren von Rasterbildern ist ein Qualitätsproblem, insbesondere zur Anzeigezeit. Rendern Sie beide Sätze selbst und bitten Sie den Browser niemals, dies zu tun.

(2) Beim Rendern auf " Retina-Geräten " ändern das Betriebssystem und die Software manchmal Ihre Einheiten , sodass das, worum Sie gebeten ( codiert ) haben , nicht berücksichtigt wird . Dies kann im Code gehandhabt werden, aber Sie müssen die Probleme im Auge behalten. Ich erinnere mich nicht an die Einzelheiten, weil ich zumindest beruflich so wenig direkte Webarbeit mache.

Eine letzte Sache: Verlassen Sie sich nicht auf simulierte Vorschauen zur Bewertung der visuellen Qualität.

BEARBEITEN

Ich erwähne „Retina-Geräte“ in Bezug auf die Nichteinhaltung von Einheitengrößen, aber das ist genauso ein Problem mit mobilen Browsern wie nur „Retina“. Der Grund, warum „Retina“-Bilder und das Datei@2x-Namensschema erforderlich sind, liegt darin, dass das Betriebssystem und der Browser auf Geräten mit diesen angeschlossenen Displays absichtlich die Zahlen ändern: Sie versuchen, die physische Anzeigegröße zu korrigieren, was angesichts der Tatsache ein sehr schwieriges Problem ist Vielzahl von Bildschirmgrößen und -fähigkeiten.

Konvertieren Sie Sprite-Bilder in das Retina-Display
AntwortenHierDatenschutz-Bestimmungen1y, 0v