Nobrolin Image - Ngobrolin WEB ep13

1:12Pemrograman banget

1:14Pemrograman banget

1:16Dan episode kali ini agak berbeda karena

1:18Kita rekamnya

1:20Kita rekam

1:22Karena kita ga live

1:24Iya, jadi kita rekam

1:26Karena 1 bulan lah ya

1:28Jadi mohon maaf buat temen-temen yang

1:30Komen, kita belum bisa highlight

1:32Dan belum bisa jawab, tapi jangan khawatir

1:34Karena nanti komen kita

1:36Di episode mendatang juga

1:38Dan bakal kita jawab di episode-episode mendatang

1:40Dan buat temen-temen yang punya

1:42Topik yang mau dibahas

1:44Atau ada pertanyaan, bisa langsung

1:46Tulis di

1:48www.peed.ly/ngobrolinweb

1:50Dan malam hari ini

1:52Kita akan bahas tentang

1:54Semua topik yang

1:56Images

1:58Topik yang cukup menarik karena

2:00Imagesnya masih bisa agak ke-stretch ya

2:02Oh iya ya

2:04Nah ini CSSnya harusnya aspek

2:06Rasio ini

2:08Ini walaupun bukan image

2:10Video, tapi tetep

2:12Butuh aspek rasio ya

2:14Video itu sebenarnya image

2:16Image yang banyak

2:18Image yang banyak banget

2:20Masih sih

2:22Ya udah gak apa-apa

2:24Enggak, dirimuof dulu sengaja

2:28Gak juga

2:30Gimana ini

2:32Gak enak lo liatnya

2:34Di ganti dulu

2:36Nah udah

2:42Oke, jadi malam ini kita akan

2:46Ngomongin tentang image dan

2:48Beberapa trik

2:50Untuk optimasi ya

2:52Karena image ini, kalau kita cuek

2:54Akan besar sekali ya

2:56Misalkan temen-temen

2:58Bikin image gallery dari

3:00Misalkan dari handphone atau dari

3:02Kamera digital

3:04Terus di transfer

3:06Ke hard disk dan kemudian di upload

3:08Itu kan gede-gede gaban kan

3:10Ada yang 5 mega

3:1211 giga

3:14Eh 11 mega ya

3:16Gede-gede apa sih

3:18Gede-gede lebih gede daripada kita

3:20Ya setinggi Ultraman lah gimana

3:24Setinggi Ultraman

3:26Satu seging kan

3:28Udah gak jaman ya gaban ya

3:30Sepabrik

3:32Pokoknya ukurannya

3:34Terlalu besar gitu

3:36Kita sebagai pembuat

3:38Atau develop aplikasi web

3:40Kita bukan hanya memikirkan

3:42Untuk kita sendiri, mungkin kita

3:44Punya internet yang tidak terbatas

3:46Ada koneksi wifi

3:48Dan lain-lain gitu kan

3:50Kalau user-nya kan belum tentu

3:52Ada yang pakai data

3:54Langsung habis

3:56Terus

3:58Koneksinya slow atau terputus-putus

4:00Atau gimana, kalau dia

4:02Menampilkan apa

4:04Melihat aplikasinya dari

4:06Handphone yang ukurannya

4:083 megapiksel kali 3

4:10Megapiksel, percuma kan

4:12Soalnya layarnya cuma berapa

4:14Jadi harus

4:16Lebih

4:18Lebih diperhatikan lah ya

4:20Salah satu triknya ya

4:22Ada yang mau mulai

4:24Siapa duluan

4:26Handphone itu dulu deh

4:28Yang Mas Riza punya

4:30Topik itu

4:32Ukuran, desponsi

4:34Format itu kayaknya yang dasar-dasarnya

4:36Dulu kan

4:38Kalau ukuran standar ya

4:40Jadi maksudnya

4:42Di sini, kalau dibahas tentang ukuran

4:44Yang tadi, yang barusan diomongin

4:46Kalau misalkan target pengguna kita

4:48adalah pengguna handphone

4:50Pastikan image-nya

4:52Jangan

4:54Terlalu besar, jangan

4:56Melebihi dari

4:58Resolusi dari handphone

5:00Target pengguna kita

5:02Misalkan, berapa sekarang ya

5:04Resolusi handphone, ada yang tahu gak?

5:06414

5:08Mas, sampai 414 lah

5:10400an lah

5:12320

5:14Wah, itu udah

5:162 tahun lalu

5:18Motorola G4 masih 320

5:20Apa 360 gitu

5:22Sekarang mas, Xiaomi paling kecil juga

5:24375

5:26Jangan salah lho, masih ada

5:28Yang terbaru sekarang

5:30Flip itu lebih kecil lagi lho

5:32Oh, ya bisa

5:34Yang fold

5:36Fold apa flip?

5:38Fold

5:40Kalau yang kecilnya

5:42Itu lebih kecil lagi, 280 kok gak salah

5:44Waduh, ini kita

5:46Belum mikirin ya

5:48Belum mikirin handphone yang flip

5:50Atau yang fold

5:52Udah ada yang punya belum?

5:54Belum

5:56Belum punya, tapi emulaturnya sudah ada

5:58Oh, emulaturnya sudah ada

6:00Simulate-nya sudah ada, kalau di desktop

6:02Sudah ada simulate untuk flip

6:04Menarik

6:06Nah, itu pentingnya bikin image yang

6:08Responsive, ya kan

6:10Jadi kita gak harus mikirin

6:12HP terbaru ukurannya berapa

6:14Kita gak perlu mikir lagi tuh

6:16Misalnya, apa 414

6:18Atau 320, apa 315

6:20Atau mungkin ada

6:22Kan sekarang ada tablet

6:24Ada juga phablet kan, antara phone sama tablet

6:26Nah, kita gak usah mikirin

6:28Detail

6:30Ukuran device-nya

6:32Seberapa, tapi kita bisa pakai

6:34Atribut source set, ya kan

6:36Untuk memilih

6:38Image yang ukurannya

6:40Range ukurannya sesuai

6:42Iya, ini yang mau

6:44Dibahas tadi adalah

6:46Take image yang memang

6:48Udah cukup lama ya

6:50Dari awal HTML mungkin sudah ada

6:52Biasanya kan kita pakai class

6:54Pakai ALT untuk

6:56Accessibility, dan SRC

6:58Kan, yang bawah sini

7:00Yang normal kan, yang umum sekali

7:02Itu yang standar

7:04Dan ternyata image ini sudah

7:06Dilengkapi, dipersenjatai dengan

7:08Property-property baru, seperti

7:10SRC set, sizes

7:12Terus nanti ada face priority

7:14Ada loading

7:16Lazy, dan lain-lain kan, ada banyak sekali

7:18Nah, yang mau dibahas

7:20Yang berhubungan dengan ukuran

7:22Selain kita harus memperhatikan

7:24Target

7:26Device kita, juga

7:28Responsive tadi

7:30Kita bisa pakai kondisi ya

7:32Seolah-olah kondisi, kita menyediakan

7:342 atau 3 versi dari image

7:36Misalkan, disini saya contohkan

7:38Saya menggunakan 400x400

7:40Sama 800x800

7:42Dan ketika

7:44Ukuran layar yang pada saat webnya

7:46Dibuka

7:48Maximum 570, atau lebih kecil

7:50Maka dia akan menampilkan 800

7:52Ini kebalik ya, ini saya sengaja

7:54Dibalik, karena kalau

7:56Yang versi mobile, saya justru

7:58Satu baris ke bawah

8:00Kalau yang desktop, jadi 3 kolom

8:023 kolom, sorry

8:043 kolom ke kanan

8:06Jadi ukurannya jadi 400

8:08Seperti itu, jadi ada kondisi

8:10Disini kita bisa lebih dari

8:12Satu ya, ini saya hanya menentukan

8:14Satu aja, yang 800

8:16Selebihnya, fallback-nya ke 400

8:18Jadi itu value-nya

8:20Koma separated ya, jadi mau ada

8:22Berapapun, yang penting kita pisahkan dengan

8:24Koma, ya begitu pertama kali

8:26Ketemu kondisi yang

8:28Tepat, misalnya max width

8:30570, ternyata device-nya 400

8:32Begitu ketemu, ya udah dia berhenti

8:34Kalau nggak ketemu

8:36Terakhir fallback-nya

8:38Yang 400 pixel, dan serunya

8:40Ini bisa pakai apapun

8:42Valid CSS, jadi kan

8:44Misalnya gini nih, yang sering kalau

8:46Di HP atau device yang layarnya

8:48Kecil kan penuh fullscreen

8:50Terus kalau misalnya di layar

8:52Yang lebih besar, mungkin 3 kolom

8:543 kolom itu lebarnya kan kita

8:56Nggak tahu ya, apanya 3 apa

8:58Ya, seberapapun layarnya

9:00Dibagi 3, nah kita bisa pakai misalnya

9:0233 VW, atau 33%

9:04Atau bahkan, kalau nggak salah sih

9:06Pakai calc pun bisa

9:08Calculate misalnya

9:1033 VW kurang

9:12Padding-nya 2

9:14RAM, jadi apapun yang

9:16Valid CSS, itu bisa

9:18Dipakai di sizes ya

9:20Sizes, ya

9:22Dan kalau teman-teman merasa

9:24Sulit gitu ya, ini kayak

9:26String semua, ini string semua

9:28Kita bisa pakai picture

9:30Kalau picture, dibedakan

9:32Tag-nya

9:34Jadi satu source sendiri

9:36Satu kondisi dan satu source

9:38Satu elemen ya

9:40Ada di tag sendiri, ya

9:42Satu tag terpisah, jadi

9:44Mungkin lebih familiar seperti ini

9:46Bisa gunakan picture, tapi pakai

9:48Image juga nggak ada masalah, dua-duanya

9:50Hasilnya sama, gitu

9:52Cuma kalau picture, mungkin kita lebih

9:54Leluasa ya, karena apa

9:56Media query-nya juga bisa lebih

9:58Macam-macam

10:00Terus format-nya juga bisa macem-macem

10:02Misalnya kita punya format yang lebih modern

10:04Nanti mungkin bakal dibahas lebih lanjut ya

10:06Cuma kita bisa mix

10:08Format yang baru, paling terakhir

10:10Fallback-nya, kalau semua yang

10:12Semua elemen baru ini nggak didukung

10:14Fallback-nya ke image

10:16Jadi tetap

10:18Ini bagus banget, resilient

10:20Istilahnya, kalau dibuka

10:22Di browser yang nggak mendukung sama sekali

10:24Nggak bakal breaking

10:26Nggak bakal rusak, tetap ngerender image

10:28Seperti biasa

10:30Jadi kita nggak bisa rugi, baratnya nggak bisa rugi

10:32Karena tetap pasti dirender

10:34Dengan baik, dengan elemen image

10:36Tapi bisa untung

10:38Untung yang dimaksud kalau browser baru yang

10:40Mendukung semua feature itu

10:42Format baru, apa, kondisional

10:44Seperti ini, itu bisa

10:46Kita bisa memanfaatkan feature baru itu

10:48Oke

10:50Oke

10:52Itu ada

10:54Ada satu lagi loh yang

10:56Kita sering terlupakan

10:58Kalau misalnya ngetes image responsive

11:00Itu DPR

11:02Device Per Ratio

11:04Device

11:06DPR apa DPS?

11:08Device Pixel Ratio

11:12Device Pixel Ratio

11:14DPR

11:16Jadi

11:18Itu apa tuh?

11:20Jadi, untuk handphone

11:22Biasanya handphone yang

11:24Middle tier

11:26Atau low tier, itu DPR

11:28Device Pixel Ratio nya itu 1 pixel

11:301.0

11:32Jadi

11:34Per 1 pixel seikul sama 1 pixel

11:36Dari image

11:38Sekarang kalau dia bilang 2

11:40Makin baru

11:42Makin baru

11:44Contohnya kalau

11:46Retina Display

11:48Pertama dipopulerin Retina ya

11:50Retina itu istilahnya Apple kan

11:52Kali 2

11:54Jadi

11:56Misalnya image yang

11:58Untuk ukuran

12:00Mobile mungkin tinggi

12:02400 lah

12:04Anggap aja 400, tapi image yang di load itu 800

12:06Tapi sebetulnya dia

12:08Lalu 800

12:10Jadi kali 2 aja ya

12:12Dicompress ukurannya

12:14Jadi kelihatannya shallow

12:16Dan

12:18Sekarang handphone-handphone yang high end

12:20Itu rata-rata sudah 3

12:22Udah bukan 2 lagi

12:24Bahkan sekarang android

12:26Android yang mid tier pun

12:28Sekarang udah 1.75 atau 2 sih

12:30Kayak udah gak ada yang 1

12:32Jadi kalau kita kembali ke image source

12:34Tadi jangan kaget

12:36400 pixel, tapi kenapa

12:38Yang di load itu yang 800 pixel ya

12:40Bisa pake depth tools ya

12:42Buat cek-cek

12:44Betul, itu yang di load

12:46Karena yang di load itu

12:48Device

12:50Pixel operation

12:52Dan keuntungan

12:54Kita pake source set

12:56Atau pokoknya pake teknologi bawaan

12:58Web API ini

13:00Keuntungannya adalah kita gak usah ngitung

13:02Itu semua manual, pusing kan

13:04Kita harus ngitung misalnya

13:06Mobile, tapi

13:08Rasiunnya pixelnya 2

13:10Atau 3 kita harus ngaliin sendiri

13:12Kita gak perlu ngitung itu manual, tapi kita

13:14Menyediakan variasi

13:16Beberapa file image sesuai ukuran

13:18Jadi yang ngitung

13:20Yang kalkulasi browser-nya kan

13:22Ada gak sih tools yang

13:24Memudahkan kita, misalkan kita punya

13:26Original image itu

13:283 megapixel, terus kita mau bikin

13:30Versi 800, 400

13:32Versi 64, dan lain-lain itu

13:34Ada tools-nya gak sih?

13:36Sharp, yang paling beken ya

13:38Sharp ya, dia bisa

13:40Bahkan dia bisa generate berbagai

13:42Format, ya kan

13:44Tapi itu apa sih?

13:46Oh, tapi ini library ya

13:48Iya, library image processing

13:50Jadi, kalau kita pake

13:52Sama macam kalau di meta framework

13:54Next, itu ada next image

13:56Dulu pertama kali yang populering

13:58Gatsby, paling pertama banget

14:00Maksudnya yang bawaan dari meta framework

14:02Gatsby image, dan

14:04Astro pun sekarang ada

14:06Dan sebagainya

14:08Itu under the hood dia pakai

14:10Sharp, untuk generate beberapa

14:12Ukuran yang

14:14Jadi, kalau untungnya

14:16Maksudnya, kemudahan yang kita dapat

14:18Dari pake next image dan sebagainya

14:20Dia punya preset, kan kita malu

14:22Kan mikir ukurannya berapa aja

14:24256, 512

14:261094

14:28Dia udah ada template, walaupun

14:30Bisa kita override, tapi kalau kita

14:32Butuh customization yang

14:34Lebih lanjut lagi, ya kita langsung

14:36Pake Sharp-nya aja juga bisa

14:38Ini handle-nya

14:40Di aplikasi kasteel ya?

14:42Iya

14:44Cuma harus di note

14:46Harus jalan di server, kan dia memproses

14:48Image ya, dia nge-generate

14:50Image

14:52Tapi jadi

14:54Jadi berat dong ya, kalau misalnya

14:56Kebanyakan

14:58Kebanyakan

15:00Definition image-nya ya

15:02Iya, kalau kita bikin

15:04Variasinya banyak, kayak makin

15:06Apa, makin, jalannya makin

15:08Lama, kalau kita pakai serverless

15:10Atau semacamnya, ya makin

15:12Abis-abisin jatah

15:14Build minute kita

15:16Kecuali kita jalanin

15:18Di lokal, terus ya udah

15:20Kita copy aja, kita bikin apa

15:22Kayak semacam build chain aja

15:24Kita di-copy generated image-nya

15:26Ya udah di-upload sebagai image

15:28Statik, kalau mau ngeliat, ya kan?

15:30Kalau cara

15:32Yang agak sedikit manual, pakai

15:34Comment line gitu ya

15:36Ada image magic yang bisa di-upload

15:38Image magic, oh iya, andalah ya

15:40Caranya kayak gini aja udah

15:42Cuma ya agak manual ya, kita

15:44Kita bikin base script aja

15:46Ya, bikin base script

15:48Seperti ini, versi 400, versi

15:50800, versi berapa

15:52Seperti itu tinggal di-upload ke

15:54Folder image gitu

15:56Kalau yang sederhananya, seperti itu

15:58Nah, itu solusi juga

16:00Enak, cuma harus dari

16:02Maksudnya kalau kita develop di lokal

16:04Ya udah, paling simple

16:06Itu sih paling enak

16:08Ya, paling nanti bisa

16:10Bisa ditambahkan

16:12NPM script-nya untuk menjalankan

16:14Ketika ada image baru misalkan

16:16Gitu lah

16:18Kira-kira

16:20Atau alternatif solusi lain

16:22Kita bisa pakai layanan

16:24Kayak yang terkenal itu

16:26Cloudinary Image

16:28M-G-I-X, gimana tuh

16:30Bacanya, Imagix

16:32Imagix

16:34Iya, jadi

16:36Mulai banyak produk

16:38Yang kayak gini nih, jadi

16:40Bukan hanya cdn

16:42Kalau cdn image, kan kita ngebayanginnya

16:44Cuma bucket buat

16:46Serve image file

16:48Jadi ini punya kapabilitas

16:50Yang lebih dia bisa

16:52Jadi kita masukin satu image

16:54Dia generate

16:56Variasi image

16:58Berbagai ukuran, berbagai format

17:00Terus berbagai, kalau ini lebih canggih sih

17:02Kayak cropping

17:04Cropping setting, sama cropping center-nya

17:06Misalnya kita upload foto yang besar

17:08Dia bisa otomatis

17:10Nge-crop dengan center

17:12Pilih muka orang, atau algoritma lainnya

17:14Nah, dia bisa generate

17:16Berbagai ukuran, jadi kita tinggal

17:18Panggil aja, udah kita tinggal masukin

17:20Ke image source set-nya

17:22Dia punya SDK juga, jadi

17:24JavaScript dan

17:26Lain-lain, dan bahasa lain, jadi kita tinggal

17:28Masukin aja tuh ke

17:30Kayak tadi, image atau picture

17:32Source set-nya

17:34Ya, ya, ya, dan

17:36Kita bisa manggil itu

17:38Mau tentukan ukurannya

17:40Bahkan bisa dari URL kan, misalkan

17:42Image A/

17:4430 x 30

17:46Terus tiba-tiba dia generate sendiri

17:48Yang 30 x 30, apun

17:50Sebelumnya belum pernah kita gunakan itu

17:52Dan kita bisa ngamanin juga

17:54Kan takut tuh

17:56Didos oleh orang lain

17:58Jatah akun kita jebul kan

18:00Nah, kita bisa

18:02Ada banyak security setting-nya, jadi misalnya

18:04Cuma bisa di-request dari

18:06Preferer atau origin

18:08Domain tertentu

18:10Domain kita

18:12Apa istilahnya tuh, bahasanya tuh

18:14Dulu ya?

18:16Course bukan?

18:18Bukan

18:20Kita pakai image dari tempat

18:22Lain, terus kita pakai ini aja

18:24Hot linking

18:26Hot linking

18:28Biasanya dulu pas forum-forum

18:30Online masih ngetrain ya

18:32Paling sering hot linking

18:34Biasanya dikerjain

18:36Dimunculin apa?

18:38Dimunculin gambar yang aneh-aneh

18:40Atau paling gambar bahwa

18:42Dilarang hot linking

18:44Iya, dilarang hot linking

18:46Dan ada

18:48Free-nya juga ya

18:50Yang bisa dicoba untuk

18:52Kreditnya tuh 25

18:54Monthly credit ini apa?

18:56Dia punya hitungan sendiri sih

18:58Cukup banget sih

19:00Kalo buat

19:02Misalnya personal site

19:04Atau punya apapun yang ga banyak

19:06Pengunjungnya

19:08Ga banyak pengunjungnya, dan ga banyak versi

19:10Dari aplikasi ini, cuma 2-3 versi

19:12Gitu kan, iyalah

19:14Oke, oke

19:16Menarik, ada satu

19:18Tools lagi, yang apa?

19:20Yang berhubungan dengan ukuran

19:22Dan juga, oh iya kita belum bahas tentang ini ya

19:24Tentang format baru ya

19:26Kita bahas tentang format dulu ya, baru kita bahasin ya

19:28Ya, formatnya adalah

19:30Kalo dulu kan ada ini ya

19:32Ada beberapa yang lain juga kan, kayak SVG kan

19:34Intinya adalah JPG ini

19:36Untuk fotografi

19:38Format gambar jadul

19:40Yes

19:42Kalo PNG itu

19:44Biasanya dia untuk

19:46Logo ilustrasi dan lain-lain kan

19:48Nah

19:50Kalo yang

19:52Karena ini munculnya kan di tahun 90-an ya

19:54JPG dan PNG itu tahun 90-an kan

19:56Itu dioptimasi untuk

19:58Browser jaman itu 90-an

20:00Dan sekarang browser udah

20:02Berevolusi dan sudah cukup

20:04Cukup modern

20:06Dan sudah cukup powerful

20:08Sehingga format-format yang

20:10Baru bermunculan, ada WebP

20:12Ada HAIC

20:14Ada Aviv

20:16Tapi yang paling sering kita dengar adalah

20:18WebP dan Aviv ya

20:20Kalo HAIC itu baru

20:22Sering digunakan di

20:24Ecosistemnya Apple

20:26iPhoto salah satunya yang menggunakan

20:28Iya, yang paling

20:30Susah

20:32Karena belum

20:34Diadaptasi sama

20:36Yang lain ya

20:38Sebenernya kita bisa menggunakan WebP

20:40Atau Aviv untuk

20:42Image apapun

20:44Untuk fotografika, untuk

20:46Ilustrasi atau logo dan lain-lain

20:48Base praktisnya adalah

20:50WebP ini lebih optimis

20:52Kompresinya lossless

20:54Sehingga dia bisa menggantikan

20:56Jpg lebih cocok

20:58Kalo misalkan ada

21:00PNG, kalo ada file PNG

21:02Bisa dikonversi ke WebP

21:04Tapi kalo untuk

21:06Fotografi

21:08Itu lebih cocok Aviv

21:10Karena kompresi lossingnya paling bagus

21:12Bisa 10x lebih kecil

21:14Dari Jpg

21:16Katanya

21:18Cuma Aviv kayaknya supportnya masih

21:20Belum semua engine supportnya

21:22Masih lebih kurang

21:24Daripada WebP

21:26WebP lebih udah menggunakan

21:28Apa sih beda lossi sama lossless?

21:30Kalo lossi itu

21:32Analoginya kayak

21:34Unzip

21:36Jadi kalo lossless

21:38Kita bisa mengbalikan

21:40Kita udah kompres

21:42Kita bisa balikan ke bentuk yang hampir

21:44Bentuk semula

21:46Jadi udah bisa di kompres jadi

21:48Image nya di lag, image nya kurang bagus

21:50Terus bisa dibalikin lagi

21:52Karena informasi-informasi masih tetap dipertahankan

21:54Makanya ukurannya agak lebih besar

21:56Kalo lossi

21:58Udah hilang, jadi kalo misalkan kita kompres

22:00Ke versi yang lebih kecil atau

22:02Yang resolusi, bukan resolusi

22:04Kualitas yang lebih rendah

22:06Makanya begitu kita gak bisa

22:08Balikin lagi, jadi udah zip gak bisa

22:10Dianzip gitu

22:12Kurang lebih seperti itu

22:14Sederhananya

22:16Berarti kayak

22:18Jpg itu

22:20Lossless? Jpg itu lossi

22:22PNG lossless

22:24Makanya kalo kita

22:26Kompres dengan

22:28Spesifikasi yang sama, antara Jpg sama PNG

22:30Itu lebih kecil Jpg

22:32Karena dia lossi, dia menghilangkan informasi-informasi

22:34Yang dibutuhkan untuk mengbalikan

22:36Image itu ke bentuk semula

22:38Oke, oke

22:40Jadi

22:42Best practice nya adalah kalo

22:44Aviv ini bisa digunakan untuk fotografi

22:46Kalo webp ini untuk elemen desain

22:48Seperti logo dan lain-lainnya

22:50Dan tools yang

22:52Yang sangat membantu adalah

22:54Squoosh apps

22:56Nah ini keren sekali

22:58Squoosh, jadi ini ada image sebesar

23:00796, saya coba

23:02Kompres dengan Aviv

23:04Belum di resize, ukurannya masih sama, persis

23:06100% sama

23:08Kualitasnya di 50%

23:10Kita sudah hemat 64%

23:12Jadi dari

23:14Hampir 800 kilobyte menjadi

23:16Hampir 300 kilobyte

23:18Dan kalo kita, ini bisa kita bandingkan ya

23:20Ini kayaknya

23:22Ada rambut-rambutnya mungkin

23:24Sedikit hilang gitu, tapi masih

23:26Masih oke lah ya, gitu kan

23:28Tapi kalo mata telanjang

23:30Gak bakal sadar juga kan ya

23:32Ya maksudnya, itu terserah kita

23:34Buat nentuin kalo emang

23:36Cuma ilustrasi kan, gak terlalu penting kan

23:38Tergantung matanya

23:40Tergantung matanya

23:42Tergantung retina

23:44Display atau bukan

23:46Tergantung retina mata user juga

23:48Tergantung tujuan website-nya kan

23:50Buat apa, kalo emang buat display

23:52Artwork, mungkin emang harus

23:54Sharp banget dan detailnya harus

23:56Rich banget, tapi kalo cuma buat

23:58Ilustrasi, pendukung kan

24:00Gak perlu tuh

24:02Gak perlu terlalu tajam juga kan

24:04Dan menariknya dari Squash App ini

24:06Selain dia ada library-nya, yang bisa dilihat

24:08Di Github atau di NPM

24:10Dia menyediakan ini

24:12Konversi, jadi kalo kita copy gitu

24:14Clipboard di sini

24:16Itu kita bisa menjalankan

24:18NPM comment

24:20Yang bisa kita

24:22Masuk ke CD

24:24Ke image, terus kita kasih aja

24:26bintang.jpg

24:28Dia akan konversi semua file jpg kita

24:30Menjadi avif

24:32Otomatis

24:34Enak ya

24:36Ini yang bikin Mas Jack Archibald kan ya

24:38Dan temen-temennya

24:42Dan temen-temennya si Surma juga bikin

24:44Dia pakai Wasm kan

24:46Jadi seru sekali

24:50Dan kalo di Githubnya juga ada

24:52Kalo temen-temen cari Squash/Cli

24:54Di Github itu ada

24:56Kalo mau

24:58Programmable SDK-nya

25:00Kalo mau langsung dari

25:02Seperti yang ini, seperti yang Sharp ini

25:04Jadi kita bisa coding disitu

25:06Untuk menggunakan si Squash-nya juga

25:08Jadi bisa automate ya

25:10Iya bisa automate

25:12Mungkin kita bisa bikin

25:14Next image versi kita

25:16Bisa bikin sendiri

25:18Oke, kalo dari saya itu

25:22Kalo biasa aja temen-temen itu

25:24Kalo bangun aplikasi

25:26Pakainya apa sih

25:28Untuk

25:30Untuk

25:32Strateginya

25:36Biasanya pakai

25:38Bikin sendiri

25:40Imagenya

25:42Atau

25:44Maksudnya compres sendiri

25:46Udah misalnya

25:48Dari sisi user

25:50Uploadnya 1 image, terus kita

25:52Kita bikin sendiri

25:54Kita compres sendiri

25:56Kita resize sendiri

25:58Baru di serve

26:00Atau sukanya pakai langsung

26:02Kalo dari, jadi dari sisi

26:04Aplikasi aja

26:06Mikirin

26:08Aplikasi aja

26:10Bisa mikirin kaya

26:12Compresi image, resize image itu gimana

26:14Tergantung budget

26:16Tergantung budget

26:18Tergantung kebutuhan

26:20Iya, kalo budgetnya gede sih

26:22Koordinari langsung

26:24Gak mau mikir lagi

26:26Kalo dikerjaan sehari-hari

26:28Karena

26:30Ya karena penggunaannya cukup heavy juga

26:32Emang udah ada

26:34Toolchain-nya dan itu udah di handle

26:36Di back-end sih

26:38Upload ke bucket

26:40Kan pake AWS juga

26:42Udah pake 1 set layanan

26:44Ya otomatis, ya pasti user

26:46Upload 1 image kan

26:48Nah, di resize jadi

26:503 atau 4 image langsung

26:52Di upload ke CD-nya, ke bucketnya

26:54Ya udah, karena kalo pake

26:56Cloudinary lah, keliatannya

26:58Lumayan ya

27:00Ada yang free kan ya

27:02Ada yang free, tapi kan ya

27:04Kalau abis gimana

27:06Kalo abis

27:08Di tengah-tengah kan mau gak mau bayar

27:10Dan itu kan bisa unexpected ya

27:12Agak sulit kalo buat

27:14Product yang

27:16Udah dipake banyak orang

27:18Cuma ya kadang kalo side project

27:20Atau project lain yang lebih kecil

27:22Pernah ada pengalaman pake Cloudinary

27:24Juga sih, dan misalnya

27:26Kebetulan udah pake framework yang dukung

27:28Misalnya pernah pake next image

27:30Itu enak bisa langsung

27:32Disambungin ke setting-nya

27:34Ke konfigurasinya

27:36Next image

27:38Bisa nyambung ya

27:40Jadi sebenernya gak perlu mikirin

27:42Resize-resize

27:44sendiri lagi ya

27:46Iya, cuman

27:48Kalo satu resize cape juga

27:50Iya, kalo dari sisi

27:52Kitanya yang menggunakan next image

27:54Kalo kita udah ngerti cara pakenya

27:56Sebenernya gak masalah

27:58Harus tau kan, di belakang laya

28:00Apa yang terjadi

28:02Betul, apa yang terjadi

28:04Dan belum tentu juga aplikasi kita

28:06Sekompleks harus

28:08Menggunakan next image

28:10Jadi kalo masih bisa

28:12Dikerjakan sendiri ya, kerjakin sendiri aja

28:14Misalkan hanya butuh 2-3

28:16Versi dari image ya

28:18Pakai shell script juga

28:20Bisa kok gitu

28:22Jangan manja lah

28:24Jadi developer ya

28:26Kalo dikerjakan sih malah dulu karena

28:28Dulu karena ada tuntutan

28:30Apa, dulu pernah

28:32Belum boleh pake

28:34Framework QI dulu

28:36Jadi ya hand roll sendiri

28:38Semua sih, ya dan dengan teknologi

28:40Yang sekarang sih cukup simple ya

28:42Tinggal pasang intersection

28:44Observer, tunggu apa

28:46Image nya sebelumnya

28:48Source nya di load dengan data

28:50Data attribute, data source

28:52Kalo masuk viewport

28:54Ya tinggal diganti aja

28:56Source dan source set

28:58Atributnya, value nya

29:00Terus karena itu tadi

29:02Udah pake cdn sendiri

29:04Jadi apa, strukturnya kan udah tahu

29:06Udah predictable, itu tinggal

29:08Replace string, tinggal generate aja

29:10Udah ada satu function nya buat generate

29:12Bentuk URL image

29:16Ya, betul

29:18Entah kita hand roll sendiri

29:20Atau pake library yang udah ada

29:22Sebetulnya ya itu nggak terlalu masalah

29:24Kalo kita tahu prinsip dasarnya kan

29:26Prinsip dasarnya itu penting ya

29:28Oke, kita bahas apa lagi

29:32Berikutnya

29:34Performance kali ya, seru nih

29:36Performance

29:38Udah ngarah ke situ nih

29:40Preload ya, tadi yang dilakukan Eka

29:42Yang diceritakan Eka itu adalah

29:44Cara manual preload ya, pake data

29:46Image ya

29:48Sekarang, tapi

29:50Udah ada attribute yang bawaan ya

29:52Ada attribute lazy kan

29:54Lazy, ya

29:56Tapi untuk image above the fold

29:58Kita jangan sampe bikin dia lazy

30:00Malah nggak boleh lazy

30:02Lazy eager, sorry

30:04Loading eager

30:06Eager dan face priority

30:08High

30:10Face priority high

30:12Loading eager

30:14Terakhir bisa ditambahin

30:16Preload

30:18Sebelum kita masuk

30:20Ke kata kuncinya

30:22Kalau kita image responsive itu ya

30:24Kan responsive image itu kan ada banyak

30:26Tadi source setnya, anggap aja

30:28Temen-temen punya

30:304 images

30:32Yang di generic pake responsive

30:34Source setnya ada 4

30:36Untuk kita kalo

30:38Preload 4/4nya

30:40Ya sama aja boong, akhirnya

30:42Ngapain browser ngedownload

30:444/4 image yang preload semuanya

30:46Yang dipake cuma 1

30:48Betul

30:50Jadi kalau sebelum

30:52Artikel ini muncul dan

30:54Itu menjadi sebuah API

30:56Jangan mereka preload image

30:58Kalau responsive ya kan

31:00Bahaya gitu

31:02Akhirnya muncul 1 image tag

31:04Namanya

31:06Untuk preload image kita bisa pake

31:08Image source set

31:10Untuk preload image

31:12Jadi ini

31:14Kan kita ada source set

31:16Kita nge preload

31:18Tapi kan kita mau preload yang mana

31:20Kita belum tau dengan browser

31:22Browser yang mikirkan, yang hitung

31:24Yang menentukan dia mau ambil yang mana

31:26Kita scroll lagi ke bawah

31:28Jadi

31:32Scroll, scroll, scroll

31:34Image source set dengan image sizes

31:36Ini kuncinya

31:40Kita link preload

31:42Ya kan

31:44Terus utamanya apa

31:46Sama seperti image tag

31:48Yang kita source set, image tagnya kan ada source

31:50Dan source set

31:52Yang kita preload juga sama itu

31:54Harifnya apa

31:56Terus kita kasih image source set

31:58Dan image sizes

32:00Sizes, oke

32:02Bedanya adalah

32:04Dia gak pake image, tapi pake link

32:06Rail preload ya

32:08Ini kan, ini 2 tag yang berbeda ya

32:10Kalian tetep harus pake

32:12Image source setnya itu

32:14Di feature image biasanya

32:16Iya feature image tetapi yang di preload

32:18Di header

32:20Tapi seedling tag itu bikin dia bisa

32:22Roboast antrian ya, bisa manggil dulu

32:24Iya, jadi dia nge preload

32:26Nge preload dulu image source

32:28Dia siap-siap manggil ke

32:30Yang sesuai dengan

32:32Ukuran

32:34Sesuai dengan viewport

32:36Viewport, oke

32:38Viewport masing-masing user

32:40Tadi kan kita gak tau user kita

32:42Pakai device apa

32:44Jadi

32:46Tercipta lah kondisi yang best

32:48Kondisi yang itu preload tetapi

32:50Sesuai ukuran

32:52Mantap, baru tau ini

32:54Image source set dan image sizes

32:56Oke, ini

32:58Di apa

33:00Dikombinasikan dengan

33:02Face priority high

33:04Juga bisa ya

33:06Bisa, sebenernya sama aja

33:08Jadi kalau preload itu sudah highest

33:10Udah paling tinggi ya

33:12Di atasnya

33:14Face priority high berarti

33:16Iya

33:18Preload itu

33:20Bahkan begitu ketemu langsung download

33:22Jadi enak ya

33:24Reasonable defaultnya

33:26Memudahkan ya berarti

33:28Jadi sebenernya

33:30Face priority kan

33:32Masih berantem ya, belum pada

33:34Masih berantem, betul-betul

33:36Kalau ada face priority high

33:38Ada dua atau ada lima, kan dia berantem tuh ya

33:40Bukan, browser itu

33:42Masih berantem

33:44Face priority itu masih baru di Chrome

33:46Oh, belum compact

33:48Belum compact

33:50Sedangkan image source set dan image

33:52Size ini

33:54Sudah lebih menerik ya

33:56Ya, sudah

33:58Nanti lihat aja di Can I use itu sudah

34:00Semua browser sudah mendukung

34:02Jadi lebih bagus

34:04Ini kunci kan

34:06Oke, oke, menarik

34:10Jadi opsinya dua kan ya

34:12Kalau above default

34:14Kita harus ambil

34:16Secepat mungkin, panggil secepat mungkin

34:18Kalau below default

34:20Harus panggil semalas mungkin

34:22Place in load

34:24Oke

34:26Kalau malas-malas, tolong bilang

34:28Malas-malasan panggil image-nya

34:32Oke

34:34Nayut

34:36Itulah gunanya

34:38Ngobrolin mu ya

34:40Terus, kalau priority

34:44Hints, ini apa priority hints

34:46Priority hints itu yang face priority

34:50Face priority itu

34:52Untuk

34:54Jadi saat base load

34:56Nge-parsing HTML

34:58Si browser itu

35:00Nge-parsing HTML

35:02Jadi kalau kita ketemu face

35:04Priority hints itu

35:08Ya, masih tahu

35:10Ini dibutuhkan lebih awal

35:12Maka untuk

35:14Di waterfall

35:16Untuk download resource-resource itu

35:18Ya, lebih tinggi

35:20Tertinggi itu adalah preload

35:22Preload dan preface

35:24Jadi DNS

35:26Preface, preload itu

35:28Sangat tinggi

35:30Sedangkan kalau kita tagging

35:32tertentu

35:34Mungkin teman-teman nggak cuma image ya

35:36Video kali ya

35:38Jadi kita mau

35:40Video itu pengen muncul

35:42Secepatnya bagi user

35:44Bisa aja kalian kasih face priority

35:46Kalau memang putus cepat itu

35:48Tapi dia nggak bisa

35:50Override, nggak bisa nandingin

35:52Si preload dan preface

35:54Tadi ya

35:56Salah satu casenya adalah

35:58Kalau misalkan kita punya hero image

36:00Seperti ini

36:02Hero image seperti ini

36:04Kalau kita face prioritynya auto

36:06Atau tidak menggunakan face priority

36:08Dia justru di download

36:10Sudah terlambat

36:12Udah duluan image-image yang lain

36:14Yang dibawah-bawah sini yang sebenarnya

36:16Bukan menjadi highlight di face ini kan

36:18Bukan

36:20LCP juga

36:22Iya, menyebabkan LCP jadi

36:24LCP dan CLS

36:26CLS kalau shift

36:28Geser ke bawah

36:30Bisa juga kan kemungkinan dia

36:32Largest meaningful

36:34Largest content itu

36:36Largest content full pain

36:38Bisa jadi itu jadi elemen

36:40Paling dominan atau content paling dominan

36:42Di viewport atas kan

36:44Kita tambahkan face prioritynya

36:46Jadi high

36:48Selain high ada low

36:50Yang paling rendah dan auto itu terserah sama browser

36:52Jadi kalau yang ini auto

36:54Suka-suka browser aja

36:56Sesempetnya

36:58Nah ketika kita ganti

37:00Akhirnya dia menjadi yang lain

37:02Ditunda dulu

37:04Si hero image ini dulu yang

37:06Di download dan di render

37:08Itulah kira-kira

37:10Benar gak

37:12Nah cuma ini bisa munculin masalah

37:14Nggak sih nimbulin masalah

37:16Dengan kemampuan buat

37:18Customize priority

37:20Sebetulnya istilah yang

37:22Sering muncul juga secara umum di luar development pun

37:24Kalau semua hal penting

37:26If everything is important

37:28Jadi ada yang penting deh

37:30Karena semua ada yang gak penting kan

37:32Nah ini kan ngaruh juga nih

37:34Misalnya kalau kasus ekstrimnya

37:36Semua di pre-fetch atau pre-load

37:38Servernya justru apa

37:40Sibuk manggilin file-file itu

37:42Nggak sempet

37:44Berkurang waktu, kedilai waktu

37:46Buat memproses yang lain

37:48Priority-nya high

37:50Banyak yang high malah jadi

37:52Malah jadi clogging juga

37:54Menum-menuhin antrian

37:56Nah ini mungkin bisa jadi masalah

37:58Kalau komponen ya

38:00Kalau komponen base apa

38:02UI kita banyak pakai komponen kecil-kecil

38:04Misalnya skenario yang kebayang

38:06Ini hypothetical sih

38:08Belum pernah ngalamin sendiri, tapi kan mungkin

38:10Misalnya tadi banner yang di atas

38:12Itu hero-komponen

38:14Di komponennya pake fetch

38:16Priority high karena tadinya di atas

38:18Tapi terus ada request dari

38:20Product owner atau yang lain

38:22Bahwa di atasnya lagi

38:24Ada banner lain, mungkin karena ada program

38:26Atau promo lain kan, itu ke push ke bawah

38:28Nah yang di atas itu juga fetch

38:30Priority-nya high, karena dia di atas

38:32Cuma mungkin

38:34Yang ngerjain misalnya anggaplah itu

38:36Developer lain yang lupa

38:38Ngilangin prioritas dari

38:40Komponen yang paling bawah

38:42Atau pada pakai

38:44Micro front-end

38:46Pada pakai micro front-end

38:48Terus mikirin komponennya

38:50Dia sendiri bisa jadi

38:52Iya

38:54Make sense sih, maksudnya

38:56Hero image gitu kan, misalkan udah

38:58Face priority high, maksudnya sih

39:00Begitu tambahin banner di atas, terus kita bikin itu

39:02Jadi low atau dihilangkan, kayaknya

39:04Jarang, kayaknya

39:06Gak bakal kita lakukan, kecuali kalau

39:08Ada yang notice kan

39:10Tolong ini face priority-nya

39:12Dijadikan auto lagi, atau dijadikan low

39:14Berarti itu harus jadi pertimbangan juga

39:16Karena kan dia sebetulnya secara

39:18Fungsi dan prioritas kan, dia ke push

39:20Malah mungkin kedorong gak terlalu

39:22Above the fold, misalnya yang jadi

39:24Penting, yang banner baru

39:26Nah berarti kita sebagai developer juga harus

39:28Ingat bahwa ada

39:30Ada hal seperti itu ya

39:32Iya, itu harus

39:34Didokumentasikan juga

39:36Maksudnya dijelaskan di spesifikasi

39:38Pada saat kita mau ngerjainnya

39:40Tolong yang ini

39:42Kalau ada yang di pindah ke atas, yang sebelumnya di atas

39:44Harus diturunin prioritasnya

39:46Iya ya, benar juga ya

39:48Semakin kompleks jadinya ya

39:50Makin canggih, makin banyak yang harus diurus

39:54Betul, makin banyak

39:56Yang harus diurus

39:58Oke, oke

40:00Semakin seru

40:02Perbincangan kita, terus gimana?

40:04Masalah performance lainnya

40:06Ini CLS, nah

40:08Menghandle CLS

40:10Gimana tuh?

40:12Gampang-gampang susah

40:14Misalnya tadi

40:16Kalau image-nya sudah

40:18Kan kita udah tahu ya

40:20Ukuran image, feature image itu berapa

40:22Apalagi dengan kondisi

40:24Yang kita sudah ada di automatic resize

40:26Atau pakai CDN

40:28Kita udah tahu nih

40:30Ukuran image, feature image itu

40:32Sudah tahu berapa

40:34Jadi gini

40:36Kita, mungkin kita nanti akan bahas lagi

40:38CLS di

40:40Satu babak sendiri

40:42Karena itu bisa panjang ceritanya

40:44Pertama, untuk mengetahui

40:48CLS itu

40:50Tidak hanya terjadi untuk di page load saja

40:52Itu

40:54Pernyataan saya yang pertama

40:56CLS itu terjadi

40:58Selama alaman itu hidup

41:00Rendering

41:02Tidak, selama kita scroll

41:04CLS itu akan terjadi

41:06Dan itu akan di counting

41:08Nanti akan ada window session dan perhitungan itu ada

41:10Nanti kita bahas

41:12Tapi seru nih

41:14Jadi

41:16Kita bicarakan feature image

41:18Yang above the fold dulu

41:20Supaya jangan terjadi CLS

41:22Pastinya tambahkan image

41:24Attribute width dan height

41:26Pastikan

41:28Dan di CSS

41:30Pastikan jangan dikasih minimum height

41:32Ya

41:34Kita

41:36Assumsi nya kan mobile ya

41:38Tambahkan minimum height

41:40Dan width nya 100%

41:42Misalnya kalau ini full ya

41:44Jadi, pastikan

41:46Terus pertanyaannya

41:48Kalau kita yang

41:50Below the fold kan ada image

41:52Loading lazy ya

41:54Itu gimana? Itu bisa terjadi

41:56Jadi CLS enggak?

41:58Jawabannya yes and no

42:00Oke

42:02It depends

42:04Iya

42:06CLS itu hanya terjadi jika

42:08Image nya

42:10Apa jika

42:12Layout shift terjadi

42:14Di dalam viewport

42:16Ya, di dalam viewport

42:18Jadi kalau si user yang scroll terlalu cepat

42:20CLS terjadi

42:22Tapi kalau loading lazy itu

42:24Dia mengambil

42:26Dua viewport ke bawah sudah di load

42:28Jadi kalau kita masih di sini

42:30Loading lazy attribute

42:32Yang bawaan maksudnya ya

42:34Jadi

42:36Anggapannya beginilah ya

42:38Gimana ya posisinya enaknya ya

42:40Gak punya dua handphone saya

42:42Ini deh

42:44Satu screen itu satu

42:46Viewport

42:48Yang di sini

42:50Nah, yang di sini

42:52Loading lazy itu akan

42:56Nge-load

42:58Yang di bawah sini

43:00Jadi di next viewport dia sudah load

43:02Yang dua tidak

43:04Jadi

43:06Begitu ini mundur ke bawah

43:08Yang di viewport ketiga

43:10Dia sudah load

43:12Jadi sebelum image itu masuk

43:14Ke dalam viewport, loading lazy itu sudah

43:16Udah download

43:18Jadi user enggak lihat pas

43:20Containernya melar ya

43:22Ya, layout shift

43:24Terjadi di luar viewport

43:26Itu tidak dianggap CLS

43:28Nah, ini penting diingat juga

43:30Buat yang hand roll apa

43:32Yang nulis sendiri

43:34Pake intersection observer ya

43:36Jadi pastikan nge-setting apa

43:38Boundary-nya, nge-trigger-nya

43:40Event-nya

43:42Manggil callback tuh saat

43:44Boundary-nya harus minus, jangan pas masuk

43:46Viewport-nya

43:48Kalau content visibility

43:50Akan ngaruh nggak sih?

43:52Karena kan ada sedikit perbedaan

43:54Antara loading lazy

43:58Dengan content visibility kan

44:00Kalau content visibility ini

44:02Gambarnya tetap di download

44:04Tapi belum di render

44:06Oh, jadi sudah

44:08Ketika sudah mendekati, baru di render

44:10Ya

44:12Itu apa lagi tuh?

44:14Content visibility, CSS content visibility

44:16Oh, ada ya? Belum pernah pakai

44:18Belum pernah ya

44:20Nah, ini ada CSS namanya content visibility

44:22Cuman

44:24Ini sedikit apa ya

44:26Support-nya juga pasti aneh nih

44:28Support-nya pasti

44:30Belang-belang

44:32Jadi dia menunda proses rendering

44:34Gambarnya, tapi download-nya

44:36Tetap, gitu

44:38Kalau browser sudah idle ya

44:40Sudah nyantai

44:42Jadi

44:44Ini tuh mungkin bisa

44:46Bisa improve total blocking

44:48Kali ya, maksudnya jadi

44:50Browser main thread-nya nggak sibuk

44:52Berusaha ngerender kan, kalau belum perlu

44:54Jadi semacam

44:56Virtual window

44:58Eh, virtual window sih

45:00Apa sih itu kalau kita ngerender

45:02List element banyak banget

45:04Nggak semua di render sekaligus

45:06Bukan namanya apa

45:08Ya, itulah

45:10Cuma ini buat image

45:12Khusus buat image ya

45:14Jadi, di sini

45:16Dilaskan kalau

45:18Dia ngerender seluruh halaman bisa

45:20232 ms

45:22Tapi kalau dia pakai content visibility

45:24Hanya 30, udah dia nggak selesai

45:26Walaupun di bawahnya itu belum ngerender

45:28Tapi image-nya sudah didownload

45:30Nah

45:32Ini sudah bisa untuk Chrome dan Edge

45:34Yang lainnya belum

45:36Chromium doang ini sih

45:38Ya, tapi lumayan lah

45:40Ini kan, apa ya, enhancement

45:42Bukan main feature, cuma enhancement

45:44Ya

45:46Jadi ini mungkin ada

45:48Ada sedikit pengaruhnya ke

45:50Layout sieve itu, karena

45:52Image-nya dia udah tahu nih

45:54Image-nya udah didownload, otomatis ukurannya

45:56Dia tahu kan, panjang lebarannya dia tahu kan

45:58Jadi dia sudah mengkalkulasi

46:00Si

46:02Layout-nya, tinggal dirender aja

46:04Gitu

46:06Dan bisa di set juga ukurannya

46:08Apa namanya

46:10Mau berapa ininya

46:12Viewport-nya ya

46:14Apa sih itu

46:16Jadi ada, nah seperti ini, size-nya

46:18Apa tuh? Contains Intrinsic Sizes

46:22Contains Intrinsic Sizes

46:24Coba tuh, next section

46:26Explain in the next section

46:28In order to realize the potential benefit of content visibility

46:30The browser need to apply size containment

46:32To ensure that rendering result

46:34Contains do not affect the size element in any way

46:36Baik gitu

46:40Yes

46:42Jadi, this means that

46:44The element will layout as if it was empty

46:46Oh berarti, kita tetep harus

46:52Ngeset, ya itu tadi

46:54Size attribute-nya, width sama height-nya

46:56Tetep harus ada

46:58Tetep harus ditambahkan di itu ya

47:00Di image ya

47:02Jadi tadi ada beberapa layer kan

47:04Untuk menentukan ukuran, pertama

47:06Harus di image element-nya sendiri, walaupun

47:08Nanti, apa, kalau image

47:10Width sama height attribute

47:12Di element image kan

47:14Harus number ya, cuma harus angka

47:16Misalnya 600x300

47:18Walaupun nanti kan

47:20Mungkin, bukan mungkin, tapi pasti

47:22Menyesuaikan ukuran device kan

47:24Karena kita bakal ngestyle lagi di layer

47:26Kedua dengan CSS

47:28Nggak mungkin semua

47:30Ngerender 600, bisa aja 100%

47:32100% itu kan ada kalkulasi-nya sendiri

47:34Waktu

47:36Browser parsing CSS ya

47:38Itung 100%-nya dia itu berapa

47:40Nah, jadi itu pertama di image

47:42Element-nya sendiri, di markup-nya

47:44Terus di CSS

47:46Nah, terus baru bisa

47:48Pakai tambahan ini tadi kan

47:50Content

47:52Ini sudah, jadi

47:54Kalau dia pakai

47:56Kembali ke kondensasi mereka

47:58Maksudnya, si browser nggak ngerender

48:00Kalau

48:02Kalau belum mau ditampil

48:04Kalau belum nyampe

48:06Mungkin 2-3 viewport sebelum itu

48:08Kayak yang tadi dijelasin

48:10Menarik ya

48:14Oke ya

48:16Abis ini pasti langsung nyoba

48:18Iya dong, langsung coba

48:20Walaupun sayangnya support-nya

48:22Masih Chromium only ya

48:24Terus, ngomong-ngomong CSS

48:26Ada lagi nih, yang penting, maksudnya yang berguna banget nih

48:28CSS udah ada

48:30Aspek rasio kan, ada proporsi aspek rasio

48:32Dan itu support-nya sudah

48:34Bagus banget, cross-browser semua ada

48:36Jadi kalau dalam kasus tertentu

48:38Kita kan mungkin udah

48:40Tahu rasio ukurannya

48:42Misalnya thumbnail itu

48:44Selalu square

48:46Berarti 1/1

48:48Atau berapa lah

48:5016/9, jadi kalau

48:52Dalam kasus yang kita udah

48:54Tahu rasio image-nya

48:56Bisa di setting aja container-nya

48:58Pakai CSS sudah, nggak usah

49:00Saya bingung lagi

49:02Kalau dulu harus nambahin padding, top

49:04Dulu pakai hack

49:06Dulu pakai hack padding sebelum

49:08Aspek rasio itu supported, sekarang

49:10Segampang, udah aspek rasio 0.2

49:1216/9

49:14Terus kalau

49:16Itu sudah support semua browser kan

49:18Kalau nggak salah safari belum deh

49:20Eh coba ya

49:22Penasaran

49:24Coba kena use-nya

49:26Karena aku pernah mau pake itu

49:28Tapi nggak jadi

49:30Coba, use apa nih

49:32Aspek rasio

49:34Udah

49:36Kecuali IE

49:38Kecuali IE

49:40IE mah, nggak usah dipikir

49:42Ya maksudnya

49:44Kalau IE mah, emang semua yang baru

49:46Sudah resintis ya

49:48Udah legacy

49:50Sudah legacy

49:52IE 11 loh, nggak bisa ya

49:54Tapi ini udah ijo semua sih

49:56Ya relatif aman lah

49:58Kalau kita pakainya

50:00Di IE itu sendiri

50:02Misalnya aspek rasio-nya dipakai di

50:04IE sendiri, bukan kontainernya

50:06Pastikan juga pakai objek fit ya

50:08CSS property objek fit

50:10Biar nggak

50:12Gepeng, waktu ngeresize

50:14Ya

50:16Nah ini mempermudah sekali nih

50:18Kalau kita bermain-main dengan

50:20Ukuran IE yang tidak standar

50:22Ada yang 16/9, ada yang

50:244/3, ada yang

50:261x1, macem-macem

50:28Sementara source image-nya belum tentu

50:30Sesuai

50:32Belum tentu sesuai

50:34Akan sangat berguna

50:38Untuk dipakai

50:40Terutama untuk bikin

50:42Banyak web yang ada

50:44Hubungannya dengan image yang

50:46Ukurannya berbeda-beda

50:48Oke, menarik-menarik

50:50Banyak belajar ya kita malam ini

50:52Padahal image doang ya

50:54Image doang ya

50:56Masalahnya semua website

50:58Hampir semua website ada image

51:00Itu konten yang sangat nggak bisa dihindari

51:02Betul, apalagi

51:04Landing page

51:06Harus menghindari pernyataan doang

51:08Karena web itu nggak ada yang kata doang

51:10Semua bagian itu

51:12Dalam banget

51:14Padahal image doang

51:16Padahal

51:18Nggak ada image doang

51:20Image kan salah satu elemen

51:22HTML yang paling tua kan

51:24Dari tahun 1993 lah

51:26Betul

51:28Sebenarnya

51:30Tredy itu lebih banyak

51:32Ngomongin jepang skill pada

51:34Elemen utama dari

51:36Web itu, image dan

51:38Text

51:40Video terakhir

51:42Video baru sekarang-sekarang ini ya

51:44Video mulai

51:46Muncul, mulai banyak digunakan

51:48Untuk landing page juga

51:50Ada background video dan lain-lain

51:52Tapi di tahun lalu

51:54Oh ya video, harus ada video

51:56Tapi di tahun lalu, di bulan Juni

51:58Kalau nggak salah

52:00Di Web Almanak, di HTTP Archive itu

52:02Ada yang menarik

52:04Jadi dari 100%

52:06Pengguna mobile

52:08Web gitu ya

52:10Yang membuka

52:12Aplikasi web lewat mobile

52:1456% itu adalah image

52:16Hmm, ada statistiknya ya

52:18Menarik

52:2044% itu adalah gabungan dari

52:22HTML, CSS, dan JavaScript

52:24Jadi HTML, CSS, dan JavaScript digabungin

52:26Masih lebih gede image

52:28Itu dari size nya

52:30Atau dari?

52:32Ya size, ukurannya

52:34Itu juga gara-gara elemen yang

52:36Cuma nampilin satu image

52:38Ukurannya 4000 pixel

52:40Ya itu ada

52:42Contribusinya juga, tapi

52:44Karena image ini kompresinya kan

52:46Tidak

52:48Tidak bisa

52:50Sekecil text kan

52:52HTML, CSS, JavaScript kan text ya

52:54Dan font juga ditambah font lagi

52:56Itu kan text ya

52:58Jadi kompresinya sangat kecil

53:00Tapi kalau image kan nggak bisa sekecil itu

53:02Kalau kecil nanti ngeblur semua

53:04Jelek kan, jadi harus

53:06Menyeimbangkan antara

53:08Masih enak dilihat dengan ukuran

53:10Yang ramah

53:12Sama

53:14Apa ya, sama koneksi

53:16Pengguna gitu

53:18Ukuran dan strategi lazy loading ya

53:20Kalau sekarang itu jadi penting banget

53:22Salah satu strategi

53:24Lazy load itu

53:26Dia pakai ini lho, pakai

53:28Saat image itu

53:32Deload, dia pakai image yang

53:34Low resolution yang hitam putih

53:36Oh ya, background image

53:38Nah ada tuh

53:40Coba buka linknya

53:42Cloudinary dibuatin langsung

53:44Terus otomatis dibikinin

53:46Cuma ada tuh, coba buka

53:48Blur hash, kalau kita nggak pakai

53:50Cloudinary yang ngasih langsung

53:52Bisa pakai, ini nih ada

53:54Library-nya

53:56Blur hash, ini cara pakainya gimana

53:58Ya library, install aja

54:00Oh library

54:02Terus ukuran-ukurannya semua

54:04Oh dibikinin sama dia ya

54:06Oke

54:08Ya sama Cloudinary juga

54:10Mau saya pakai teknologi, jadi Blur hash itu

54:12Ternyata ada algoritmanya

54:14Ini dibikin berdasarkan algoritma

54:16Tertentu, jadi dia kayak ngambil

54:18Bagian-bagian yang dominan

54:20Dia kan harus ngedetek image-nya dulu tuh

54:22Warnanya apa aja, bagian mana yang

54:24Kontrasnya mencolok, baru dia

54:26Bikin si Blur hash yang

54:28Di kotak paling kanan itu

54:30Jadi sebenarnya itu ternyata ada

54:32Algoritmanya, cuma ya bisa

54:34Diinterpretasi macem-macem

54:36Berbagai cara oleh library

54:38Nah ini salah satu library yang

54:40Paling populer lah

54:42Bisa jalanin

54:44Cara sederhananya, cara sederhananya

54:46Saya bahas juga kemarin waktu itu

54:48Nah gini aja cara sederhananya

54:50Jadi kita bikin image versi yang lebih kecil

54:52Misalkan 42x42

54:54Terus kita load sebagai

54:56CSS atau style

54:58Background image, jadi dia ngeblur

55:00Distress, jangan lupa width sama height-nya

55:02Disesuaikan dengan ukuran image yang

55:04Kita inginkan ya

55:06Kalau gak set ukuran

55:08Nanti gak muncul

55:10Gak muncul, kecil banget

55:12Ada di pojokan doang kan

55:14Ini adalah gambar gitar yang tadi

55:16Jadi sebenarnya

55:18Image-nya itu tetap ada di belakang

55:20Jadi begitu image yang benerannya

55:22Udah muncul, dia akan menimpa

55:24Si Blur image tadi

55:26Itu kalau rajin

55:28Kalau triknya orang males, developer males

55:30Background-nya itu warna abu-abu

55:32Oh iya bener

55:34Opacity layer

55:36Misalnya opacity layer

55:38RGB

55:40255,255

55:42Alphananya 0,1

55:44Itu trik favorit

55:46Bisa on the fly juga ya

55:48Jadi gak perlu di convert dulu ya

55:50Kalau ini kan perlu di convert manual kan

55:52Tapi kalau secara estetis mungkin

55:54Kalau dari kebutuhan produk atau klien

55:56Itu kan kotak abu-abu doang

55:58Kotak opacity kurang menarik

56:00Jadi kita tetap

56:02Bisa pake 2 trik

56:04Entah pake Blur hash atau tadi

56:06Resize jadi kecil

56:08Dijadiin background image

56:10Mana contohnya

56:12Ini gak ada contohnya ya

56:14Di bawah coba

56:16Ada di github-nya

56:18Wah banyak bahasa

56:20Mana

56:22Contoh kodenya

56:24Gak ada

56:26Ini ada di github-nya tuh

56:28Oh ini

56:30Di sini

56:32Coba klik java script

56:34Java script

56:36Ini

56:38Blur hash JS

56:40Oh dia ada banyak

56:42Nah ini ya

56:44Scriptnya di load dulu

56:46Kemudian

56:48Apa ini

56:50Encode di code

56:52Get image data as image

56:56Switch on load

56:58Promise

57:00Get image data as image

57:02Mana dia

57:04Oh ini encode ya, encode promise bukan

57:06Oh ada yang

57:08Type script-nya juga malah lebih

57:10Enak di lihat tuh, mirip sih

57:12Oh ya, Type script implementation

57:14Mana dia

57:16Kelewat, ini dia

57:18NPM install

57:22Kemudian decode

57:24Decode ini

57:26Ini decode-nya dari mana

57:28Decode dari

57:30Hash-nya

57:32Encode ya, encode dulu ya

57:34Kita butuhnya encode

57:36Encode dulu

57:38Jadi ini bisa auto

57:40Sebelum mati sih cara pakaian

57:42Dan gue lihat dulu deh

57:44Harus dicoba sih

57:46Nanti, hasil-hasil

57:48Ini sebaiknya di buffer

57:50Hasilnya base 64

57:52Hash gitu

57:54Ini kan, hasilnya kan

57:56Jadi bisa inline

57:58Oh iya bener, kalau ini

58:00Jadi berubah dia

58:02Keren sekali konsepnya

58:04Jadi inline ya

58:06Ya iya, base 64 gitu

58:08Buat inline source

58:10Ya, dipotong abis itu kan

58:12Supaya dia jadi mengecil ya

58:14Belajar lagi nih hari ini kan

58:16Only 20 and 30 characters

58:18Ini kan mungkin

58:20Kalau ribet ya

58:22Kalau gue sih kadang cari aja base 64

58:24Converter, maksudnya kalau cuma 1-2 gambar

58:26Kan gak worth it juga kan nih

58:28Kurang worth it buat

58:30Configure satu setup sendiri

58:32Ya ketengan aja

58:34Di convert ke base 64

58:36Kalau static base iya

58:38Tapi kalau

58:40Optimasi gede banget

58:42Kan gak bisa ya

58:44Yang tergantung situasi

58:46Kalau udah besar baru dipikir-pikir gini

58:48Kalau cuma buat 1-2

58:501-2 tempat

58:52Di satu static page ya

58:54Gak usah buat apa

58:56Manual aja

58:58Tapi kan yang penting kita tahu dulu

59:00Senjatanya banyak nih

59:02Tinggal pilih senjata yang mana

59:04Eh ini

59:06Di WordPress ada gak nih pluginnya

59:08Pasti ada lah yakin

59:10Ini PHP, oh udah ada PHP

59:12Ini pasti udah ada yang bikin

59:14Plugin sendiri

59:16Pasti

59:18Buru khas

59:20Kayaknya penggunaan PHP paling besar

59:22Itu dari WordPress

59:24Ecosystem deh

59:26Yang jaman sekarang

59:28Iya dong

59:30Jadi

59:32Laravel juga

59:34Oh iya

59:36Atau pengguna itu mungkin

59:38Yang jarang kedengar kan yang pakai Z-Frame

59:40Enterprise itu kan game team aja

59:42Itu kan

59:44Udah gak kedengaran tapi ya

59:46Yang pakai ya banyak ya

59:48Oke, oke

59:54Ada lagi yang mau dibahas?

59:56Kita sudah satu jam?

59:58Gak ada, pas ya bisa

1:00:00Pas abis beneran loh

1:00:02Oke

1:00:06Ivan, ada lagi?

1:00:08Wajangan

1:00:12Wajangan terakhir

1:00:14Wajangan penutup bukan

1:00:16Ujangan apa

1:00:18Kalau mau tips

1:00:20Nampilin image

1:00:22Pakailah image sesuai ukuran

1:00:26Jangan lupa kasih image

1:00:28Height dan attribute

1:00:30Dan

1:00:32Lazy load

1:00:34Semua image di bawah

1:00:36Viewport, di bawah default

1:00:38Yang default

1:00:40Preload

1:00:42Secepat mungkin

1:00:44Supaya lcp nya bagus

1:00:46Dan

1:00:48Pakai image height

1:00:50Dan attribute height dan width

1:00:52Supaya tidak terjadi CLS

1:00:54Oh iya

1:00:56Jadi ingat alt

1:00:58Pakai alt tag, sebisa mungkin

1:01:00Kalau kita bisa pakai alt tag

1:01:02Untuk aksesibilitas

1:01:04Jadi kalau misalnya

1:01:06User yang pakai

1:01:08Ngaruh ke SEO juga

1:01:10Jadi kalau user yang pakai

1:01:12Screen reader, misalnya yang

1:01:14Tuna Netra atau Lovision

1:01:16Itu bisa di narrate, itu gambar apa

1:01:18Nah, berguna juga untuk SEO

1:01:20Kalau user cari, ngetik

1:01:22Gambar tertentu

1:01:24Sesuai keyword nya, itu bisa masuk

1:01:26Cuma yang harus dihindari

1:01:28Jangan, kalau misalnya

1:01:30Image nya user generated

1:01:32Atau kita emang gak bisa

1:01:34Apa, itu dynamic ya

1:01:36Kita gak bisa ngasih alt text yang bermakna

1:01:38Jangan nulis alt text asal-asalan

1:01:40Karena justru

1:01:42Apa, bakal merusak experience

1:01:44Buat tadi screen reader user

1:01:46Bisa pakai chat GPT

1:01:48Chat GPT untuk

1:01:50Stable diffusion

1:01:54Tapi jangan, kalau asal-asala

1:01:56Nanti ngerusak SEO juga kan

1:01:58Kalau konten nya ngacu

1:02:00Nah, kalau misalnya kita

1:02:02Gak bisa ngasih alt text yang bermakna

1:02:04Alt attribute nya

1:02:06Jangan dihilangin

1:02:08Jadi, best practice nya itu tetap pakai alt

1:02:10Tapi sama dengan empty string

1:02:12Jadi, harus seperti itu

1:02:14Empty string, kosong

1:02:16Itu udah minimal banget ya

1:02:18Karena kalau gak

1:02:20Screen reader

1:02:22Itu

1:02:24Kalau gak ada altnya, bakal

1:02:26Ngebaca something like

1:02:28No image, kan mengganggu ya

1:02:30Jadi, lebih baik altnya

1:02:32Karena string kosong itu bakal di-skip

1:02:34Betul

1:02:36Dan juga, mungkin akan berguna

1:02:38Ketika image nya broken

1:02:40Misalkan image nya pindah, kita lupa

1:02:42Itu alt nya yang muncul kan

1:02:44Muncul, iya

1:02:46Jadi, keguguran nya banyak

1:02:48Image itu kalau di mobile

1:02:50Kasih, kalau memang

1:02:52Dia butuhnya

1:02:54Constraint nya ya, pasti

1:02:56Jangan sampai overflow

1:02:58Paling sering image itu ngedorong

1:03:00Itu

1:03:02Itu kebantu

1:03:04Kalau kita pakai

1:03:06CSS reset apapun

1:03:08Itu

1:03:10Udah kebantu sih, biasanya ada

1:03:12Max width nya

1:03:14Image itu max width nya 100%

1:03:16Tapi kalau kita gak pakai itu

1:03:18Ya, atau punya apapun itu

1:03:20Pastikan bahwa ada max width

1:03:22100% ya, biar gak melar

1:03:24Oke

1:03:26Oke, kalau gitu

1:03:28Tadi adalah kesimpulan

1:03:30Dari apa yang kita omongkan dari awal

1:03:32Pejangan image

1:03:34Sampai

1:03:36Penghujung acara

1:03:38Jangan lupa, topik atau tautan

1:03:40Dan pertanyaan menarik bisa dilayangkan ke

1:03:42bit.ly/ngobrolinweb

1:03:44Mungkin untuk malam ini sekian dulu

1:03:46Kita jumpa lagi

1:03:48Di episode berikutnya

1:03:50Selasa depan

1:03:52Dengan topik yang berbeda

1:03:56Jadi untuk malam ini

1:03:58Udahan dulu, selamat malam, selamat istirahat

1:04:00Sampai jumpa

1:04:02Di episode berikutnya

1:04:04Dadah