it-swarm.com.de

Automatische Retina-Bilder für Websites

Wenn Sie mit dem neuen Apple MacBook Pro mit Retina-Display ein "Standard" -Bild auf Ihrer Website bereitstellen, wird es etwas unscharf. Sie müssen also ein Retina-Bild bereitstellen.

Gibt es eine Möglichkeit, automatisch zu @2x - Bildern zu wechseln, wie dies bei iOS (mit Objective-C) der Fall ist? Was ich gefunden habe, ist: CSS für hochauflösende Bilder auf Mobil- und Retina-Displays , aber ich wünschte, ich könnte einen automatischen Prozess für alle meine Bilder finden, ohne CSS oder JavaScript .

Ist es möglich?

[~ # ~] Update [~ # ~]
Ich möchte diesen interessanten Artikel hervorheben, der von @ Paul D. Waite vorgeschlagen wurde und eine interessante Diskussion darüber verknüpft von Sebastian .

98
jan267

Es gibt ein neues Attribut für das img-Tag, mit dem Sie ein src-Attribut für die Netzhaut hinzufügen können, nämlich srcset. Kein Javascript oder CSS erforderlich, kein doppeltes Laden von Bildern.

<img src="low-res.jpg" srcset="high-res.jpg 2x">

Browser-Unterstützung: http://caniuse.com/#search=srcset

Andere Ressourcen:

134
mtaube

Es gibt verschiedene Lösungen mit jeweils eigenen Vor- und Nachteilen. Welche für Sie am besten geeignet ist, hängt von verschiedenen Faktoren ab, z. B. wie Ihre Website gestaltet ist, welche Art von Technologie Ihre typischen Besucher verwenden usw. Beachten Sie, dass Retina-Displays nicht nur auf das Macbook Pro Retina und die kommenden iMacs beschränkt sind, sondern auch mobile Geräte, die ihre eigenen Bedürfnisse haben können.

Das Problem hängt auch eng mit Bildern in ansprechenden Designs im Allgemeinen zusammen. In der Tat ist es wahrscheinlich am besten, generische reaktionsschnelle Entwurfstechniken zu verwenden, anstatt für bestimmte Geräte zu entwerfen. Schließlich wird sich die Technologie auch in Zukunft ständig ändern.

Einige der Lösungen/Diskussionen, die ich notiert habe:

  • Vektoren, wo immer möglich, einschließlich CSS-Techniken (Verläufe, abgerundete Ecken usw.), SVG- und Symbolschriften.
  • Bereitstellen von Bildern mit hoher Auflösung ("Retina"), aber stärkere Komprimierung (JPEG-Qualität), wie von Yoav Weiss vorgeschlagen, oder lassen Sie die Mobilfunknetze sie komprimieren, wenn sie wirklich benötigt werden (dh wenn sie mobil sind), wie von Paul Boag vorgeschlagen.
  • Adaptive Images, eine (meistens) serverseitige Lösung. Es basiert auf einem Cookie, in dem die Bildschirmauflösung gespeichert ist, einem Webserver, der für die Bereitstellung von Bildern aus einem PHP= Skript konfiguriert ist, und einem benannten Skript, mit dem das Cookie gelesen und das entsprechende Bild bereitgestellt wird.
  • Eine Reihe von Möglichkeiten Gut beschrieben und diskutiert in Smashing Magazine .
  • Nur etwas höhere Auflösungen, um die Retina-Darstellung ein wenig zu glätten, wie in einem Video von Paul Boag vorgeschlagen.
  • Die @ 1.5x-Technik on Eine List Apart ist im Grunde die gleiche Idee.
  • In naher Zukunft wird die <picture> tag wird möglicherweise eine Lösung, die von einer W3C-Arbeitsgruppe und sogar von Apple unterstützt wird.
  • A JavaScript-Technik vorgeschlagen von Jake Archebald .
  • Eine ausführliche Diskussion verschiedener Techniken zu Smashing Magazine und dem Problem im Allgemeinen.

Wie die anderen Antworten zeigen, gibt es noch mehr Techniken - aber wahrscheinlich noch keine Best Practice.

Ich frage mich, wie man einige dieser Techniken testet und debuggt, ohne die entsprechenden Geräte zur Verfügung zu haben ...

14
bhell

Hier ist die geringere Mischung, die ich verwende, um dies für Hintergrundbilder zu erreichen. retina.js funktioniert nicht für Hintergrundbilder, wenn Sie dotLess verwenden, da es ein eigenes Mixin benötigt, das selbst eine Skriptauswertung verwendet, die in dotLess nicht unterstützt wird.

Der Trick dabei ist, IE8-Unterstützung zu erhalten. Es ist nicht einfach, die Hintergrundgröße zu bestimmen, daher muss der Basisfall (nicht mobile Medienabfrage) ein einfaches, nicht skaliertes Symbol sein. Die Medienabfrage behandelt dann den Fall der Netzhaut und kann die Hintergrundgrößenklasse verwenden, da die Netzhaut in IE8 niemals verwendet wird.

.retina-background-image( @path, @filename,@extension, @size )
{
     .background-size( cover );
     background-image: url( "@{path}@{filename}@{extension}" );
         @media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
                only screen and ( -moz-min-device-pixel-ratio: 2 ),
                only screen and ( -o-min-device-pixel-ratio: 2/1 ),
                only screen and ( min-device-pixel-ratio: 2 )
         {
             background-image:url( "@{path}@{filename}@[email protected]{extension}" );
             background-size:@size @size;
         }
}

Anwendungsbeispiel:

.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );

Dafür benötigen Sie zwei Dateien:

Bei dem die 2x Datei ist doppelte Auflösung für die Netzhaut.

10
muzzamo

Da noch niemand das Offensichtliche erwähnt hat, werde ich es herausbringen: Wenn möglich, benutze einfach SVG. Sie erscheinen bei schönen Netzhautauflösungen ohne jegliche Anstrengung.

Die Unterstützung dafür ist gut, da IE8 der wichtigste Dinosaurier ist, über den man sich Sorgen machen muss. Gzippte Dateigrößen sind oft besser als Bitmap-Formate (PNG/JPG) und die Bilder sind flexibler. Sie können sie in verschiedenen Auflösungen wiederverwenden und bei Bedarf neu formatieren, was sowohl Entwicklungszeit als auch Download-Bandbreite spart.

10
svachalek

Stellen Sie einfach allen Benutzern Retina-Bilder zur Verfügung und drücken Sie das Bild im Bildelement auf die Hälfte seiner ursprünglichen Größe. Angenommen, Ihr Bild ist 400px Breit und hoch - geben Sie einfach die Bildbreite als 200px An, damit es so scharf aussieht:

<img src="img.jpg" width="200px" height="200px" />

Wenn Ihr Bild fotografisch ist, können Sie wahrscheinlich die JPG-Komprimierung erhöhen, ohne dass es schlechter aussieht, da die JPG-Komprimierungsartefakte wahrscheinlich nicht sichtbar sind, wenn das Bild unter 2x Angezeigt wird: siehe http://blog.netvlies.nl/design-interactie/retina-revolution/

6
webdev

Ich habe diese interessante Möglichkeit zur Bereitstellung von Bildern mit mehreren Auflösungen gefunden.
Es verwendet CSS, was ich vermeiden wollte, und funktioniert nur in Safari und Chrome).
Ich spreche von image-set.

Hier ist ein Beispiel , bereitgestellt von Apple ( hier ):

header {
    background: -webkit-image-set( url(images/header.jpg)    1x,
                                   url(images/header_2x.jpg) 2x);
    height: 150px; /* height in CSS pixels */
    width: 800px; /* width in CSS pixels */
}

Ich möchte auch diese beiden Links teilen:

1
jan267

Mein Code-Snippet macht genau das. Keine jQuery erforderlich, verwenden Sie einfach das Attribut data-hdimg.

https://github.com/ajkochanowicz/High-Res-Images

document.addEventListener 'DOMContentLoaded', ->
  HDimgs = document.querySelectorAll '[data-hdimg]'
  (
    image = new Image()
    image.onload = ->
      console.info 'Image loaded'
      img.src = image.src
      img.style.width = "#{image.width / 2}px"
      img.removeAttribute 'data-hdimg'
    image.onerror = ->
      console.error 'Could not load image'
    image.src = img.dataset.hdimg
  ) for img in HDimgs
1
Adam Grant

wenn seine Hintergrundbilder eine einfache Möglichkeit sind, ist dies:

    #image { background: url(image.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           #image { background: url([email protected]); background-size: 50%; }
}

eine andere einfache Möglichkeit ist die Verwendung dieser Methode:

Ersetzen Sie einfach:

<img src="image.jpg" alt="" width="200" height="100" />

mit

<img src="[email protected]" alt="" width="200" height="100" />
1
SonnyP

Wenn Sie nicht frustriert sind, weil Sie Angst haben, Java-Skript zu verwenden, finden Sie hier einen guten Artikel http://www.highrobotics.com/articles/web/ready-for-retina.aspx . Es hat sehr einfache Lösung.

Und das Beispiel in JSFiddle sagt mehr als tausend Worte.

Verwenden von:

<img onload="getImgSrc(this,'image_x1.png')" width="100" height="100" />

JS:

/* RETINA READY IMG SRC */
function getImgSrc(img, src) {
    var srcResult = src;
    // if high-res screen then change _x1 on _x2
    if (window.devicePixelRatio > 1 && 
        src.indexOf("_x1.")>=0) {
          srcResult = src.replace("_x1.", "_x2.");
    }
    img.onload = null; //protect from second rasing
    img.src = srcResult;    
}

$(document).ready(function(){
  // fire onload trigger on IMG tags that have empty SRC attribute
  var images = $('img:not([src=""])');
    images.each(function(i) {
        $(this).trigger('onload');            
    });
});
1
Artru

Dieses Problem ist besonders schwierig bei reaktionsschnellen Sites, bei denen das Bild je nach Browsergröße unterschiedlich breit sein kann. Auch wenn es sich um ein CMS handelt, bei dem mehrere Redakteure möglicherweise Tausende von Bildern hochladen, schien es mir unrealistisch, die Leute aufzufordern, speziell komprimierte Bilder hochzuladen.

Also habe ich ein Skript geschrieben, das dies berücksichtigt. Es wird unten auf der Seite ausgelöst und beim Ändern der Größe beendet. Jedes Mal unter Berücksichtigung der Pixeldichte und der Größe, die das Bild einnimmt.

http://caracaldigital.com/retina-handling-code/