Nobrolin Image
Ringkasan Episode
Bantu KoreksiEpisode tentang gambar ini berangkat dari satu kenyataan sederhana: kalau kita cuek, image akan jadi bagian paling berat dari sebuah halaman. Foto langsung dari kamera atau handphone gampang menembus ukuran belasan megabyte, dan kalau diunggah apa adanya, itulah yang harus diunduh pengunjung. Angka dari Web Almanac dipakai sebagai pengingat: dari total yang diunduh pengguna web mobile, sekitar 56% adalah image — lebih besar daripada HTML, CSS, dan JavaScript digabungkan. Solusinya sudah lama tersedia di tag image itu sendiri, yang ternyata sudah dipersenjatai srcset, sizes, loading, dan fetch priority. Dengan menyediakan beberapa varian ukuran, kita tidak perlu lagi menebak-nebak resolusi perangkat terbaru — apalagi sekarang ada ponsel lipat yang justru lebih kecil, dan device pixel ratio yang membuat perangkat kelas atas menuntut gambar berkali lipat lebih besar dari ukuran tampilnya. Biarkan browser yang menghitung. Untuk membuat variannya ada Sharp, ImageMagick lewat shell script, Squoosh yang punya CLI berbasis Wasm, atau layanan seperti Cloudinary dan Imgix kalau budgetnya ada. Bagian performanya membahas hal yang sering keliru: gambar di atas lipatan jangan pernah dibuat lazy, justru sebaliknya. Untuk preload gambar responsif ada imagesrcset dan imagesizes pada link preload, sehingga browser tetap memilih satu ukuran yang tepat alih-alih mengunduh keempat variannya. Ada juga peringatan bahwa kalau semuanya penting, tidak ada yang penting — prioritas tinggi yang menumpuk malah jadi antrean. Penutupnya soal CLS, aspect-ratio, blur hash sebagai placeholder, dan pesan agar atribut alt tetap ditulis, bahkan ketika isinya harus string kosong.
Poin-poin Utama
- •Dari total yang diunduh pengguna web mobile, sekitar 56% adalah image — lebih besar daripada HTML, CSS, dan JavaScript digabungkan
- •Dengan srcset dan sizes kita tidak perlu menebak ukuran perangkat, termasuk device pixel ratio yang bikin ponsel kelas atas memuat gambar 2-3 kali lipat dari ukuran tampilnya; biarkan browser yang menghitung
- •Preload gambar responsif punya pasangannya sendiri: imagesrcset dan imagesizes pada link preload, supaya browser tetap memilih satu ukuran alih-alih mengunduh semua varian sekaligus
- •Gambar di atas lipatan jangan dibuat lazy — pakai loading eager plus fetch priority high, karena tanpa itu hero image justru terunduh belakangan setelah gambar-gambar di bawahnya
- •Kalau semua hal ditandai penting, tidak ada yang penting: fetch priority high yang bertebaran malah memenuhi antrean, dan perpindahan posisi komponen harus dibarengi penurunan prioritas yang lama
- •Lazy loading bawaan tidak menimbulkan CLS karena browser sudah memuat gambar satu-dua viewport sebelumnya — pergeseran layout di luar viewport tidak dihitung, tapi yang menulis intersection observer sendiri harus menyetel boundary-nya negatif
- •Atribut alt jangan dihapus meski gambarnya dinamis dan tidak bisa dideskripsikan: tulis sebagai string kosong supaya dilewati screen reader, karena alt asal-asalan justru merusak pengalaman dan SEO
(musik)
Hai Hai Hai
Halo
Selamat malam
Selamat Hari Selasa lagi, kita ketemu lagi
dan Hari Selasa adalah waktunya
Ngobrol di web
Ngobrol di web dan temen-temennya ya
Dan masih bersama kita bertiga
Belum ada perubahan dari formasi
Di bagian penjaga gaung ada Ivan
Penjaga gaung
Karena paling bawah posisinya
Ada Ivan
Kemudian
Eka ini apa ya
Gelandang kanan ya
Gelandang berelahan
Dan saya juga
Gelandangan
Playmaker lah
Playmaker
Oke
Jadi untuk apa
Untuk episode ke 14 ya
Eh ke 13 ya salah ya
Hmm 13, yang sebetulnya ke 14
Sebetulnya ke 14
Betul, karena kita mulai dari 0
Kita mulai dari 0 Javascript
Lihat transkrip lengkap (1848 segmen lagi)
Pemrograman banget
Pemrograman banget
Dan episode kali ini agak berbeda karena
Kita rekamnya
Kita rekam
Karena kita ga live
Iya, jadi kita rekam
Karena 1 bulan lah ya
Jadi mohon maaf buat temen-temen yang
Komen, kita belum bisa highlight
Dan belum bisa jawab, tapi jangan khawatir
Karena nanti komen kita
Di episode mendatang juga
Dan bakal kita jawab di episode-episode mendatang
Dan buat temen-temen yang punya
Topik yang mau dibahas
Atau ada pertanyaan, bisa langsung
Tulis di
www.peed.ly/ngobrolinweb
Dan malam hari ini
Kita akan bahas tentang
Semua topik yang
Images
Topik yang cukup menarik karena
Imagesnya masih bisa agak ke-stretch ya
Oh iya ya
Nah ini CSSnya harusnya aspek
Rasio ini
Ini walaupun bukan image
Video, tapi tetep
Butuh aspek rasio ya
Video itu sebenarnya image
Image yang banyak
Image yang banyak banget
Masih sih
Ya udah gak apa-apa
Enggak, dirimuof dulu sengaja
Gak juga
Gimana ini
Gak enak lo liatnya
Di ganti dulu
Nah udah
Oke, jadi malam ini kita akan
Ngomongin tentang image dan
Beberapa trik
Untuk optimasi ya
Karena image ini, kalau kita cuek
Akan besar sekali ya
Misalkan temen-temen
Bikin image gallery dari
Misalkan dari handphone atau dari
Kamera digital
Terus di transfer
Ke hard disk dan kemudian di upload
Itu kan gede-gede gaban kan
Ada yang 5 mega
11 giga
Eh 11 mega ya
Gede-gede apa sih
Gede-gede lebih gede daripada kita
Ya setinggi Ultraman lah gimana
Setinggi Ultraman
Satu seging kan
Udah gak jaman ya gaban ya
Sepabrik
Pokoknya ukurannya
Terlalu besar gitu
Kita sebagai pembuat
Atau develop aplikasi web
Kita bukan hanya memikirkan
Untuk kita sendiri, mungkin kita
Punya internet yang tidak terbatas
Ada koneksi wifi
Dan lain-lain gitu kan
Kalau user-nya kan belum tentu
Ada yang pakai data
Langsung habis
Terus
Koneksinya slow atau terputus-putus
Atau gimana, kalau dia
Menampilkan apa
Melihat aplikasinya dari
Handphone yang ukurannya
3 megapiksel kali 3
Megapiksel, percuma kan
Soalnya layarnya cuma berapa
Jadi harus
Lebih
Lebih diperhatikan lah ya
Salah satu triknya ya
Ada yang mau mulai
Siapa duluan
Handphone itu dulu deh
Yang Mas Riza punya
Topik itu
Ukuran, desponsi
Format itu kayaknya yang dasar-dasarnya
Dulu kan
Kalau ukuran standar ya
Jadi maksudnya
Di sini, kalau dibahas tentang ukuran
Yang tadi, yang barusan diomongin
Kalau misalkan target pengguna kita
adalah pengguna handphone
Pastikan image-nya
Jangan
Terlalu besar, jangan
Melebihi dari
Resolusi dari handphone
Target pengguna kita
Misalkan, berapa sekarang ya
Resolusi handphone, ada yang tahu gak?
414
Mas, sampai 414 lah
400an lah
320
Wah, itu udah
2 tahun lalu
Motorola G4 masih 320
Apa 360 gitu
Sekarang mas, Xiaomi paling kecil juga
375
Jangan salah lho, masih ada
Yang terbaru sekarang
Flip itu lebih kecil lagi lho
Oh, ya bisa
Yang fold
Fold apa flip?
Fold
Kalau yang kecilnya
Itu lebih kecil lagi, 280 kok gak salah
Waduh, ini kita
Belum mikirin ya
Belum mikirin handphone yang flip
Atau yang fold
Udah ada yang punya belum?
Belum
Belum punya, tapi emulaturnya sudah ada
Oh, emulaturnya sudah ada
Simulate-nya sudah ada, kalau di desktop
Sudah ada simulate untuk flip
Menarik
Nah, itu pentingnya bikin image yang
Responsive, ya kan
Jadi kita gak harus mikirin
HP terbaru ukurannya berapa
Kita gak perlu mikir lagi tuh
Misalnya, apa 414
Atau 320, apa 315
Atau mungkin ada
Kan sekarang ada tablet
Ada juga phablet kan, antara phone sama tablet
Nah, kita gak usah mikirin
Detail
Ukuran device-nya
Seberapa, tapi kita bisa pakai
Atribut source set, ya kan
Untuk memilih
Image yang ukurannya
Range ukurannya sesuai
Iya, ini yang mau
Dibahas tadi adalah
Take image yang memang
Udah cukup lama ya
Dari awal HTML mungkin sudah ada
Biasanya kan kita pakai class
Pakai ALT untuk
Accessibility, dan SRC
Kan, yang bawah sini
Yang normal kan, yang umum sekali
Itu yang standar
Dan ternyata image ini sudah
Dilengkapi, dipersenjatai dengan
Property-property baru, seperti
SRC set, sizes
Terus nanti ada face priority
Ada loading
Lazy, dan lain-lain kan, ada banyak sekali
Nah, yang mau dibahas
Yang berhubungan dengan ukuran
Selain kita harus memperhatikan
Target
Device kita, juga
Responsive tadi
Kita bisa pakai kondisi ya
Seolah-olah kondisi, kita menyediakan
2 atau 3 versi dari image
Misalkan, disini saya contohkan
Saya menggunakan 400x400
Sama 800x800
Dan ketika
Ukuran layar yang pada saat webnya
Dibuka
Maximum 570, atau lebih kecil
Maka dia akan menampilkan 800
Ini kebalik ya, ini saya sengaja
Dibalik, karena kalau
Yang versi mobile, saya justru
Satu baris ke bawah
Kalau yang desktop, jadi 3 kolom
3 kolom, sorry
3 kolom ke kanan
Jadi ukurannya jadi 400
Seperti itu, jadi ada kondisi
Disini kita bisa lebih dari
Satu ya, ini saya hanya menentukan
Satu aja, yang 800
Selebihnya, fallback-nya ke 400
Jadi itu value-nya
Koma separated ya, jadi mau ada
Berapapun, yang penting kita pisahkan dengan
Koma, ya begitu pertama kali
Ketemu kondisi yang
Tepat, misalnya max width
570, ternyata device-nya 400
Begitu ketemu, ya udah dia berhenti
Kalau nggak ketemu
Terakhir fallback-nya
Yang 400 pixel, dan serunya
Ini bisa pakai apapun
Valid CSS, jadi kan
Misalnya gini nih, yang sering kalau
Di HP atau device yang layarnya
Kecil kan penuh fullscreen
Terus kalau misalnya di layar
Yang lebih besar, mungkin 3 kolom
3 kolom itu lebarnya kan kita
Nggak tahu ya, apanya 3 apa
Ya, seberapapun layarnya
Dibagi 3, nah kita bisa pakai misalnya
33 VW, atau 33%
Atau bahkan, kalau nggak salah sih
Pakai calc pun bisa
Calculate misalnya
33 VW kurang
Padding-nya 2
RAM, jadi apapun yang
Valid CSS, itu bisa
Dipakai di sizes ya
Sizes, ya
Dan kalau teman-teman merasa
Sulit gitu ya, ini kayak
String semua, ini string semua
Kita bisa pakai picture
Kalau picture, dibedakan
Tag-nya
Jadi satu source sendiri
Satu kondisi dan satu source
Satu elemen ya
Ada di tag sendiri, ya
Satu tag terpisah, jadi
Mungkin lebih familiar seperti ini
Bisa gunakan picture, tapi pakai
Image juga nggak ada masalah, dua-duanya
Hasilnya sama, gitu
Cuma kalau picture, mungkin kita lebih
Leluasa ya, karena apa
Media query-nya juga bisa lebih
Macam-macam
Terus format-nya juga bisa macem-macem
Misalnya kita punya format yang lebih modern
Nanti mungkin bakal dibahas lebih lanjut ya
Cuma kita bisa mix
Format yang baru, paling terakhir
Fallback-nya, kalau semua yang
Semua elemen baru ini nggak didukung
Fallback-nya ke image
Jadi tetap
Ini bagus banget, resilient
Istilahnya, kalau dibuka
Di browser yang nggak mendukung sama sekali
Nggak bakal breaking
Nggak bakal rusak, tetap ngerender image
Seperti biasa
Jadi kita nggak bisa rugi, baratnya nggak bisa rugi
Karena tetap pasti dirender
Dengan baik, dengan elemen image
Tapi bisa untung
Untung yang dimaksud kalau browser baru yang
Mendukung semua feature itu
Format baru, apa, kondisional
Seperti ini, itu bisa
Kita bisa memanfaatkan feature baru itu
Oke
Oke
Itu ada
Ada satu lagi loh yang
Kita sering terlupakan
Kalau misalnya ngetes image responsive
Itu DPR
Device Per Ratio
Device
DPR apa DPS?
Device Pixel Ratio
Device Pixel Ratio
DPR
Jadi
Itu apa tuh?
Jadi, untuk handphone
Biasanya handphone yang
Middle tier
Atau low tier, itu DPR
Device Pixel Ratio nya itu 1 pixel
1.0
Jadi
Per 1 pixel seikul sama 1 pixel
Dari image
Sekarang kalau dia bilang 2
Makin baru
Makin baru
Contohnya kalau
Retina Display
Pertama dipopulerin Retina ya
Retina itu istilahnya Apple kan
Kali 2
Jadi
Misalnya image yang
Untuk ukuran
Mobile mungkin tinggi
400 lah
Anggap aja 400, tapi image yang di load itu 800
Tapi sebetulnya dia
Lalu 800
Jadi kali 2 aja ya
Dicompress ukurannya
Jadi kelihatannya shallow
Dan
Sekarang handphone-handphone yang high end
Itu rata-rata sudah 3
Udah bukan 2 lagi
Bahkan sekarang android
Android yang mid tier pun
Sekarang udah 1.75 atau 2 sih
Kayak udah gak ada yang 1
Jadi kalau kita kembali ke image source
Tadi jangan kaget
400 pixel, tapi kenapa
Yang di load itu yang 800 pixel ya
Bisa pake depth tools ya
Buat cek-cek
Betul, itu yang di load
Karena yang di load itu
Device
Pixel operation
Dan keuntungan
Kita pake source set
Atau pokoknya pake teknologi bawaan
Web API ini
Keuntungannya adalah kita gak usah ngitung
Itu semua manual, pusing kan
Kita harus ngitung misalnya
Mobile, tapi
Rasiunnya pixelnya 2
Atau 3 kita harus ngaliin sendiri
Kita gak perlu ngitung itu manual, tapi kita
Menyediakan variasi
Beberapa file image sesuai ukuran
Jadi yang ngitung
Yang kalkulasi browser-nya kan
Ada gak sih tools yang
Memudahkan kita, misalkan kita punya
Original image itu
3 megapixel, terus kita mau bikin
Versi 800, 400
Versi 64, dan lain-lain itu
Ada tools-nya gak sih?
Sharp, yang paling beken ya
Sharp ya, dia bisa
Bahkan dia bisa generate berbagai
Format, ya kan
Tapi itu apa sih?
Oh, tapi ini library ya
Iya, library image processing
Jadi, kalau kita pake
Sama macam kalau di meta framework
Next, itu ada next image
Dulu pertama kali yang populering
Gatsby, paling pertama banget
Maksudnya yang bawaan dari meta framework
Gatsby image, dan
Astro pun sekarang ada
Dan sebagainya
Itu under the hood dia pakai
Sharp, untuk generate beberapa
Ukuran yang
Jadi, kalau untungnya
Maksudnya, kemudahan yang kita dapat
Dari pake next image dan sebagainya
Dia punya preset, kan kita malu
Kan mikir ukurannya berapa aja
256, 512
1094
Dia udah ada template, walaupun
Bisa kita override, tapi kalau kita
Butuh customization yang
Lebih lanjut lagi, ya kita langsung
Pake Sharp-nya aja juga bisa
Ini handle-nya
Di aplikasi kasteel ya?
Iya
Cuma harus di note
Harus jalan di server, kan dia memproses
Image ya, dia nge-generate
Image
Tapi jadi
Jadi berat dong ya, kalau misalnya
Kebanyakan
Kebanyakan
Definition image-nya ya
Iya, kalau kita bikin
Variasinya banyak, kayak makin
Apa, makin, jalannya makin
Lama, kalau kita pakai serverless
Atau semacamnya, ya makin
Abis-abisin jatah
Build minute kita
Kecuali kita jalanin
Di lokal, terus ya udah
Kita copy aja, kita bikin apa
Kayak semacam build chain aja
Kita di-copy generated image-nya
Ya udah di-upload sebagai image
Statik, kalau mau ngeliat, ya kan?
Kalau cara
Yang agak sedikit manual, pakai
Comment line gitu ya
Ada image magic yang bisa di-upload
Image magic, oh iya, andalah ya
Caranya kayak gini aja udah
Cuma ya agak manual ya, kita
Kita bikin base script aja
Ya, bikin base script
Seperti ini, versi 400, versi
800, versi berapa
Seperti itu tinggal di-upload ke
Folder image gitu
Kalau yang sederhananya, seperti itu
Nah, itu solusi juga
Enak, cuma harus dari
Maksudnya kalau kita develop di lokal
Ya udah, paling simple
Itu sih paling enak
Ya, paling nanti bisa
Bisa ditambahkan
NPM script-nya untuk menjalankan
Ketika ada image baru misalkan
Gitu lah
Kira-kira
Atau alternatif solusi lain
Kita bisa pakai layanan
Kayak yang terkenal itu
Cloudinary Image
M-G-I-X, gimana tuh
Bacanya, Imagix
Imagix
Iya, jadi
Mulai banyak produk
Yang kayak gini nih, jadi
Bukan hanya cdn
Kalau cdn image, kan kita ngebayanginnya
Cuma bucket buat
Serve image file
Jadi ini punya kapabilitas
Yang lebih dia bisa
Jadi kita masukin satu image
Dia generate
Variasi image
Berbagai ukuran, berbagai format
Terus berbagai, kalau ini lebih canggih sih
Kayak cropping
Cropping setting, sama cropping center-nya
Misalnya kita upload foto yang besar
Dia bisa otomatis
Nge-crop dengan center
Pilih muka orang, atau algoritma lainnya
Nah, dia bisa generate
Berbagai ukuran, jadi kita tinggal
Panggil aja, udah kita tinggal masukin
Ke image source set-nya
Dia punya SDK juga, jadi
JavaScript dan
Lain-lain, dan bahasa lain, jadi kita tinggal
Masukin aja tuh ke
Kayak tadi, image atau picture
Source set-nya
Ya, ya, ya, dan
Kita bisa manggil itu
Mau tentukan ukurannya
Bahkan bisa dari URL kan, misalkan
Image A/
30 x 30
Terus tiba-tiba dia generate sendiri
Yang 30 x 30, apun
Sebelumnya belum pernah kita gunakan itu
Dan kita bisa ngamanin juga
Kan takut tuh
Didos oleh orang lain
Jatah akun kita jebul kan
Nah, kita bisa
Ada banyak security setting-nya, jadi misalnya
Cuma bisa di-request dari
Preferer atau origin
Domain tertentu
Domain kita
Apa istilahnya tuh, bahasanya tuh
Dulu ya?
Course bukan?
Bukan
Kita pakai image dari tempat
Lain, terus kita pakai ini aja
Hot linking
Hot linking
Biasanya dulu pas forum-forum
Online masih ngetrain ya
Paling sering hot linking
Biasanya dikerjain
Dimunculin apa?
Dimunculin gambar yang aneh-aneh
Atau paling gambar bahwa
Dilarang hot linking
Iya, dilarang hot linking
Dan ada
Free-nya juga ya
Yang bisa dicoba untuk
Kreditnya tuh 25
Monthly credit ini apa?
Dia punya hitungan sendiri sih
Cukup banget sih
Kalo buat
Misalnya personal site
Atau punya apapun yang ga banyak
Pengunjungnya
Ga banyak pengunjungnya, dan ga banyak versi
Dari aplikasi ini, cuma 2-3 versi
Gitu kan, iyalah
Oke, oke
Menarik, ada satu
Tools lagi, yang apa?
Yang berhubungan dengan ukuran
Dan juga, oh iya kita belum bahas tentang ini ya
Tentang format baru ya
Kita bahas tentang format dulu ya, baru kita bahasin ya
Ya, formatnya adalah
Kalo dulu kan ada ini ya
Ada beberapa yang lain juga kan, kayak SVG kan
Intinya adalah JPG ini
Untuk fotografi
Format gambar jadul
Yes
Kalo PNG itu
Biasanya dia untuk
Logo ilustrasi dan lain-lain kan
Nah
Kalo yang
Karena ini munculnya kan di tahun 90-an ya
JPG dan PNG itu tahun 90-an kan
Itu dioptimasi untuk
Browser jaman itu 90-an
Dan sekarang browser udah
Berevolusi dan sudah cukup
Cukup modern
Dan sudah cukup powerful
Sehingga format-format yang
Baru bermunculan, ada WebP
Ada HAIC
Ada Aviv
Tapi yang paling sering kita dengar adalah
WebP dan Aviv ya
Kalo HAIC itu baru
Sering digunakan di
Ecosistemnya Apple
iPhoto salah satunya yang menggunakan
Iya, yang paling
Susah
Karena belum
Diadaptasi sama
Yang lain ya
Sebenernya kita bisa menggunakan WebP
Atau Aviv untuk
Image apapun
Untuk fotografika, untuk
Ilustrasi atau logo dan lain-lain
Base praktisnya adalah
WebP ini lebih optimis
Kompresinya lossless
Sehingga dia bisa menggantikan
Jpg lebih cocok
Kalo misalkan ada
PNG, kalo ada file PNG
Bisa dikonversi ke WebP
Tapi kalo untuk
Fotografi
Itu lebih cocok Aviv
Karena kompresi lossingnya paling bagus
Bisa 10x lebih kecil
Dari Jpg
Katanya
Cuma Aviv kayaknya supportnya masih
Belum semua engine supportnya
Masih lebih kurang
Daripada WebP
WebP lebih udah menggunakan
Apa sih beda lossi sama lossless?
Kalo lossi itu
Analoginya kayak
Unzip
Jadi kalo lossless
Kita bisa mengbalikan
Kita udah kompres
Kita bisa balikan ke bentuk yang hampir
Bentuk semula
Jadi udah bisa di kompres jadi
Image nya di lag, image nya kurang bagus
Terus bisa dibalikin lagi
Karena informasi-informasi masih tetap dipertahankan
Makanya ukurannya agak lebih besar
Kalo lossi
Udah hilang, jadi kalo misalkan kita kompres
Ke versi yang lebih kecil atau
Yang resolusi, bukan resolusi
Kualitas yang lebih rendah
Makanya begitu kita gak bisa
Balikin lagi, jadi udah zip gak bisa
Dianzip gitu
Kurang lebih seperti itu
Sederhananya
Berarti kayak
Jpg itu
Lossless? Jpg itu lossi
PNG lossless
Makanya kalo kita
Kompres dengan
Spesifikasi yang sama, antara Jpg sama PNG
Itu lebih kecil Jpg
Karena dia lossi, dia menghilangkan informasi-informasi
Yang dibutuhkan untuk mengbalikan
Image itu ke bentuk semula
Oke, oke
Jadi
Best practice nya adalah kalo
Aviv ini bisa digunakan untuk fotografi
Kalo webp ini untuk elemen desain
Seperti logo dan lain-lainnya
Dan tools yang
Yang sangat membantu adalah
Squoosh apps
Nah ini keren sekali
Squoosh, jadi ini ada image sebesar
796, saya coba
Kompres dengan Aviv
Belum di resize, ukurannya masih sama, persis
100% sama
Kualitasnya di 50%
Kita sudah hemat 64%
Jadi dari
Hampir 800 kilobyte menjadi
Hampir 300 kilobyte
Dan kalo kita, ini bisa kita bandingkan ya
Ini kayaknya
Ada rambut-rambutnya mungkin
Sedikit hilang gitu, tapi masih
Masih oke lah ya, gitu kan
Tapi kalo mata telanjang
Gak bakal sadar juga kan ya
Ya maksudnya, itu terserah kita
Buat nentuin kalo emang
Cuma ilustrasi kan, gak terlalu penting kan
Tergantung matanya
Tergantung matanya
Tergantung retina
Display atau bukan
Tergantung retina mata user juga
Tergantung tujuan website-nya kan
Buat apa, kalo emang buat display
Artwork, mungkin emang harus
Sharp banget dan detailnya harus
Rich banget, tapi kalo cuma buat
Ilustrasi, pendukung kan
Gak perlu tuh
Gak perlu terlalu tajam juga kan
Dan menariknya dari Squash App ini
Selain dia ada library-nya, yang bisa dilihat
Di Github atau di NPM
Dia menyediakan ini
Konversi, jadi kalo kita copy gitu
Clipboard di sini
Itu kita bisa menjalankan
NPM comment
Yang bisa kita
Masuk ke CD
Ke image, terus kita kasih aja
bintang.jpg
Dia akan konversi semua file jpg kita
Menjadi avif
Otomatis
Enak ya
Ini yang bikin Mas Jack Archibald kan ya
Dan temen-temennya
Dan temen-temennya si Surma juga bikin
Dia pakai Wasm kan
Jadi seru sekali
Dan kalo di Githubnya juga ada
Kalo temen-temen cari Squash/Cli
Di Github itu ada
Kalo mau
Programmable SDK-nya
Kalo mau langsung dari
Seperti yang ini, seperti yang Sharp ini
Jadi kita bisa coding disitu
Untuk menggunakan si Squash-nya juga
Jadi bisa automate ya
Iya bisa automate
Mungkin kita bisa bikin
Next image versi kita
Bisa bikin sendiri
Oke, kalo dari saya itu
Kalo biasa aja temen-temen itu
Kalo bangun aplikasi
Pakainya apa sih
Untuk
Untuk
Strateginya
Biasanya pakai
Bikin sendiri
Imagenya
Atau
Maksudnya compres sendiri
Udah misalnya
Dari sisi user
Uploadnya 1 image, terus kita
Kita bikin sendiri
Kita compres sendiri
Kita resize sendiri
Baru di serve
Atau sukanya pakai langsung
Kalo dari, jadi dari sisi
Aplikasi aja
Mikirin
Aplikasi aja
Bisa mikirin kaya
Compresi image, resize image itu gimana
Tergantung budget
Tergantung budget
Tergantung kebutuhan
Iya, kalo budgetnya gede sih
Koordinari langsung
Gak mau mikir lagi
Kalo dikerjaan sehari-hari
Karena
Ya karena penggunaannya cukup heavy juga
Emang udah ada
Toolchain-nya dan itu udah di handle
Di back-end sih
Upload ke bucket
Kan pake AWS juga
Udah pake 1 set layanan
Ya otomatis, ya pasti user
Upload 1 image kan
Nah, di resize jadi
3 atau 4 image langsung
Di upload ke CD-nya, ke bucketnya
Ya udah, karena kalo pake
Cloudinary lah, keliatannya
Lumayan ya
Ada yang free kan ya
Ada yang free, tapi kan ya
Kalau abis gimana
Kalo abis
Di tengah-tengah kan mau gak mau bayar
Dan itu kan bisa unexpected ya
Agak sulit kalo buat
Product yang
Udah dipake banyak orang
Cuma ya kadang kalo side project
Atau project lain yang lebih kecil
Pernah ada pengalaman pake Cloudinary
Juga sih, dan misalnya
Kebetulan udah pake framework yang dukung
Misalnya pernah pake next image
Itu enak bisa langsung
Disambungin ke setting-nya
Ke konfigurasinya
Next image
Bisa nyambung ya
Jadi sebenernya gak perlu mikirin
Resize-resize
sendiri lagi ya
Iya, cuman
Kalo satu resize cape juga
Iya, kalo dari sisi
Kitanya yang menggunakan next image
Kalo kita udah ngerti cara pakenya
Sebenernya gak masalah
Harus tau kan, di belakang laya
Apa yang terjadi
Betul, apa yang terjadi
Dan belum tentu juga aplikasi kita
Sekompleks harus
Menggunakan next image
Jadi kalo masih bisa
Dikerjakan sendiri ya, kerjakin sendiri aja
Misalkan hanya butuh 2-3
Versi dari image ya
Pakai shell script juga
Bisa kok gitu
Jangan manja lah
Jadi developer ya
Kalo dikerjakan sih malah dulu karena
Dulu karena ada tuntutan
Apa, dulu pernah
Belum boleh pake
Framework QI dulu
Jadi ya hand roll sendiri
Semua sih, ya dan dengan teknologi
Yang sekarang sih cukup simple ya
Tinggal pasang intersection
Observer, tunggu apa
Image nya sebelumnya
Source nya di load dengan data
Data attribute, data source
Kalo masuk viewport
Ya tinggal diganti aja
Source dan source set
Atributnya, value nya
Terus karena itu tadi
Udah pake cdn sendiri
Jadi apa, strukturnya kan udah tahu
Udah predictable, itu tinggal
Replace string, tinggal generate aja
Udah ada satu function nya buat generate
Bentuk URL image
Ya, betul
Entah kita hand roll sendiri
Atau pake library yang udah ada
Sebetulnya ya itu nggak terlalu masalah
Kalo kita tahu prinsip dasarnya kan
Prinsip dasarnya itu penting ya
Oke, kita bahas apa lagi
Berikutnya
Performance kali ya, seru nih
Performance
Udah ngarah ke situ nih
Preload ya, tadi yang dilakukan Eka
Yang diceritakan Eka itu adalah
Cara manual preload ya, pake data
Image ya
Sekarang, tapi
Udah ada attribute yang bawaan ya
Ada attribute lazy kan
Lazy, ya
Tapi untuk image above the fold
Kita jangan sampe bikin dia lazy
Malah nggak boleh lazy
Lazy eager, sorry
Loading eager
Eager dan face priority
High
Face priority high
Loading eager
Terakhir bisa ditambahin
Preload
Sebelum kita masuk
Ke kata kuncinya
Kalau kita image responsive itu ya
Kan responsive image itu kan ada banyak
Tadi source setnya, anggap aja
Temen-temen punya
4 images
Yang di generic pake responsive
Source setnya ada 4
Untuk kita kalo
Preload 4/4nya
Ya sama aja boong, akhirnya
Ngapain browser ngedownload
4/4 image yang preload semuanya
Yang dipake cuma 1
Betul
Jadi kalau sebelum
Artikel ini muncul dan
Itu menjadi sebuah API
Jangan mereka preload image
Kalau responsive ya kan
Bahaya gitu
Akhirnya muncul 1 image tag
Namanya
Untuk preload image kita bisa pake
Image source set
Untuk preload image
Jadi ini
Kan kita ada source set
Kita nge preload
Tapi kan kita mau preload yang mana
Kita belum tau dengan browser
Browser yang mikirkan, yang hitung
Yang menentukan dia mau ambil yang mana
Kita scroll lagi ke bawah
Jadi
Scroll, scroll, scroll
Image source set dengan image sizes
Ini kuncinya
Kita link preload
Ya kan
Terus utamanya apa
Sama seperti image tag
Yang kita source set, image tagnya kan ada source
Dan source set
Yang kita preload juga sama itu
Harifnya apa
Terus kita kasih image source set
Dan image sizes
Sizes, oke
Bedanya adalah
Dia gak pake image, tapi pake link
Rail preload ya
Ini kan, ini 2 tag yang berbeda ya
Kalian tetep harus pake
Image source setnya itu
Di feature image biasanya
Iya feature image tetapi yang di preload
Di header
Tapi seedling tag itu bikin dia bisa
Roboast antrian ya, bisa manggil dulu
Iya, jadi dia nge preload
Nge preload dulu image source
Dia siap-siap manggil ke
Yang sesuai dengan
Ukuran
Sesuai dengan viewport
Viewport, oke
Viewport masing-masing user
Tadi kan kita gak tau user kita
Pakai device apa
Jadi
Tercipta lah kondisi yang best
Kondisi yang itu preload tetapi
Sesuai ukuran
Mantap, baru tau ini
Image source set dan image sizes
Oke, ini
Di apa
Dikombinasikan dengan
Face priority high
Juga bisa ya
Bisa, sebenernya sama aja
Jadi kalau preload itu sudah highest
Udah paling tinggi ya
Di atasnya
Face priority high berarti
Iya
Preload itu
Bahkan begitu ketemu langsung download
Jadi enak ya
Reasonable defaultnya
Memudahkan ya berarti
Jadi sebenernya
Face priority kan
Masih berantem ya, belum pada
Masih berantem, betul-betul
Kalau ada face priority high
Ada dua atau ada lima, kan dia berantem tuh ya
Bukan, browser itu
Masih berantem
Face priority itu masih baru di Chrome
Oh, belum compact
Belum compact
Sedangkan image source set dan image
Size ini
Sudah lebih menerik ya
Ya, sudah
Nanti lihat aja di Can I use itu sudah
Semua browser sudah mendukung
Jadi lebih bagus
Ini kunci kan
Oke, oke, menarik
Jadi opsinya dua kan ya
Kalau above default
Kita harus ambil
Secepat mungkin, panggil secepat mungkin
Kalau below default
Harus panggil semalas mungkin
Place in load
Oke
Kalau malas-malas, tolong bilang
Malas-malasan panggil image-nya
Oke
Nayut
Itulah gunanya
Ngobrolin mu ya
Terus, kalau priority
Hints, ini apa priority hints
Priority hints itu yang face priority
Face priority itu
Untuk
Jadi saat base load
Nge-parsing HTML
Si browser itu
Nge-parsing HTML
Jadi kalau kita ketemu face
Priority hints itu
Ya, masih tahu
Ini dibutuhkan lebih awal
Maka untuk
Di waterfall
Untuk download resource-resource itu
Ya, lebih tinggi
Tertinggi itu adalah preload
Preload dan preface
Jadi DNS
Preface, preload itu
Sangat tinggi
Sedangkan kalau kita tagging
tertentu
Mungkin teman-teman nggak cuma image ya
Video kali ya
Jadi kita mau
Video itu pengen muncul
Secepatnya bagi user
Bisa aja kalian kasih face priority
Kalau memang putus cepat itu
Tapi dia nggak bisa
Override, nggak bisa nandingin
Si preload dan preface
Tadi ya
Salah satu casenya adalah
Kalau misalkan kita punya hero image
Seperti ini
Hero image seperti ini
Kalau kita face prioritynya auto
Atau tidak menggunakan face priority
Dia justru di download
Sudah terlambat
Udah duluan image-image yang lain
Yang dibawah-bawah sini yang sebenarnya
Bukan menjadi highlight di face ini kan
Bukan
LCP juga
Iya, menyebabkan LCP jadi
LCP dan CLS
CLS kalau shift
Geser ke bawah
Bisa juga kan kemungkinan dia
Largest meaningful
Largest content itu
Largest content full pain
Bisa jadi itu jadi elemen
Paling dominan atau content paling dominan
Di viewport atas kan
Kita tambahkan face prioritynya
Jadi high
Selain high ada low
Yang paling rendah dan auto itu terserah sama browser
Jadi kalau yang ini auto
Suka-suka browser aja
Sesempetnya
Nah ketika kita ganti
Akhirnya dia menjadi yang lain
Ditunda dulu
Si hero image ini dulu yang
Di download dan di render
Itulah kira-kira
Benar gak
Nah cuma ini bisa munculin masalah
Nggak sih nimbulin masalah
Dengan kemampuan buat
Customize priority
Sebetulnya istilah yang
Sering muncul juga secara umum di luar development pun
Kalau semua hal penting
If everything is important
Jadi ada yang penting deh
Karena semua ada yang gak penting kan
Nah ini kan ngaruh juga nih
Misalnya kalau kasus ekstrimnya
Semua di pre-fetch atau pre-load
Servernya justru apa
Sibuk manggilin file-file itu
Nggak sempet
Berkurang waktu, kedilai waktu
Buat memproses yang lain
Priority-nya high
Banyak yang high malah jadi
Malah jadi clogging juga
Menum-menuhin antrian
Nah ini mungkin bisa jadi masalah
Kalau komponen ya
Kalau komponen base apa
UI kita banyak pakai komponen kecil-kecil
Misalnya skenario yang kebayang
Ini hypothetical sih
Belum pernah ngalamin sendiri, tapi kan mungkin
Misalnya tadi banner yang di atas
Itu hero-komponen
Di komponennya pake fetch
Priority high karena tadinya di atas
Tapi terus ada request dari
Product owner atau yang lain
Bahwa di atasnya lagi
Ada banner lain, mungkin karena ada program
Atau promo lain kan, itu ke push ke bawah
Nah yang di atas itu juga fetch
Priority-nya high, karena dia di atas
Cuma mungkin
Yang ngerjain misalnya anggaplah itu
Developer lain yang lupa
Ngilangin prioritas dari
Komponen yang paling bawah
Atau pada pakai
Micro front-end
Pada pakai micro front-end
Terus mikirin komponennya
Dia sendiri bisa jadi
Iya
Make sense sih, maksudnya
Hero image gitu kan, misalkan udah
Face priority high, maksudnya sih
Begitu tambahin banner di atas, terus kita bikin itu
Jadi low atau dihilangkan, kayaknya
Jarang, kayaknya
Gak bakal kita lakukan, kecuali kalau
Ada yang notice kan
Tolong ini face priority-nya
Dijadikan auto lagi, atau dijadikan low
Berarti itu harus jadi pertimbangan juga
Karena kan dia sebetulnya secara
Fungsi dan prioritas kan, dia ke push
Malah mungkin kedorong gak terlalu
Above the fold, misalnya yang jadi
Penting, yang banner baru
Nah berarti kita sebagai developer juga harus
Ingat bahwa ada
Ada hal seperti itu ya
Iya, itu harus
Didokumentasikan juga
Maksudnya dijelaskan di spesifikasi
Pada saat kita mau ngerjainnya
Tolong yang ini
Kalau ada yang di pindah ke atas, yang sebelumnya di atas
Harus diturunin prioritasnya
Iya ya, benar juga ya
Semakin kompleks jadinya ya
Makin canggih, makin banyak yang harus diurus
Betul, makin banyak
Yang harus diurus
Oke, oke
Semakin seru
Perbincangan kita, terus gimana?
Masalah performance lainnya
Ini CLS, nah
Menghandle CLS
Gimana tuh?
Gampang-gampang susah
Misalnya tadi
Kalau image-nya sudah
Kan kita udah tahu ya
Ukuran image, feature image itu berapa
Apalagi dengan kondisi
Yang kita sudah ada di automatic resize
Atau pakai CDN
Kita udah tahu nih
Ukuran image, feature image itu
Sudah tahu berapa
Jadi gini
Kita, mungkin kita nanti akan bahas lagi
CLS di
Satu babak sendiri
Karena itu bisa panjang ceritanya
Pertama, untuk mengetahui
CLS itu
Tidak hanya terjadi untuk di page load saja
Itu
Pernyataan saya yang pertama
CLS itu terjadi
Selama alaman itu hidup
Rendering
Tidak, selama kita scroll
CLS itu akan terjadi
Dan itu akan di counting
Nanti akan ada window session dan perhitungan itu ada
Nanti kita bahas
Tapi seru nih
Jadi
Kita bicarakan feature image
Yang above the fold dulu
Supaya jangan terjadi CLS
Pastinya tambahkan image
Attribute width dan height
Pastikan
Dan di CSS
Pastikan jangan dikasih minimum height
Ya
Kita
Assumsi nya kan mobile ya
Tambahkan minimum height
Dan width nya 100%
Misalnya kalau ini full ya
Jadi, pastikan
Terus pertanyaannya
Kalau kita yang
Below the fold kan ada image
Loading lazy ya
Itu gimana? Itu bisa terjadi
Jadi CLS enggak?
Jawabannya yes and no
Oke
It depends
Iya
CLS itu hanya terjadi jika
Image nya
Apa jika
Layout shift terjadi
Di dalam viewport
Ya, di dalam viewport
Jadi kalau si user yang scroll terlalu cepat
CLS terjadi
Tapi kalau loading lazy itu
Dia mengambil
Dua viewport ke bawah sudah di load
Jadi kalau kita masih di sini
Loading lazy attribute
Yang bawaan maksudnya ya
Jadi
Anggapannya beginilah ya
Gimana ya posisinya enaknya ya
Gak punya dua handphone saya
Ini deh
Satu screen itu satu
Viewport
Yang di sini
Nah, yang di sini
Loading lazy itu akan
Nge-load
Yang di bawah sini
Jadi di next viewport dia sudah load
Yang dua tidak
Jadi
Begitu ini mundur ke bawah
Yang di viewport ketiga
Dia sudah load
Jadi sebelum image itu masuk
Ke dalam viewport, loading lazy itu sudah
Udah download
Jadi user enggak lihat pas
Containernya melar ya
Ya, layout shift
Terjadi di luar viewport
Itu tidak dianggap CLS
Nah, ini penting diingat juga
Buat yang hand roll apa
Yang nulis sendiri
Pake intersection observer ya
Jadi pastikan nge-setting apa
Boundary-nya, nge-trigger-nya
Event-nya
Manggil callback tuh saat
Boundary-nya harus minus, jangan pas masuk
Viewport-nya
Kalau content visibility
Akan ngaruh nggak sih?
Karena kan ada sedikit perbedaan
Antara loading lazy
Dengan content visibility kan
Kalau content visibility ini
Gambarnya tetap di download
Tapi belum di render
Oh, jadi sudah
Ketika sudah mendekati, baru di render
Ya
Itu apa lagi tuh?
Content visibility, CSS content visibility
Oh, ada ya? Belum pernah pakai
Belum pernah ya
Nah, ini ada CSS namanya content visibility
Cuman
Ini sedikit apa ya
Support-nya juga pasti aneh nih
Support-nya pasti
Belang-belang
Jadi dia menunda proses rendering
Gambarnya, tapi download-nya
Tetap, gitu
Kalau browser sudah idle ya
Sudah nyantai
Jadi
Ini tuh mungkin bisa
Bisa improve total blocking
Kali ya, maksudnya jadi
Browser main thread-nya nggak sibuk
Berusaha ngerender kan, kalau belum perlu
Jadi semacam
Virtual window
Eh, virtual window sih
Apa sih itu kalau kita ngerender
List element banyak banget
Nggak semua di render sekaligus
Bukan namanya apa
Ya, itulah
Cuma ini buat image
Khusus buat image ya
Jadi, di sini
Dilaskan kalau
Dia ngerender seluruh halaman bisa
232 ms
Tapi kalau dia pakai content visibility
Hanya 30, udah dia nggak selesai
Walaupun di bawahnya itu belum ngerender
Tapi image-nya sudah didownload
Nah
Ini sudah bisa untuk Chrome dan Edge
Yang lainnya belum
Chromium doang ini sih
Ya, tapi lumayan lah
Ini kan, apa ya, enhancement
Bukan main feature, cuma enhancement
Ya
Jadi ini mungkin ada
Ada sedikit pengaruhnya ke
Layout sieve itu, karena
Image-nya dia udah tahu nih
Image-nya udah didownload, otomatis ukurannya
Dia tahu kan, panjang lebarannya dia tahu kan
Jadi dia sudah mengkalkulasi
Si
Layout-nya, tinggal dirender aja
Gitu
Dan bisa di set juga ukurannya
Apa namanya
Mau berapa ininya
Viewport-nya ya
Apa sih itu
Jadi ada, nah seperti ini, size-nya
Apa tuh? Contains Intrinsic Sizes
Contains Intrinsic Sizes
Coba tuh, next section
Explain in the next section
In order to realize the potential benefit of content visibility
The browser need to apply size containment
To ensure that rendering result
Contains do not affect the size element in any way
Baik gitu
Yes
Jadi, this means that
The element will layout as if it was empty
Oh berarti, kita tetep harus
Ngeset, ya itu tadi
Size attribute-nya, width sama height-nya
Tetep harus ada
Tetep harus ditambahkan di itu ya
Di image ya
Jadi tadi ada beberapa layer kan
Untuk menentukan ukuran, pertama
Harus di image element-nya sendiri, walaupun
Nanti, apa, kalau image
Width sama height attribute
Di element image kan
Harus number ya, cuma harus angka
Misalnya 600x300
Walaupun nanti kan
Mungkin, bukan mungkin, tapi pasti
Menyesuaikan ukuran device kan
Karena kita bakal ngestyle lagi di layer
Kedua dengan CSS
Nggak mungkin semua
Ngerender 600, bisa aja 100%
100% itu kan ada kalkulasi-nya sendiri
Waktu
Browser parsing CSS ya
Itung 100%-nya dia itu berapa
Nah, jadi itu pertama di image
Element-nya sendiri, di markup-nya
Terus di CSS
Nah, terus baru bisa
Pakai tambahan ini tadi kan
Content
Ini sudah, jadi
Kalau dia pakai
Kembali ke kondensasi mereka
Maksudnya, si browser nggak ngerender
Kalau
Kalau belum mau ditampil
Kalau belum nyampe
Mungkin 2-3 viewport sebelum itu
Kayak yang tadi dijelasin
Menarik ya
Oke ya
Abis ini pasti langsung nyoba
Iya dong, langsung coba
Walaupun sayangnya support-nya
Masih Chromium only ya
Terus, ngomong-ngomong CSS
Ada lagi nih, yang penting, maksudnya yang berguna banget nih
CSS udah ada
Aspek rasio kan, ada proporsi aspek rasio
Dan itu support-nya sudah
Bagus banget, cross-browser semua ada
Jadi kalau dalam kasus tertentu
Kita kan mungkin udah
Tahu rasio ukurannya
Misalnya thumbnail itu
Selalu square
Berarti 1/1
Atau berapa lah
16/9, jadi kalau
Dalam kasus yang kita udah
Tahu rasio image-nya
Bisa di setting aja container-nya
Pakai CSS sudah, nggak usah
Saya bingung lagi
Kalau dulu harus nambahin padding, top
Dulu pakai hack
Dulu pakai hack padding sebelum
Aspek rasio itu supported, sekarang
Segampang, udah aspek rasio 0.2
16/9
Terus kalau
Itu sudah support semua browser kan
Kalau nggak salah safari belum deh
Eh coba ya
Penasaran
Coba kena use-nya
Karena aku pernah mau pake itu
Tapi nggak jadi
Coba, use apa nih
Aspek rasio
Udah
Kecuali IE
Kecuali IE
IE mah, nggak usah dipikir
Ya maksudnya
Kalau IE mah, emang semua yang baru
Sudah resintis ya
Udah legacy
Sudah legacy
IE 11 loh, nggak bisa ya
Tapi ini udah ijo semua sih
Ya relatif aman lah
Kalau kita pakainya
Di IE itu sendiri
Misalnya aspek rasio-nya dipakai di
IE sendiri, bukan kontainernya
Pastikan juga pakai objek fit ya
CSS property objek fit
Biar nggak
Gepeng, waktu ngeresize
Ya
Nah ini mempermudah sekali nih
Kalau kita bermain-main dengan
Ukuran IE yang tidak standar
Ada yang 16/9, ada yang
4/3, ada yang
1x1, macem-macem
Sementara source image-nya belum tentu
Sesuai
Belum tentu sesuai
Akan sangat berguna
Untuk dipakai
Terutama untuk bikin
Banyak web yang ada
Hubungannya dengan image yang
Ukurannya berbeda-beda
Oke, menarik-menarik
Banyak belajar ya kita malam ini
Padahal image doang ya
Image doang ya
Masalahnya semua website
Hampir semua website ada image
Itu konten yang sangat nggak bisa dihindari
Betul, apalagi
Landing page
Harus menghindari pernyataan doang
Karena web itu nggak ada yang kata doang
Semua bagian itu
Dalam banget
Padahal image doang
Padahal
Nggak ada image doang
Image kan salah satu elemen
HTML yang paling tua kan
Dari tahun 1993 lah
Betul
Sebenarnya
Tredy itu lebih banyak
Ngomongin jepang skill pada
Elemen utama dari
Web itu, image dan
Text
Video terakhir
Video baru sekarang-sekarang ini ya
Video mulai
Muncul, mulai banyak digunakan
Untuk landing page juga
Ada background video dan lain-lain
Tapi di tahun lalu
Oh ya video, harus ada video
Tapi di tahun lalu, di bulan Juni
Kalau nggak salah
Di Web Almanak, di HTTP Archive itu
Ada yang menarik
Jadi dari 100%
Pengguna mobile
Web gitu ya
Yang membuka
Aplikasi web lewat mobile
56% itu adalah image
Hmm, ada statistiknya ya
Menarik
44% itu adalah gabungan dari
HTML, CSS, dan JavaScript
Jadi HTML, CSS, dan JavaScript digabungin
Masih lebih gede image
Itu dari size nya
Atau dari?
Ya size, ukurannya
Itu juga gara-gara elemen yang
Cuma nampilin satu image
Ukurannya 4000 pixel
Ya itu ada
Contribusinya juga, tapi
Karena image ini kompresinya kan
Tidak
Tidak bisa
Sekecil text kan
HTML, CSS, JavaScript kan text ya
Dan font juga ditambah font lagi
Itu kan text ya
Jadi kompresinya sangat kecil
Tapi kalau image kan nggak bisa sekecil itu
Kalau kecil nanti ngeblur semua
Jelek kan, jadi harus
Menyeimbangkan antara
Masih enak dilihat dengan ukuran
Yang ramah
Sama
Apa ya, sama koneksi
Pengguna gitu
Ukuran dan strategi lazy loading ya
Kalau sekarang itu jadi penting banget
Salah satu strategi
Lazy load itu
Dia pakai ini lho, pakai
Saat image itu
Deload, dia pakai image yang
Low resolution yang hitam putih
Oh ya, background image
Nah ada tuh
Coba buka linknya
Cloudinary dibuatin langsung
Terus otomatis dibikinin
Cuma ada tuh, coba buka
Blur hash, kalau kita nggak pakai
Cloudinary yang ngasih langsung
Bisa pakai, ini nih ada
Library-nya
Blur hash, ini cara pakainya gimana
Ya library, install aja
Oh library
Terus ukuran-ukurannya semua
Oh dibikinin sama dia ya
Oke
Ya sama Cloudinary juga
Mau saya pakai teknologi, jadi Blur hash itu
Ternyata ada algoritmanya
Ini dibikin berdasarkan algoritma
Tertentu, jadi dia kayak ngambil
Bagian-bagian yang dominan
Dia kan harus ngedetek image-nya dulu tuh
Warnanya apa aja, bagian mana yang
Kontrasnya mencolok, baru dia
Bikin si Blur hash yang
Di kotak paling kanan itu
Jadi sebenarnya itu ternyata ada
Algoritmanya, cuma ya bisa
Diinterpretasi macem-macem
Berbagai cara oleh library
Nah ini salah satu library yang
Paling populer lah
Bisa jalanin
Cara sederhananya, cara sederhananya
Saya bahas juga kemarin waktu itu
Nah gini aja cara sederhananya
Jadi kita bikin image versi yang lebih kecil
Misalkan 42x42
Terus kita load sebagai
CSS atau style
Background image, jadi dia ngeblur
Distress, jangan lupa width sama height-nya
Disesuaikan dengan ukuran image yang
Kita inginkan ya
Kalau gak set ukuran
Nanti gak muncul
Gak muncul, kecil banget
Ada di pojokan doang kan
Ini adalah gambar gitar yang tadi
Jadi sebenarnya
Image-nya itu tetap ada di belakang
Jadi begitu image yang benerannya
Udah muncul, dia akan menimpa
Si Blur image tadi
Itu kalau rajin
Kalau triknya orang males, developer males
Background-nya itu warna abu-abu
Oh iya bener
Opacity layer
Misalnya opacity layer
RGB
255,255
Alphananya 0,1
Itu trik favorit
Bisa on the fly juga ya
Jadi gak perlu di convert dulu ya
Kalau ini kan perlu di convert manual kan
Tapi kalau secara estetis mungkin
Kalau dari kebutuhan produk atau klien
Itu kan kotak abu-abu doang
Kotak opacity kurang menarik
Jadi kita tetap
Bisa pake 2 trik
Entah pake Blur hash atau tadi
Resize jadi kecil
Dijadiin background image
Mana contohnya
Ini gak ada contohnya ya
Di bawah coba
Ada di github-nya
Wah banyak bahasa
Mana
Contoh kodenya
Gak ada
Ini ada di github-nya tuh
Oh ini
Di sini
Coba klik java script
Java script
Ini
Blur hash JS
Oh dia ada banyak
Nah ini ya
Scriptnya di load dulu
Kemudian
Apa ini
Encode di code
Get image data as image
Switch on load
Promise
Get image data as image
Mana dia
Oh ini encode ya, encode promise bukan
Oh ada yang
Type script-nya juga malah lebih
Enak di lihat tuh, mirip sih
Oh ya, Type script implementation
Mana dia
Kelewat, ini dia
NPM install
Kemudian decode
Decode ini
Ini decode-nya dari mana
Decode dari
Hash-nya
Encode ya, encode dulu ya
Kita butuhnya encode
Encode dulu
Jadi ini bisa auto
Sebelum mati sih cara pakaian
Dan gue lihat dulu deh
Harus dicoba sih
Nanti, hasil-hasil
Ini sebaiknya di buffer
Hasilnya base 64
Hash gitu
Ini kan, hasilnya kan
Jadi bisa inline
Oh iya bener, kalau ini
Jadi berubah dia
Keren sekali konsepnya
Jadi inline ya
Ya iya, base 64 gitu
Buat inline source
Ya, dipotong abis itu kan
Supaya dia jadi mengecil ya
Belajar lagi nih hari ini kan
Only 20 and 30 characters
Ini kan mungkin
Kalau ribet ya
Kalau gue sih kadang cari aja base 64
Converter, maksudnya kalau cuma 1-2 gambar
Kan gak worth it juga kan nih
Kurang worth it buat
Configure satu setup sendiri
Ya ketengan aja
Di convert ke base 64
Kalau static base iya
Tapi kalau
Optimasi gede banget
Kan gak bisa ya
Yang tergantung situasi
Kalau udah besar baru dipikir-pikir gini
Kalau cuma buat 1-2
1-2 tempat
Di satu static page ya
Gak usah buat apa
Manual aja
Tapi kan yang penting kita tahu dulu
Senjatanya banyak nih
Tinggal pilih senjata yang mana
Eh ini
Di WordPress ada gak nih pluginnya
Pasti ada lah yakin
Ini PHP, oh udah ada PHP
Ini pasti udah ada yang bikin
Plugin sendiri
Pasti
Buru khas
Kayaknya penggunaan PHP paling besar
Itu dari WordPress
Ecosystem deh
Yang jaman sekarang
Iya dong
Jadi
Laravel juga
Oh iya
Atau pengguna itu mungkin
Yang jarang kedengar kan yang pakai Z-Frame
Enterprise itu kan game team aja
Itu kan
Udah gak kedengaran tapi ya
Yang pakai ya banyak ya
Oke, oke
Ada lagi yang mau dibahas?
Kita sudah satu jam?
Gak ada, pas ya bisa
Pas abis beneran loh
Oke
Ivan, ada lagi?
Wajangan
Wajangan terakhir
Wajangan penutup bukan
Ujangan apa
Kalau mau tips
Nampilin image
Pakailah image sesuai ukuran
Jangan lupa kasih image
Height dan attribute
Dan
Lazy load
Semua image di bawah
Viewport, di bawah default
Yang default
Preload
Secepat mungkin
Supaya lcp nya bagus
Dan
Pakai image height
Dan attribute height dan width
Supaya tidak terjadi CLS
Oh iya
Jadi ingat alt
Pakai alt tag, sebisa mungkin
Kalau kita bisa pakai alt tag
Untuk aksesibilitas
Jadi kalau misalnya
User yang pakai
Ngaruh ke SEO juga
Jadi kalau user yang pakai
Screen reader, misalnya yang
Tuna Netra atau Lovision
Itu bisa di narrate, itu gambar apa
Nah, berguna juga untuk SEO
Kalau user cari, ngetik
Gambar tertentu
Sesuai keyword nya, itu bisa masuk
Cuma yang harus dihindari
Jangan, kalau misalnya
Image nya user generated
Atau kita emang gak bisa
Apa, itu dynamic ya
Kita gak bisa ngasih alt text yang bermakna
Jangan nulis alt text asal-asalan
Karena justru
Apa, bakal merusak experience
Buat tadi screen reader user
Bisa pakai chat GPT
Chat GPT untuk
Stable diffusion
Tapi jangan, kalau asal-asala
Nanti ngerusak SEO juga kan
Kalau konten nya ngacu
Nah, kalau misalnya kita
Gak bisa ngasih alt text yang bermakna
Alt attribute nya
Jangan dihilangin
Jadi, best practice nya itu tetap pakai alt
Tapi sama dengan empty string
Jadi, harus seperti itu
Empty string, kosong
Itu udah minimal banget ya
Karena kalau gak
Screen reader
Itu
Kalau gak ada altnya, bakal
Ngebaca something like
No image, kan mengganggu ya
Jadi, lebih baik altnya
Karena string kosong itu bakal di-skip
Betul
Dan juga, mungkin akan berguna
Ketika image nya broken
Misalkan image nya pindah, kita lupa
Itu alt nya yang muncul kan
Muncul, iya
Jadi, keguguran nya banyak
Image itu kalau di mobile
Kasih, kalau memang
Dia butuhnya
Constraint nya ya, pasti
Jangan sampai overflow
Paling sering image itu ngedorong
Itu
Itu kebantu
Kalau kita pakai
CSS reset apapun
Itu
Udah kebantu sih, biasanya ada
Max width nya
Image itu max width nya 100%
Tapi kalau kita gak pakai itu
Ya, atau punya apapun itu
Pastikan bahwa ada max width
100% ya, biar gak melar
Oke
Oke, kalau gitu
Tadi adalah kesimpulan
Dari apa yang kita omongkan dari awal
Pejangan image
Sampai
Penghujung acara
Jangan lupa, topik atau tautan
Dan pertanyaan menarik bisa dilayangkan ke
bit.ly/ngobrolinweb
Mungkin untuk malam ini sekian dulu
Kita jumpa lagi
Di episode berikutnya
Selasa depan
Dengan topik yang berbeda
Jadi untuk malam ini
Udahan dulu, selamat malam, selamat istirahat
Sampai jumpa
Di episode berikutnya
Dadah
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb ----------------------------------------------------------------------------------- Bergabung menjadi anggota elit di kanal ini: https://www.youtube.com/channel/UCHhAlFGFCGgIusQkQIqJLYw/join Donasi dapat meningkatkan kualitas kanal ini: 💰 https://karyakarsa.com/rizafahmi/tip 💸 https://sawe Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
1 Nov 2023
Ngoding di browser
Episode ini kedatangan seorang developer advocate dari AWS, dan pertanyaan pembukanya membumi: masih menjalankan lingkun...
8 Apr 2026
Bedah Situs
Episode ini adalah sesi bedah situs, membedah dua website yang dikirimkan lewat DomaiNesia secara langsung di depan peno...
21 Jun 2023
Ngobrolin DevTools
Chrome DevTools dibahas sebagai salah satu alasan sesungguhnya orang bertahan pada sebuah browser — bukan mesin renderin...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .