Gambar Retina otomatis untuk situs web


104

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 .



3
Anda dapat melakukannya di sisi server dengan PHP: retina-images.complexcompulsions.com
ReLeaf

2
@ michaelward82: untuk gambar fotografi, Daan Jobsis menyarankan agar Anda dapat menyajikan gambar ukuran retina kepada semua orang tanpa ukuran file Anda lebih besar dari gambar non-retina , dengan meningkatkan jumlah kompresi JPG yang diterapkan pada gambar. Fakta bahwa gambar ditampilkan baik diperkecil atau pada layar retina sering kali berarti artefak kompresi tidak terlihat.
Paul D. Waite

1
Sebenarnya tidak salah , tapi saya bertanya-tanya apakah ada trik yang bisa digunakan. Di iOS itu otomatis ... itulah mengapa saya menanyakannya! :)
jan267

2
Perhatikan bahwa penulis "artikel menarik yang disarankan" telah membuat beberapa kesalahan besar yang dijelaskan di sini: silev.org/test/Retina-resize.html - jadi artikel harus dipahami dengan sangat hati-hati.
Sebastian

Jawaban:


147

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:


<img src = "LaunchAirportIcon.png" srcset = "LaunchAirportIcon@2x.png 2x">
malhal

7
Ini bukan hanya webkit lagi, Edge & Firefox juga mendukungnya. caniuse.com/#search=srcset - jadi saat ini ~ 64% pengguna di seluruh dunia. Kemudian pertimbangkan bahwa sangat sedikit pengguna hi-DPI yang akan menggunakan browser yang tidak didukung (IE & Android lama), dan terakhir ini aman-gagal - pengguna tanpa dukungan cukup melihat gambar DPI normal. Pasti mengira itu siap digunakan.
andrewb

1
Selain itu, tidak ada pemuatan ganda merupakan keuntungan besar. Ini berarti Anda tidak pernah menyia-nyiakan bandwidth siapa pun.
andrewb

IE sekali lagi gagal. Namun meskipun demikian, saya setuju dengan @andrewb. Untuk membangun komentarnya, saya menyediakan x2 di dalamnya srcsehingga IE / Opera akan selalu meminta versi DPI yang lebih tinggi.
Ricky Boyce

1
Ini harus menjadi jawaban yang diterima. Sejauh ini, ini adalah solusi termudah untuk utas ini.
Julien Le Coupanec

14

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 ...


11

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.


Saya suka petunjuk Anda! Satu-satunya masalah svgadalah dengan browser lama.
jan267

15
Dan kasus di mana Anda memiliki foto
Baumr

Memang, mereka hebat asalkan Anda memiliki versi Vektor dari gambar yang ingin Anda gunakan, tetapi saya tidak yakin Anda dapat menyimpan gambar raster normal sebagai SVG.
Chuck Le Butt

Tidak ada cara yang "baik" untuk mengubah arah itu, jadi "jika memungkinkan". Tetapi dengan pengecualian situs fotografi dll. Anda biasanya akan membuat aset seni Anda, jadi saya sarankan untuk membuatnya sebagai vektor, yang dapat dengan mudah diubah menjadi raster jika Anda mau, pada resolusi apa pun.
svachalek

SVG tidak berfungsi untuk tangkapan layar (misalnya, saat mendokumentasikan fitur UI).
Greg Brown

9

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
  • start_grey-97_12@2x.png

Dimana 2xfile tersebut beresolusi ganda untuk retina.


8

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 /


1
Daan Jobsis menyarankan bahwa untuk gambar foto, ini bahkan tidak harus menghasilkan ukuran file yang lebih besar: lihat blog.netvlies.nl/design-interactie/retina-revolution
Paul D. Waite

Idealnya Anda harus menentukan tinggi, sehingga browser dapat meletakkan halaman sebelum gambar diunduh.
Paul D. Waite

8
Menurut saya bukan ide yang bagus untuk menyediakan file gambar yang lebih besar dan lebih berat jika tidak diperlukan ...
jan267

1
@ PaulD.Waite menarik untuk hal pertama dan persis untuk yang terakhir! :)
jan267

2
@ PaulD.Waite Perhatikan bahwa penulis artikel terkait telah membuat beberapa kesalahan besar yang dibahas di sini: silev.org/test/Retina-resize.html - jadi artikel harus dipahami dengan sangat hati-hati. Terutama fakta bahwa "gambar tidak berskala di sebelah kanan" sebenarnya diskalakan dan dengan demikian tidak dapat dibandingkan dengan gambar yang resolusinya digandakan persis (beri tahu browser Anda untuk menampilkan gambar yang benar di jendela baru dan Anda akan melihat apa yang saya dan maksud penulis artikel lain itu)
Sebastian

1

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(image@2x.png); 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="image@2x.jpg" alt="" width="200" height="100" />

1

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:


1

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="image@2x.jpg"/>
</html>

Dan akan membuat:

<img src="image.jpg"
     srcset="image@2x.jpg 2x"/>

0

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/


0

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');            
    });
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.