Masalah dengan menampilkan gambar telah muncul sejak munculnya kemampuan beradaptasi di Internet. Kami ingin situs terlihat bagus di tablet, ponsel, dalam orientasi layar potret atau lanskap, serta pada tampilan 5K super besar. Yang juga ada di pasaran adalah layar Retina dengan kepadatan piksel tinggi (DPI), di mana gambar biasa terlihat buram. Pangsa lalu lintas seluler meningkat, dan sumber daya besar ditujukan untuk memuat gambar secara ekonomis. Mari kita lihat bagaimana mereka memecahkan masalah ini di situs web Apple, Tilda dan platform blog Medium.
Apple: pengguna kekuatan gambar latar belakang
Apple mengandalkan desain untuk produk-produknya, dengan fokus yang kuat pada penelitian tampilan gambar. Di situs web Apple - pada saat penulisan ini - optimasi gambar disediakan oleh kemampuan CSS, lebih tepatnya, gambar latar. Prinsip utama dari pendekatan ini adalah lebar gambar tetap antara breakpoint, yaitu penolakan gambar "karet". Perhatikan contoh salah satu gambar dari situs
www.apple.com/mac<figure class="imac-image" data-progressive-image=""></figure>
.section-imac .imac-image { width:939px; height:631px; background-size:939px 631px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large_2x.jpg") } } @media only screen and (max-width: 1068px) { .section-imac .imac-image { width:795px; height:536px; background-size:795px 536px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium.jpg") } } @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium_2x.jpg") } } @media only screen and (max-width: 735px) { .section-imac .imac-image { width:365px; height:246px; background-size:365px 246px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small.jpg") } } @media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small_2x.jpg") } }
Untuk kompatibilitas lintas-browser, tiga metode segera digunakan untuk mengatur kerapatan piksel layar:
-webkit-min-perangkat-pixel-rasio: 1,5
resolusi minimum: 1.5dppx
resolusi minimum: 144dpi
Apa pro dan kontra dari pendekatan ini?
Pro
- Kemudahan implementasi. Ini mungkin cara yang paling bisa dimengerti untuk mengubah gambar ke ukuran dan kerapatan layar tertentu.
- Cakupan semua masalah: masalah ukuran layar dan kerapatan piksel sedang ditangani.
- Tidak ada tata letak jumping berkat ukuran yang sudah ditentukan sebelumnya.
- Anda dapat menggunakan fitur CSS bawaan untuk bekerja dengan latar belakang (mode campuran untuk efek, posisi - memotong gambar jika perlu).
Cons
- Anda tidak dapat membuat gambar "karet". Ukuran tetap menentukan rasio aspek, jadi ketika Anda mencoba mengompres atau meregangkan, kami memotong gambar atau ada ruang kosong di bagian bawah. Ya, Anda dapat menggunakan padding-bottom dalam persen alih-alih ukuran, tetapi ini sudah merupakan solusi, peretasan CSS yang merumitkan konsep dasar.
- Banyak sekali kode CSS. Ya, CSS mudah dibaca, tetapi dengan sejumlah besar breakpoint dan gambar, ukuran CSS dapat meningkat tanpa batas waktu (lihat di bawah “CSS preprocessors to the rescue”).
- Tidak ada kontrol atas pengunduhan gambar. Jika Anda menggunakan pendekatan ini dalam bentuk murni, Anda akan memuat semua gambar pada halaman secara bersamaan. Dan CSS, tidak seperti img, tidak memiliki callback yang membebani yang memungkinkan Anda untuk mengontrol apakah gambar dimuat atau tidak.
- Membutuhkan akurasi yang sangat teliti. Anda harus mengatur dimensi untuk semua gambar. Dan yang tidak kalah penting, saat mengganti satu gambar dengan yang lain, Anda perlu mengedit CSS untuk dimensi baru.
Preprosesor CSS untuk penyelamatan
Kemungkinan besar, Anda sudah menggunakan salah satu preprosesor CSS seperti SCSS, KURANG, PostCSS atau Stylus - dan mereka dapat sangat menyederhanakan hidup Anda. Mari kita coba untuk mengoptimalkan kode dari situs web Apple menggunakan SCSS. Untuk ekspresi media, ambil
mixin media dan tulis mixin kami untuk gambar:
@mixin image($width, $height, $url) { width: $width; height: $height; background-size: $width $height; background-repeat:no-repeat; background-image:url($url); }
Mari kita atur variabel:
$breakpoints: ( 'phone': 735px, 'tablet': 1068px ); $media-expressions: ( 'screen': 'only screen', 'retina': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi)' );
Kami mendapatkan SCSS yang mengkompilasi satu-satu di CSS Apple:
.section-imac .imac-image { @include image(939px, 631px, "image_large.jpg"); } @include media('screen', 'retina') { .section-imac .imac-image { @include image(939px, 631px, "image_large2x.jpg"); } } @include media('screen', '<=tablet') { .section-imac .imac-image { @include image(795px, 536px, "image_medium.jpg"); } } @include media('screen', '<=tablet', 'retina') { .section-imac .imac-image { @include image(795px, 536px, "image_medium_2x.jpg"); } } @include media('screen', '<=phone') { .section-imac .imac-image { @include image(365px, 246px, "image_small.jpg"); } } @include media('screen', '<=phone', 'retina') { .section-imac .imac-image { @include image(365px, 246px, "image_small_2x.jpg"); } }
Ringkasan
Ini adalah pendekatan yang bagus untuk hidup dengan jika Anda tidak memiliki banyak gambar atau mereka jarang berubah.
Tilda: gambar latar belakang dengan efek blur
Tilda adalah pembangun situs yang menyediakan berbagai komponen untuk menampilkan gambar. Pertimbangkan cara termudah untuk "malas" mengunggah gambar. Seperti apa rupa html sebelum memuat gambar:
<div data-original="https://static.tildacdn.com/image.jpg" style="background: rgba(0, 0, 0, 0) url(https://static.tildacdn.com/image-small.jpg) no-repeat scroll center center / cover;"> </div>
Efek blur dicapai karena fakta bahwa pratinjau memiliki ukuran kecil (20x20 piksel), tetapi dengan bantuan properti css penutup, gambar direntangkan ke seluruh lebar dan tinggi. Minus: buram ini tidak terlihat sangat bagus, tetapi sangat sederhana dan tidak membebani prosesor.
Setelah memuat, gambar ukuran penuh hanya diganti dengan gaya sebaris.
Pro
- Pemuatan malas.
- Mudah dirawat.
Cons
- Gambar yang sama untuk perangkat apa pun. Kemampuan beradaptasi diimplementasikan hanya dalam batas-batas stilisasi (gambar hanya dipotong dengan cara yang berbeda).
- Efek buram yang buruk.
- Tidak ada transisi antara blur dan resolusi penuh.
Ringkasan
Ini adalah metode yang berfungsi jika Anda memerlukan komponen sederhana dan tidak ingin repot dengan enam gambar atau lebih untuk resolusi layar yang berbeda. Bagus untuk situs dengan banyak gambar.
Medium: buram kanvas
Platform blogging medium.com telah membuat perbedaan besar di dunia gambar web karena efek blur yang indah untuk gambar yang kurang memuat. Efek ini dicapai dengan menggunakan perpustakaan stackblur-canvas.
HTML terlihat seperti sandwich:
<img src="placeholder.jpg"> <canvas> <img src="full-size.jpg">
Ini memungkinkan Anda untuk menyadari efek transisi yang mulus. Untuk gambar ukuran penuh, awalnya opacity: 0 melewati transisi css ke opacity: 1.
Blur Battle: CSS vs SVG vs Canvas
Jadi, jika kita bukan Apple, kemungkinan besar akan lebih mudah untuk menggunakan pemuatan gambar yang malas dan efek blur. Saat ini setidaknya ada tiga cara untuk menciptakan efek blair (dan pilihan lain dari Tilda, tetapi kami tidak akan mempertimbangkannya, karena ini bukan blair yang "nyata").
Mengapa layak menggunakan stackblur-canvas untuk mengaburkan jika Anda sudah memiliki filter untuk mengaburkan dibangun ke browser css?
- Masalahnya. Filter CSS dan SVG secara default mengaburkan tepi gambar. Ada solusi khusus untuk svg filter, untuk filter bawaan: blur () Anda harus menggunakan pemotongan.
- Performa Stackblur-canvas bekerja sangat cepat, filter css bekerja lebih cepat, jadi dengan sejumlah besar gambar buram, pilihannya pasti untuk filter css.
- Kecantikan Di sini, secara subjektif, tetapi menurut saya stackblur terlihat lebih indah. Filter svg memiliki artefak yang jelek.
Tag gambar - puncak evolusi
Pada awalnya, kami menggambarkan metode Apple dan menemukan bahwa css memiliki ekspresi media untuk ukuran layar dan kerapatan piksel. Dan mereka dapat digunakan secara bersamaan untuk memilih gambar tertentu untuk ditampilkan. Kelemahan signifikan hanya bahwa gambar di latar belakang tidak "tahu" rasio aspeknya, tidak bisa "karet". Selain itu, dari sudut pandang semantik web, menggunakan latar belakang salah untuk menampilkan semua gambar dalam satu baris.
Tag img mungkin memiliki atribut srcset, tetapi Anda harus memilih ukuran layar atau kerapatan piksel - Anda tidak dapat menggabungkan parameter ini.
Tag gambar bebas dari kelemahan ini, dan, seperti img, tag itu "tahu" rasio aspeknya. Sudah, ini didukung oleh
92% browser. Tag ini cocok untuk mereka yang mampu untuk tidak beradaptasi dengan IE.
API Pengamat titik-temu
Akhirnya, mari kita bicara tentang implementasi pemuatan gambar yang malas. Pendekatan klasik adalah dengan menggunakan kombinasi peristiwa gulir, mengubah ukuran, dan orientasi mengubah dan menghitung posisi gambar tertentu relatif terhadap area yang terlihat dari layar.
Pada 2019, Anda dapat mengganti set kruk dengan API browser khusus -
pengamat persimpangan . Ini didukung oleh semua browser modern. Untuk iOS dan IE yang lebih lama, Anda harus menggunakan
polyfill w3c resmi.
Pandangan ke masa depan: apa lagi yang hilang untuk kebahagiaan total
Jadi, kami sudah memiliki tag gambar, yang memiliki dukungan browser yang baik, tetapi masalah pemuatan malas tetap ada. Kita masih perlu mengandalkan implementasi kita sendiri berdasarkan pengamat persimpangan atau kombinasi dari peristiwa JS. Kapan browser akan menawarkan solusi asli? Misalnya, Chrome versi 75 berjanji untuk memberikan dukungan untuk properti pemuatan untuk img dan tag iframe. Anda dapat memperbarui komponen Anda untuk dukungan asli untuk pemuatan malas dengan memeriksa keberadaan properti dalam prototipe gambar: jika berhasil, Anda dapat meninggalkan kode pemuatan malas Anda sendiri, karena semuanya akan dilakukan oleh browser untuk Anda!
if ('loading' in HTMLImageElement.prototype)
CMS dan konten pengguna
Apa cara terbaik untuk menampilkan gambar yang diunggah oleh pengguna? Sebagai aturan, ada baiknya melakukan segala sesederhana mungkin, tanpa memaksanya untuk mengunggah gambar secara terpisah untuk ponsel, tablet, dan desktop. Jadi, kami hanya memiliki satu gambar untuk semua perangkat. Untuk situasi seperti itu, pendekatan Tilda (untuk kesederhanaan maksimum) atau Medium adalah sempurna - jika Anda ingin membuat efek blur nyata, mungkin mengganti stackblur-canvas dengan standar css: blur () untuk kinerja yang lebih besar.
Ringkasan
Masih belum ada satu pun, cara "paling benar" untuk menampilkan gambar. Jika Anda perlu mendukung browser dan IE yang lebih lama, maka pilihan Anda adalah gambar latar belakang dengan ekspresi media dan img untuk case sederhana. Untuk proyek baru, mungkin lebih nyaman untuk mengganti gambar latar belakang dengan gambar. Jika Anda ingin melakukan pemuatan malas yang indah, coba stackblur-canvas, dan jika kinerjanya penting bagi Anda, maka filter css atau gambar yang diregangkan pada latar belakang gaya tilde.