Temui Pengoptimalan Gambar, Buku Hebat Baru Oleh Addy Osmani

Gambar telah menjadi bagian penting dari web selama beberapa dekade. Otak kita menafsirkan gambar jauh lebih cepat daripada teks, itulah sebabnya visual berkualitas tinggi mendorong konversi dan keterlibatan pengguna. Pikirkan tentang halaman arahan dan foto produk, panel fitur, dan area pahlawan. Agar efektif, semua gambar ini perlu diatur dengan cermat agar muncul di layar dengan cepat – tetapi ternyata, memuat gambar secara efisien dalam skala besar bukanlah proyek untuk sore yang tenang.

Pengoptimalan gambar , perilaku pemuatan, dan rendering di browser memerlukan pemahaman tentang format gambar dan teknik kompresi gambar, dekode gambar dan rendering browser, CDN gambar, dan pemuatan media adaptif, serta caching dan preloading yang efektif. Mari kita cari tahu semuanya.

Untuk panduan menyeluruh tentang pengoptimalan gambar, kami telah bekerja sama dengan Addy Osmani , seorang manajer insinyur yang bekerja di Google Chrome dan berfokus pada kinerja selama beberapa dekade. Hasilnya adalah sebuah buku dengan semua yang Anda butuhkan untuk mengoptimalkan gambar Anda dan menampilkannya dengan cepat, tanpa memperlambat prosesnya.

Tentang Buku

Di samping video, gambar adalah aset yang paling berat dan paling banyak diminta di web. Beberapa penghematan ukuran terbesar dan peningkatan kinerja dapat diperoleh melalui strategi pengoptimalan gambar yang lebih baik. Jadi, bagaimana cara kami menyandikan, menerapkan, menyajikan, dan memelihara gambar dari waktu ke waktu? Buku baru kami membahas hal itu. Periksa pratinjau PDF gratis (3MB).

Temui buku baru kami "Pengoptimalan Gambar" dengan semua yang perlu Anda ketahui untuk mendapatkan gambar di web dengan benar.

Buku baru Addy berfokus pada hal-hal yang penting : pendekatan modern untuk kompresi gambar dan pengiriman gambar, alat dan teknik praktis untuk mengotomatiskan pengoptimalan , gambar responsif, format gambar saat ini dan yang sedang berkembang, cara browser memuat, mendekode dan merender gambar, CDN, pemuatan lambat, adaptif pemuatan media dan cara mengoptimalkan Core Web Vitals. Semuanya dalam satu, buku tunggal, 528 halaman.

Pengoptimalan Gambar akan membantu Anda memberikan gambar responsif berkualitas tinggi dalam format dan ukuran terbaik, dan pada saat pengguna sangat membutuhkannya. Dikemas dengan tip dan teknik yang berguna , buku ini memiliki fokus yang tajam pada aplikasi praktis dan umur panjang dari strategi pengoptimalan gambar Anda. Lompat ke daftar isi ↓

Anda akan belajar:

  • format gambar,
  • kompresi gambar ,
  • meningkatkan rendering gambar,
  • menyiapkan gambar untuk berbagai resolusi,
  • mengotomatiskan pengoptimalan gambar ,
  • pemeliharaan gambar,
  • pemuatan lambat dan teknik seperti SQIP,
  • image CDN, dan cara menyiapkannya,
  • AVIF, JPEG XL, dan HEIF , pro dan kontra,
  • Core Web Vitals dan cara mengoptimalkannya,
  • pengiriman gambar adaptif untuk kondisi jaringan.

Sekilas tentang buku ini, dengan 528 halaman tentang segala hal tentang pengoptimalan gambar. Tampilan besar .

Daftar isi

Gambar membantu kami menceritakan sebuah kisah dan lebih terlibat dengan pelanggan kami. Tidak ada kekurangan foto berkualitas tinggi di sekitar kita, tetapi bagaimana cara kita menyandikan, menyebarkan, melayani, dan memeliharanya?

23 bab dari buku baru kami yang mengkilap mengeksplorasi hal itu.

1. Elemen <img> Rendah Hati
+

<img> rendah hati telah mendapatkan beberapa kekuatan super selama bertahun-tahun. Mengingat betapa pentingnya pengoptimalan gambar di web, mari kita ikuti apa yang dapat dilakukannya.

2. Mengoptimalkan Kualitas Gambar
+

Sebagian besar alat pengoptimalan memungkinkan Anda menyetel tingkat kualitas yang Anda sukai. Kualitas yang lebih rendah mengurangi ukuran file tetapi dapat menyebabkan artefak, lingkaran cahaya, atau degradasi kotak-kotak.

3. Membandingkan Format Gambar
+

Setiap format gambar baru memiliki rentang keefektifan jika Anda membandingkan dan menyelaraskan pada "kualitas" pengalaman yang konsisten. Dalam bab ini, kita akan mengeksplorasi tantangan dalam menentukan kualitas dan menetapkan ekspektasi saat mengubah format.

4. Manajemen Warna
+

Idealnya, setiap layar dan browser web di dunia akan menampilkan warna dengan cara yang persis sama. Sayangnya, mereka tidak melakukannya. Manajemen warna memungkinkan kita mencapai kompromi dalam menampilkan warna melalui model warna, ruang, dan profil.

5. Kinerja Decoding Gambar
+

Seberapa cepat gambar dapat didekodekan menentukan seberapa cepat browser dapat menampilkannya kepada pengguna. Menjaga agar ini tetap efisien membantu memastikan pengalaman pengguna yang baik. Mari kita gali lebih dalam decoding gambar untuk memahami bagaimana kinerja browser di balik layar dan bagaimana Anda dapat mengontrol decoding.

6. Mengukur Performa Gambar
+

Di bab ini, kita akan melihat cara menggunakan Lighthouse untuk mengaudit gambar yang tidak dioptimalkan dan cara memantau anggaran performa web untuk gambar.

7. JPEG
+

JPEG mungkin adalah format gambar yang paling banyak digunakan di dunia. Mari kita periksa mode kompresi JPEG karena ini dapat berdampak signifikan pada kinerja yang dirasakan.

8. PNG
+

Dari dasar hingga mode palet, transparansi indeks dan alfa, serta tip kompresi, dalam bab ini kita akan melihat PNG secara mendalam.

9. WebP
+

WebP adalah format gambar yang relatif baru yang dikembangkan dengan tujuan menawarkan ukuran file yang lebih rendah untuk kompresi lossless dan lossy dengan kualitas visual yang dapat diterima. Mari jelajahi cara menggunakan gambar WebP dalam produksi hari ini.

10. SVG
+

Ada beberapa cara untuk mengimplementasikan SVG di halaman web. Dalam bab ini, kita akan melihat berbagai pendekatan dan cara menjaga SVG Anda tetap ramping dan berkinerja.

11. Gambar Responsif
+

Menggunakan gambar responsif adalah bagian penting dari penyampaian desain web yang sepenuhnya responsif. Bab ini membahas teknik untuk menentukan gambar responsif.

12. Teknik Rendering Progresif
+

Ada banyak teknik pemuatan gambar progresif yang dapat mempersingkat waktu muat yang dirasakan. Dalam bab ini, kita akan melihat berbagai cara memuat gambar secara progresif untuk meningkatkan kinerja dan pengalaman pengguna.

13. Mengoptimalkan Permintaan Jaringan dengan Caching dan Preloading
+

Mengunduh file seperti gambar atau video melalui jaringan bisa lambat dan mahal. Cache HTTP, pekerja layanan, penulisan gambar, dan pramuat membantu mengoptimalkan permintaan jaringan. Mari kita telusuri cara kerjanya.

14. Gambar Offscreen Lazy-Loading
+

Halaman web sering kali berisi gambar dalam jumlah besar, yang berkontribusi pada pembengkakan halaman, biaya data, dan seberapa cepat halaman dapat dimuat. Mari kita lihat bagaimana gambar di luar layar yang dimuat dengan lambat dapat membantu memperbaiki situasi.

15. Mengganti GIF Animasi
+

Jika Anda bertujuan untuk meningkatkan kinerja pemuatan laman Anda, GIF animasi tidak terlalu kompatibel dengan tujuan itu. Tetapi ini adalah area kinerja pemuatan di mana, tanpa banyak pekerjaan, Anda bisa mendapatkan keuntungan yang signifikan tanpa kehilangan kualitas konten.

16. Jaringan Pengiriman Konten Gambar
+

Untuk situs dengan lalu lintas besar dan jangkauan global, pengoptimalan dasar pada waktu pembuatan biasanya tidak cukup. CDN membantu tim untuk menangani aset statis yang diketahui sebelumnya serta aset dinamis untuk meningkatkan waktu muat dan keandalan situs.

17. HEIF dan HEIC
+

Meskipun format gambar lain mungkin menawarkan kompatibilitas yang lebih luas, HEIF patut dipahami karena Anda mungkin memiliki pengguna yang ingin menggunakan format ini di iOS.

18. AVIF
+

AVIF bertujuan untuk menghasilkan gambar terkompresi berkualitas tinggi yang kehilangan kualitas sesedikit mungkin selama kompresi. Mari selami lebih dalam tentang fitur, dukungan browser, dan kinerjanya.

19. JPEG XL
+

JPEG XL adalah format gambar tingkat lanjut yang bertujuan untuk memberikan manfaat kompresi yang sangat signifikan dibandingkan JPEG. Dalam bab ini, kita akan melihat lebih dekat apa yang ditawarkannya.

20. Membandingkan Format File Gambar Baru
+

Sementara format gambar baru mendukung sekumpulan kemampuan yang kira-kira sama, kekuatan masing-masing membedakannya. Tabel dalam bab ini bertujuan untuk memberikan ringkasan dari beberapa fitur yang lebih penting dan seberapa baik setiap format menangani berbagai jenis gambar.

21. Menyampaikan Pengalaman Media Ringan dengan Penghemat Data
+

Browser dengan fitur Penghemat Data memberi pengguna kesempatan untuk secara eksplisit memberi tahu kami bahwa mereka ingin menggunakan situs tanpa menghabiskan banyak data. Mari kita lihat cara menggunakan Penghemat Data untuk menghadirkan pengalaman media ringan.

22. Optimalkan Gambar untuk Core Web Vitals
+

Metrik mana yang harus Anda fokuskan untuk meningkatkan pengalaman pengguna? Core Web Vitals berfokus pada tiga aspek utama pengalaman pengguna: pengalaman memuat halaman, kesiapan interaksi, dan stabilitas visual halaman. Mari kita lihat satu per satu.

23. Image Pipeline Twitter (Studi Kasus)
+

Tweet sering kali disertai dengan gambar untuk mengilustrasikan, menghibur, dan meningkatkan keterlibatan pengguna. Itulah mengapa Twitter sangat menekankan pada proses pengoptimalan gambar yang kuat. Studi kasus ini berfokus pada berbagai langkah yang telah diambil Twitter untuk memuat gambar lebih cepat sambil memastikan bahwa gambar berdampak seperti yang dimaksudkan.

528 halaman . EBook tersedia segera (PDF, ePUB, Amazon Kindle). Pengiriman buku cetak akan dimulai akhir Mei . Ditulis oleh Addy Osmani. Didesain oleh Espen Brunborg dan Nadia Snopek.

tentang Penulis

Addy Osmani adalah manajer teknik yang bekerja di Google Chrome. Timnya berfokus pada kecepatan , membantu menjaga web tetap cepat. Didedikasikan untuk komunitas open-source, kontribusi open-source Addy yang lalu termasuk Lighthouse (alat audit untuk kinerja dan praktik terbaik web), Workbox (perpustakaan untuk file cache offline menggunakan pekerja layanan), Yeoman (alat perancah web), Kritis (alat pengoptimalan CSS jalur kritis), dan TodoMVC . Addy adalah penulis buku Learning JavaScript Design Patterns .

Review dan Testimonial

“Gambaran optimal pengoptimalan gambar yang sangat komprehensif. Buku ini akan mengajari Anda semua yang perlu Anda ketahui tentang pengiriman gambar yang efektif dan berperforma di web. ”

Katie Hempenius , Google

Mengoptimalkan pengiriman gambar adalah kunci untuk membangun aplikasi web berkinerja tinggi. Buku ini menjelaskan semua yang perlu diketahui pengembang tentang memilih format gambar yang tepat, mengompresi aset gambar – dan banyak lagi! ”

Mathias Bynens , Google

“Gambar adalah inti dan jiwa web; mereka membantu menciptakan hubungan emosional dengan manusia. Namun, sangat mudah untuk merusak pengalaman itu melalui pemuatan yang lambat atau lebih buruk lagi, mengukur piksel secara berlebihan dan mendistorsi gambar. Memahami bagaimana gambar bekerja sangat penting bagi setiap insinyur; hal terakhir yang kami inginkan adalah menangani bug terbuka dari pengalaman kreatif atau kinerja yang buruk. ”

Colin Bendell , Shopify

Detail Teknis

  • ISBN: 978-3-945749-94-4 (cetak)
  • Sampul tebal berkualitas , penjilidan dijahit, penanda halaman pita.
  • Gratis pengiriman pos udara ke seluruh dunia dari Jerman mulai akhir Mei. Anda dapat langsung mulai membaca eBook.
  • eBook sudah tersedia sebagai PDF, ePUB, dan Amazon Kindle.
  • Dapatkan bukunya segera.

Masalah Komunitas ❤️

Memproduksi buku membutuhkan waktu yang cukup lama, dan kami tidak dapat melakukannya tanpa dukungan dari komunitas kami yang luar biasa. Teriakan besar untuk Anggota Smashing atas dukungan yang baik dan berkelanjutan. EBook ini dan akan selalu gratis untuk Anggota Smashing . Plus, Anggota mendapatkan diskon ramah saat membeli salinan cetak mereka. Katakan saja! 😉

Tetap sukses, dan terima kasih atas dukungan Anda yang tiada henti, semuanya!

Lebih Banyak Smashing Books & Goodies

Mempromosikan praktik terbaik dan memberi Anda tip praktis untuk menguasai coding harian dan tantangan desain selalu (dan akan) menjadi inti dari semua yang kami lakukan di Smashing.

Dalam beberapa tahun terakhir, kami sangat beruntung telah bekerja sama dengan beberapa orang berbakat dan peduli dari komunitas web untuk menerbitkan kekayaan pengalaman mereka sebagai buku cetak yang bertahan dalam ujian waktu . Paulus dan Adam adalah beberapa dari orang-orang ini. Apakah Anda sudah memeriksa buku mereka?

TypeScript Dalam 50 Pelajaran

Semua yang perlu Anda ketahui tentang TypeScript, sistem tipenya, obat generik, dan manfaatnya.

Tambahkan ke troli $ 44

Daftar Periksa Desain Antarmuka (PDF)

100 kartu praktis untuk tantangan desain antarmuka umum.

Tambahkan ke troli $ 15

Pola Desain Bentuk

Panduan praktis untuk merancang dan membuat kode formulir sederhana dan inklusif.

Tambahkan ke keranjang $ 39

April 28, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *