Gambar Retina otomatis untuk situs web

Dengan Apple MacBook Pro baru dengan tampilan retina, jika Anda memberikan gambar "standar" di situs web Anda, itu akan sedikit kabur. Jadi Anda harus memberikan gambar retina.

Apakah ada cara untuk secara otomatis beralih ke @2xgambar, seperti yang dilakukan iOS (dengan Objective-C)? Apa yang saya temukan adalah: CSS untuk gambar beresolusi tinggi pada tampilan seluler dan retina , tetapi saya berharap saya dapat menemukan proses otomatis untuk semua gambar saya, tanpa CSS atau JavaScript .

Apa itu mungkin?

UPDATE
Saya akan menekankan artikel menarik yang disarankan oleh @Paul D. Waite dan diskusi menarik tentangnya yang ditautkan oleh Sebastian .

Terdapat atribut baru untuk tag img yang memungkinkan Anda menambahkan atribut retina src, yaitu srcset. Tidak perlu javascript atau CSS, tidak perlu memuat gambar ganda.

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

Dukungan Browser: http://caniuse.com/#search=srcset

Sumber Daya Lainnya:

• Posting rilis WebKit
• Dokumentasi W3C untuk srcset
• penjelasan yang baik tentang mengapa dan bagaimana menggunakan srcset
• Posting Chris Coyer untuk info lebih baik

Ada solusi yang berbeda, masing-masing dengan pro dan kontranya sendiri. Mana yang terbaik untuk Anda bergantung pada berbagai faktor, seperti bagaimana situs web Anda dirancang, jenis teknologi apa yang digunakan pengunjung biasa, dll. Perhatikan bahwa tampilan retina tidak terbatas pada Macbook Pro Retina dan iMac yang akan datang, tetapi juga mencakup perangkat seluler, yang mungkin memiliki kebutuhannya sendiri.

Masalah tersebut juga terkait erat dengan gambar pada desain responsif pada umumnya. Faktanya, mungkin yang terbaik adalah menggunakan teknik desain responsif umum, daripada mendesain untuk perangkat tertentu. Bagaimanapun, teknologi akan terus berubah sepanjang waktu juga di masa depan.

Beberapa solusi / diskusi yang saya catat:

• Vektor sedapat mungkin termasuk teknik CSS (gradien, sudut membulat, dll.), SVG, dan font ikon.
• Menyajikan gambar resolusi tinggi ("retina"), tetapi lebih memampatkannya (kualitas JPEG), seperti yang disarankan oleh Yoav Weiss , atau biarkan jaringan seluler memampatkannya saat benar-benar diperlukan (yaitu saat seluler), seperti yang disarankan oleh Paul Boag .
• Gambar Adaptif , solusi sisi server (kebanyakan). Ini didasarkan pada cookie yang menyimpan resolusi layar, server web yang dikonfigurasi untuk menyajikan gambar dari skrip PHP, dan skrip bernama untuk membaca cookie dan menyajikan gambar yang sesuai.
• Sekelompok kemungkinan dijelaskan dengan baik dan dibahas di Majalah Smashing .
• Menyajikan resolusi yang sedikit lebih tinggi untuk menghaluskan penggambaran retina sedikit, seperti yang disarankan dalam video oleh Paul Boag .
• Teknik @ 1,5x pada A List Apart pada dasarnya adalah ide yang sama.
• Dalam waktu dekat, <picture>tag tersebut dapat menjadi solusi yang didukung oleh kelompok kerja W3C dan bahkan Apple.
• Sebuah teknik JavaScript diusulkan oleh Jake Archebald .
• Sebuah diskusi yang luas dari teknik yang berbeda pada Smashing Magazine dan masalah pada umumnya.

Seperti yang ditunjukkan oleh jawaban lain, ada lebih banyak teknik - tetapi mungkin belum ada praktik terbaik.

Satu hal yang saya ingin tahu adalah bagaimana menguji dan men-debug beberapa teknik ini, tanpa memiliki perangkat masing-masing yang tersedia ...

Karena belum ada yang menyebutkan yang sudah jelas, saya akan menampilkannya: jika memungkinkan, gunakan saja SVG. Mereka muncul pada resolusi retina yang indah tanpa usaha apapun.

Dukungan untuk itu bagus dengan IE8 menjadi dinosaurus utama yang perlu dikhawatirkan. Ukuran file Gzip seringkali lebih baik daripada format bitmap (png / jpg) dan gambarnya lebih fleksibel; Anda dapat menggunakannya kembali pada resolusi yang berbeda dan mengubah gaya mereka jika perlu, yang menghemat waktu pengembangan dan bandwidth unduhan.

Berikut adalah lebih sedikit mixin yang saya gunakan untuk mendapatkan gambar latar belakang ini. retina.js tidak berfungsi untuk gambar latar belakang jika Anda menggunakan dotLess, karena memerlukan mixin sendiri yang menggunakan evaluasi skrip yang tidak didukung di dotLess.

Trik dengan semua ini adalah untuk mendapatkan dukungan IE8. Itu tidak dapat dengan mudah melakukan ukuran latar belakang sehingga kasus dasar (kueri media non seluler) harus berupa ikon sederhana dan tidak berskala. Kueri media kemudian menangani kasus retina dan bebas menggunakan kelas ukuran latar belakang karena retina tidak akan pernah digunakan di IE8.

.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}@x2@{extension}" );
             background-size:@size @size;
         }
}

Contoh penggunaan:

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

Ini mengharuskan Anda memiliki dua file:

• start_grey-97_12.png
• [email protected]

Dimana 2xfile tersebut beresolusi ganda untuk retina.

Cukup berikan gambar retina kepada semua orang, dan perkecil gambar hingga setengah dari ukuran aslinya di dalam elemen gambar. Misalnya, gambar Anda 400pxlebar dan tinggi - cukup tentukan lebar gambar 200pxagar terlihat tajam seperti ini:

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

Jika gambar Anda adalah foto, Anda mungkin dapat meningkatkan kompresi JPG tanpa membuatnya terlihat lebih buruk, karena artefak kompresi JPG mungkin tidak akan terlihat saat gambar ditampilkan di 2x: lihat http://blog.netvlies.nl/ desain-interactie / retina-revolusi /

jika gambar latar belakangnya, cara sederhana untuk melakukan ini adalah:

    #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%; }
}

cara sederhana lainnya adalah dengan menggunakan metode ini:

Ganti saja:

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

dengan

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

Saya telah menemukan cara menarik ini untuk menyediakan gambar dengan banyak resolusi.
Ini sebenarnya menggunakan CSS, sesuatu yang ingin saya hindari, dan hanya berfungsi di Safari dan Chrome.
Saya bicarakan image-set.

Berikut contohnya , disediakan oleh Apple (di sini ):

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 */
}

Saya ingin membagikan juga dua tautan ini:

• Safari 6 dan Chrome 21 menambahkan image-set untuk mendukung gambar retina
• The image-set()notasi @ W3C

Dengan JSF Anda dapat membuat tag Faselet khusus untuk menghemat keharusan menambahkansrcset ke setiap gambar.

Dalam diri Anda, taglib.xmlAnda bisa memiliki sesuatu seperti:

<tag>
  <tag-name>img</tag-name>
  <source>tags/img.xhtml</source>
  <attribute>
    <name>src2x</name>
    <required>true</required>
    <type>java.lang.String</type>
  </attribute>
</tag>

Dan tag Anda akan terlihat seperti ini:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

  <img src="#{fn:replace(src2x, '@2x', '')}"
       srcset="#{src2x} 2x"/>

</ui:composition>

Yang bisa digunakan seperti:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:myTag="http://your.com/namespace-of-taglib">
  <myTag:src2x="[email protected]"/>
</html>

Dan akan membuat:

<img src="image.jpg"
     srcset="[email protected] 2x"/>

Masalah ini sangat rumit dengan situs responsif di mana dan gambar dapat memiliki lebar yang bervariasi bergantung pada ukuran browser. Juga ketika berurusan dengan CMS di mana beberapa editor berpotensi mengunggah 1000 gambar, bagi saya sepertinya tidak realistis bagi saya untuk meminta orang mengunggah gambar yang dikompresi secara khusus.

Jadi saya menulis skrip yang memperhitungkan hal ini, itu diaktifkan di bagian bawah halaman dan pada pengubahan ukuran selesai. Setiap kali memperhitungkan kerapatan piksel dan ukuran gambar yang ditempati.

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

Jika Anda tidak frustasi karena takut menggunakan java-script maka berikut adalah artikel bagus http://www.highrobotics.com/articles/web/ready-for-retina.aspx . Ini memiliki solusi yang sangat sederhana.

Dan contohnya di JSFiddle bernilai ribuan kata.

Menggunakan:

<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');            
    });
});