Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteFront endGunakan CSS Trick Ini untuk Optimalisasi Loading Gambar pada...

Gunakan CSS Trick Ini untuk Optimalisasi Loading Gambar pada Website Anda

-

Gambar merupakan salah satu elemen penting dalam web maupun aplikasi. Gambar berguna untuk  menjadi visualisasi dari konten-konten yang ditampilkan dalam web, disamping untuk menarik pengunjung terhadap konten yang ada pada website Anda.

Di era yang serba cepat ini, loading yang cepat juga sangat dibutuhkan. Untuk itu loading gambar yang cepat pada web menjadi salah satu hal yang harus diperhatikan oleh developer.

Pada artikel kali ini, kami menyajikan trik optimalisasi pemuatan (loading) gambar di web menggunakan CSS. CSS atau Cascading Style Sheets adalah bahasa pemrograman yang populer digunakan sebagai halaman depan atau tampilan dari website.

CSS banyak disukai oleh developer untuk mendesain front-end web karena beberapa alasan seperti, halaman menjadi lebih cepat dimuat, style yang lebih beragam dibanding HTML, dan kompatibel dengan berbagai macam perangkat. Berikut adalah CSS trick yang dapat Anda gunakan untuk optimalisasi loading gambar pada website Anda.

CSS Trick untuk Optimalisasi Loading Gambar pada Web

css-trick-2

1. Membuat Layout yang Responsif

Membuat layout responsif adalah teknik yang dipahami dengan baik untuk membuat gambar menggunakan ruang horizontal yang tersedia hingga ukuran maksimumnya dengan tetap mempertahankan rasio aspek.

Kabarnya, browser web akan memesan ruang vertikal yang benar untuk gambar sebelum dimuat jika atribut ‘width’ dan ‘height’ disediakan untuk elemen ‘img’ di tahun 2020 kemarin. Teknik ini bertujuan untuk menghindari CLS atau Cumulative Layout Shift (Pergeseran Tata Letak Kumulatif). Contoh kode yang dapat Anda lakukan untuk menerapkaan teknik ini:

<style>
img {
max-width: 100%;
height: auto;
}

2. Tidak lagi membutuhkan Intrinsic Size

Sejak adanya Chromium 88 ini tidak lagi diperlukan untuk gambar yang memberikan lebar dan tinggi seperti yang dijelaskan di atas. Mesin browser lain belum menerapkan visibilitas konten: otomatis dan mungkin akan mengikuti petunjuk Chromium dalam kasus khusus ini. Jadi, pemuatan gambar jauh lebih sederhana sekarang. Contoh kode:

<style>
/* Hal ini mungkin hanya masuk akal untuk gambar di dalam area utama halaman yang dapat digulir. */
main img {
/* Hanya merender pada viewport */
content-visibility: auto;
}

</style>

3. Menggunakan format AVIF

AVIF adalah format gambar terbaru yang telah diadopsi di browser web. Saat ini format AVIF didukung di browser Chromium dan tersedia juga di Firefox. AVIF terkenal karena secara konsisten mengungguli JPEG dalam cara yang sangat signifikan. Ini berbeda dengan WebP yang tidak selalu menghasilkan gambar yang lebih kecil dari JPEG.

Untuk mengimplementasikan peningkatan progresif untuk AVIF, Anda dapat menggunakan elemen gambar. Elemen ‘img’ yang sebenarnya ada di dalam gambar. Hal ini dapat sangat membingungkan, karena ‘img’ terkadang dideskripsikan sebagai fallback untuk browser tanpa dukungan gambar tetapi pada dasarnya elemen gambar hanya membantu pemilihan ‘src’ tetapi tidak memiliki layout itu sendiri. Elemen yang digambar maupun yang telah Anda lakukan styling adalah elemen img.

Sampai saat ini relatif sulit untuk benar-benar menyandikan gambar AVIF di sisi server, tetapi dengan versi terbaru pustaka seperti Sharp, sekarang hal itupun dapat dengan mudah dilakukan. Contoh kode dengan menggunakan format AVIF.

<picture>
<source
sizes="(max-width: 608px) 100vw, 608px"
srcset="
/img/P1s5TKZ-1920w.avif 1920w,
/img/P1s5TKZ-1280w.avif 1280w,
/img/P1s5TKZ-640w.avif   640w,
/img/P1s5TKZ-320w.avif   320w
"
type="image/avif"
/>
<!-- memotong banyak hal lainnya -->
<img />
</picture>

4. Memuat jumlah piksel yang benar

Coba perhatikan atribut ‘srcset’ dan ‘size’ pada kode sebelumnya. Menggunakan selector w bertujuan untuk memberi tahu browser URL mana yang akan digunakan berdasarkan piksel fisik yang akan digunakan jika gambar tersebut ditampilkan ke perangkat pengguna dengan mempertimbangkan lebar yang dihitung dari atribut ukuran.

Dengan demikian browser akan selalu mengunduh gambar sekecil mungkin namun memberikan kualitas gambar terbaik kepada pengguna.

5. Melakukan Fallback

Sediakan lebih banyak elemen sumber dengan ‘srcsets’ untuk browser yang hanya mendukung format gambar lama. Contoh kode yang bisa Anda gunakan:

<source
sizes="(max-width: 608px) 100vw, 608px"
srcset="
/img/P1s5TKZ-1920w.webp 1920w,
/img/P1s5TKZ-1280w.webp 1280w,
/img/P1s5TKZ-640w.webp   640w,
/img/P1s5TKZ-320w.webp   320w
"
type="image/webp"
/>
<source
sizes="(max-width: 608px) 100vw, 608px"
srcset="
/img/P1s5TKZ-1920w.jpg 1920w,
/img/P1s5TKZ-1280w.jpg 1280w,
/img/P1s5TKZ-640w.jpg   640w,
/img/P1s5TKZ-320w.jpg   320w
"
type="image/jpeg"
/>

6. Caching atau Buat URL yang Tidak Dapat Diubah

Anda dapat menyematkan hash byte pada gambar yang terdapat di URL gambar. Dalam contoh sebelumnya menggunakan P1s5TKZ di URL gambar. Dengan demikian, URL akan berubah jika gambar berubah dan Anda masing-masing dapat menerapkan masa berlaku cache tak terbatas untuk gambar Anda. Anda ingin header caching Anda terlihat seperti ini: ‘cache-control: public. max-age = 31536000, immutable’.

‘immutable’ adalah nilai ‘cache-control’ yang benar secara semantik, tetapi sayangnya nilai ini tidak didukung secara luas di berbagai browser yang ada saat ini. ‘max-age = 31536000 ‘ adalah fallback ke cache selama satu tahun. ‘public’ adalah elemen penting untuk mengizinkan CDN Anda menyimpan gambar dan mengirimkannya dari edge. Tetapi hanya gunakan itu jika sesuai dari perspektif privasi.

Artikel Terkait  Belajar Membuat Login dan Register di Laravel 8 | Seri Belajar Laravel

7. Menambahkan Lazy Loading

Mungkin istilah Lazy Loading terkesan aneh. Namun teknik ini memberi dampak signifikan untuk optimalisasi pemuatan gambar pada website Anda.

Tambahkan ‘loading=”lazy” pada instruksi ‘img’ browser hanya untuk mulai mengambil gambar saat gambar semakin dekat ke layar dan kemungkinan besar akan ditampilkan. Contoh kode:

<img loading="lazy" … />

8. Dekoding Asinkron

Menambahkan ‘decoding = "async"’ ke ‘img’ berfungsi untuk memberikan izin kepada browser untuk mendekode gambar dari utas utama untuk menghindari dampak pengguna dari CPU yang digunakan untuk mendekode gambar. Contoh kode:

<img decoding="async" … />

9. Membuat Blurry Placeholder

Blurry Placeholder adalah gambar sebaris yang memberi pengguna beberapa gagasan tentang gambar yang pada akhirnya akan dimuat tanpa memerlukan pengambilan byte dari jaringan. Contoh kode:

&lt;img
style="

background-size: cover;
background-image:
url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http%3A//www.w3.org/2000/svg\'
xmlns%3Axlink=\'http%3A//www.w3.org/1999/xlink\' viewBox=\'0 0 1280 853\'%3E%3Cfilter id=\'b\' color-interpolation-filters=\'sRGB\'%3E%3CfeGaussianBlur stdDeviation=\'.5\'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type=\'discrete\' tableValues=\'1 1\'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter=\'url(%23b)\' x=\'0\' y=\'0\' height=\'100%25\' width=\'100%25\'
xlink%3Ahref=\'data%3Aimage/png;base64);
"

/>

Selain dengan cara-cara di atas, Anda juga dapat mengoptimaliasi loading gambar dengan mengoptimalisasi loading web secara keseluruhan. Anda dapat mengikuti tips-tips optimalisasi website agar pemuatan website Anda lebih cepat dan efektif.  

CSS Trick untuk Optimalisasi Website agar Website menjadi lebih smooth

css

1. Jangan mengelompokan Selector dengan Common Declarations (deklarasi umum)

CSS dapat melakukan optimalisasi secara signifikan dengan menggabungkan Common Declaration ke dalam kelas-kelas terpisah. Hal ini menjadi mungkin untuk dilakukan karena kemampuan menetapkan beberapa kelas ke dalam satu elemen didukung oleh banyak browser.

Anda dapat mereferensikan beberapa kelas dengan memberikan opsi yang lebih baik untuk menata konten dan memungkinkan elemen dengan gaya yang sama untuk dikelompokan ke dalam satu kelas bersama.

2. Mengelompokan File CSS Eksternal

Guna meminimalkan permintaan HTTP, mengelompokkan file CSS eksternal dapat berdampak drastis pada kecepatan muat situs. Ada beberapa metode untuk melakukannya, tetapi lebih baik menyertakannya secara langsung di halaman XTML.

3. Mengelompokan Selector

Cara terbaik untuk menerapkan beberapa deklarasi ke beberapa selector dilakukan dengan menggabungkan pengelompokan selector yang berbagi deklarasi. Kemudian, mengabungkan pengelompokan deklarasi yang menggunakan selector yang sama. Hasilnya adalah seperangkat aturan CSS yang ringkas dan lebih kuat.

4. Menggunakan Descendant Selector tanpa Selector Kelas

Selector turunan digunakan untuk mencocokkan semua elemen yang merupakan turunan dari elemen yang ditentukan sehingga penggunaan turunan menjadi lebih efisien untuk mendapatkan yang lebih spesifik tanpa menggunakan selector kelas atau ID.

Selector kelas hanya akan lebih efisien jika ada persyaratan untuk melakukan encode style ke dalam nama dan menggunakannya dalam aturan.

Artikel Terkait  Mudah Membuat Aplikasi Satu Halaman | SPA (Single Page Application)

5. Menggunakan elemen Inherit

Elemen inherit adalah elemen yang berfungsi agar suatu elemen dapat mewarisi elemen properti dari elemen induknya. Elemen turunan ini pun akan mewarisi keluarga yang sama dari aturan tersebut. Menentukan nilai inherit akan menyebabkan suatu elemen mendapatkan nilai yang dihitung dari induknya untuk properti yang dimaksud.

6. Praktek Penggunaan Value Replication (Replikasi Nilai)

Anda dapat menggunakan Value Replication untuk batas, warna batas, dan grafik lainnya sehingga Anda dapat menghemat ruang yang diperlukan untuk situs. Penggunaan satu nilai dapat diterapkan ke keempat sisi, yang memungkinkan replikasi menjadi lebih efisien.

7. Menggunakan Kelas Lebih Pendek dan Nama ID

Memanfaatkan nama kelas yang panjang dapat menambah byte tambahan ke situs sehingga memperlambat proses loading. Oleh karena itu dianjurkan untuk menggunakan kelas yang lebih pendek dari nama ID bisa lebih bermanfaat dalam jangka panjang.

8. Komentar CSS Harus Dihapus

Cara terbaik untuk mengurangi ukuran keseluruhan situs adalah dengan menggunakan komentar PHP di CSS. Apabila sudah diuraikan dengan benar secara otomatis akan menghapus komentar. Selain itu, setelah Anda terbiasa dengan tata letak situs, Anda tidak perlu menambahkan komentar.

9. Singkatan Warna atau Nama Heksadesimal

Singkatan warna heksadesimal didukung oleh sebagian besar browser, dan dapat menjadi metode paling efisien untuk menentukan warna dalam situs. Hal ini berguna untuk memastikan ukurannya seminimal mungkin.

Kecuali jika nama warna Anda lebih pendek dari warna hex yang diberi nama singkatan (navy, ungu, dll.), Lebih baik menggunakan yang terakhir.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya