Dalam pengoptimalan situs web, jika gambar dioptimalkan dengan baik, tidak hanya dapat meningkatkan kecepatan pemuatan halaman dan meningkatkan pengalaman pengguna situs web, tetapi juga menghemat bandwidth situs web melalui pengoptimalan gambar. Jadi sebagai insinyur konstruksi halaman, metode apa yang harus digunakan untuk mengoptimalkan gambar, yang tidak hanya memastikan pemulihan UI, tetapi juga membuat gambar menjadi paling efisien? Izinkan saya memperkenalkan secara singkat metode pengoptimalan gambar berdasarkan pengalaman pribadi saya. Pertama, kita memahami beberapa aspek pengetahuan:
1. Grafik vektor dan bitmap.
Grafik vektor: Format gambar yang dapat diperbesar dan diputar tanpa distorsi. Tidak peduli seberapa dekat Anda melihat, Anda tidak dapat melihat unit terkecil dari grafik. File yang disimpan lebih kecil, namun sulit untuk mengekspresikan efek gambar realistis dengan gradasi warna yang kaya. Anda dapat memahaminya sebagai lingkaran sempurna, parabola, dan bentuk lainnya.
Bitmap: Disebut juga peta raster dan peta piksel, unit terkecil terdiri dari piksel, dan penskalaan serta rotasi akan menyebabkan distorsi. Misalnya, bitmap itu seperti tusuk silang. Jika dilihat dari kejauhan, gambarnya halus dan penuh warna, dan jika dilihat dari dekat, transisi warna setiap tusuk dapat terlihat.
Cross-stitch Pembesaran cross-stitch Tabel berikut menunjukkan perbandingan antara gambar vektor dan bitmap:
2. Kompresi lossy dan kompresi lossless.
Kompresi lossy: Ditandai dengan mempertahankan perubahan warna bertahap, perubahan tiba-tiba di dunia nyata seperti yang diamati oleh mata manusia, dan kemudian menggunakan warna terdekat untuk diisi melalui gradien atau bentuk lainnya. Karena informasi data dalam piksel, kapasitas penyimpanan akan berkurang, dan kualitas pemulihan gambar tidak akan terpengaruh. JPG adalah format kompresi lossy. Saat menyimpan gambar, gambar akan didekomposisi menjadi grid 8*8 piksel dan dioptimalkan secara individual. Misalnya: blok putih kecil berukuran 8*8px dan blok latar belakang hitam berukuran 32*32px. Ketika blok putih kecil tidak lagi putih bersih, blok putih kecil di sekitarnya sangat tajam, seperti yang ditunjukkan pada gambar berikut:
Grid putih di pojok kanan atas kebetulan tidak berada pada unit grid 8*8 piksel, sehingga bila disimpan akan tercampur warna dengan unit grid 8*8 disekitarnya.
Inilah penyebab gambar menjadi buram saat menyimpan gambar JPG. Berikut ini sebagian efek perbandingan beberapa gambar berwarna:
Kompresi lossless: Kompres menggunakan redundansi data statistik untuk benar-benar merekam informasi data setiap piksel pada gambar. Prinsipnya adalah menentukan terlebih dahulu mana warna yang sama dan mana yang berbeda, mengompresi dan mencatat informasi data dengan warna yang sama, dan menyimpan data yang berbeda secara terpisah. Kualitas gambar tidak akan menurun setelah disimpan beberapa kali.
Mengapa gambar terkompresi lossless juga terdistorsi? Karena prinsip kompresinya adalah mengompresi dan memulihkan dengan mengindeks warna di area yang sama pada gambar jumlah warna yang dapat kita simpan dan pulihkan gambar, jika tidak, beberapa informasi gambar akan hilang. Misalnya format PNG-8 dan GIF:
PNG24 adalah warna asli, sehingga tabel warna kosong dan tidak akan terdistorsi.
3. Perbandingan gambar PNG, GIF dan JPG.
Sebelum kita melanjutkan ke teknik pengoptimalan gambar, kita perlu mempelajari beberapa detail teknis tentang format gambar. Setiap format grafik memiliki kekuatan dan kelemahannya masing-masing, dan mengetahuinya akan membantu Anda mendapatkan kualitas visual dan kualitas kompresi yang lebih baik.
Optimasi gambar halaman web adalah langkah yang sangat penting dalam akselerasi halaman web. Mengompresi gambar tidak hanya dapat menghemat bandwidth, tetapi juga mempercepat halaman web. Perangkat lunak pengedit gambar kami yang umum digunakan dapat mengompresi gambar.
Rasio kompresi PNG-8 yang tinggi Saat memotong gambar, terkadang memilih PNG-8 dapat mencapai rasio kompresi yang lebih tinggi. Catatan, ini PNG-8, bukan PNG-24. Namun, dalam beberapa kasus, GIF atau JPG akan lebih kecil, dan perlu di-debug sesuai dengan situasi sebenarnya untuk memilih solusi terbaik.
Tips optimasi untuk PNG-24, menggunakan Posterisasi:
Ambil contoh ikon kecil di navigasi kiri Weibo. Perbandingan ukuran gambar terkompresi adalah sebagai berikut:
Langkah-langkah pemisahan nada PS adalah sebagai berikut:
Bandingkan ukuran:
Setelah menggunakan pengoptimalan alat, ukurannya bisa lebih kecil:
Perlu diketahui bahwa gambar di atas aslinya dalam format GIF
Telah diubah ke format PNG
Oleh karena itu, saat menggunakan alat pengoptimalan, Anda perlu memeriksa apakah format file telah diubah untuk menghindari hilangnya beberapa gambar yang tidak dioptimalkan.
Penerapan optimasi gambar di beranda Weibo:
1. Tipe grafis dan tipe foto Saat memilih format gambar, kita juga perlu mempertimbangkan skenario penggunaan atau fungsi gambar, yang dapat diringkas menjadi dua kategori: tipe grafis dan tipe foto. Tipe grafis: simbol grafis, yang sangat ringkas dan dapat menyampaikan informasi dengan cepat, fitur mudah diingat, dengan jumlah warna yang sedikit.
Kelas grafis umumnya menggunakan format PNG atau format GIF. Kalau dioptimasi, format PNG bisa PNG8 atau PNG24, dan kualitasnya bisa 32. Kalau ada kehilangan warna, kualitasnya bisa 64 atau 128.
Misalnya: ikon di navigasi kiri beranda, ikon di area feed, gambar medali, dan animasi emotikon semuanya berupa grafik.
Kategori foto: Foto biasanya berisi jutaan warna, termasuk transisi warna yang halus dan gradien. Jika grafiknya lebih rumit, foto asli terkadang muncul dalam gambar.
PNG dan JPG umumnya digunakan untuk foto. Hal ini dapat ditentukan berdasarkan kekayaan warna gambar.
Kualitas PNG umumnya 128. Kualitas JPG umumnya antara 70-80, ditentukan oleh tingkat kebisingan.
Misalnya: gambar latar belakang kulit, penerbit, latar belakang tombol, tips di bawah penerbit, iklan di sebelah kanan, avatar pengguna, dan gambar yang diposting oleh pengguna.
2. Kategori umum dan kategori acak dibagi menjadi kategori umum dan kategori acak sesuai dengan frekuensi gambar di beranda. Kategori Umum: Setiap orang akan melihat ikon, tombol, dan latar belakang kecil di beranda.
Misalnya ikon baki atas, ikon panduan kiri, ikon area feed, ikon penerbit, ikon identitas, ikon operasi, ikon status, dan tombol. Simpan sebisa mungkin dalam format PNG, ukuran file akan relatif lebih kecil.
Gambar di bawah menunjukkan perbandingan ukuran tombol Weibo dan ikon navigasi kiri dalam format GIF dan PNG:
Gambar di bawah menunjukkan perbandingan ukuran gambar latar belakang tombol Weibo yang disimpan dalam format GIF dan PNG:
Kategori acak: Tergantung pada apa yang Anda definisikan dan publikasikan.
A.Emotikon GIF
Anda dapat menggunakan FireWorks atau ImageReady, dan ImageReady direkomendasikan.
Yang terbaik adalah menyesuaikan secara manual satu per satu, karena nilai warna dari ekspresi ini relatif kecil, dan jika warna yang digunakan lebih besar, kapasitas penyimpanannya akan lebih besar.
Selain itu, pemrosesan batch juga memerlukan satu folder untuk diproses. Terlalu banyak folder untuk ekspresi, jadi pada dasarnya pemrosesan batch masih sangat lambat. Jika Anda menggunakan FireWorks untuk pemrosesan batch, beberapa animasi akan menjadi lebih cepat atau ada tepian yang hilang.
Saat memproses secara manual, simpan sesuai dengan jumlah warna indeks. Secara umum, 4-128 warna indeks disimpan.
B. Gambar pelapisan ulang kulit:
Gunakan format JPG atau format PNG.
Jika gambar latar belakang utama kulit berisi foto atau teks asli, bisa dalam format JPG untuk memastikannya lebih dekat dengan desain, harus menggunakan gambar terkompresi dengan kualitas 85 atau lebih tinggi. Jika gambar background memiliki rentang warna yang kecil, bisa dalam format PNG.
C. Kategori medali:
Saat ini, ada dua format: GIF dan PNG. GIF adalah gambar kecil, dan PNG adalah gambar sedang dan besar. Pilih saja 128 untuk kualitas.
Pemrosesan batch direktori ini lebih cepat. Karena semuanya ada di folder yang sama. Namun akan lebih kecil jika digunakan secara manual.
D.Berbagai iklan:
Tips, iklan di sebelah kanan, dan iklan di bagian bawah penerbit. Gunakan format JPG atau format PNG.
E. Grafik terkait pengguna:
Avatar dan gambar yang diposting oleh pengguna perlu mengontrol kualitas kompresi di latar belakang. Gunakan format JPG atau format PNG.
Pengantar alat pengoptimalan gambar Smush.it
Smush.it adalah alat pengoptimalan gambar online berdasarkan YUI yang diproduksi oleh tim YUI.
Ini adalah layanan berdasarkan empat saran pengoptimalan gambar berikut:
Hapus data meta dari JPG.
Optimalkan tingkat kompresi JPG.
Konversikan gambar GIF tertentu menjadi gambar berformat PNG yang dapat diindeks.
Hapus informasi warna yang tidak digunakan dari gambar yang dapat diindeks.
Jadi menggunakan Smush.it untuk mengompres gambar dapat menghilangkan kelebihan byte dari gambar tanpa mengubah efek visual dan kualitas gambar.
Ditemukan dalam penggunaan sebenarnya:
Itu juga dapat mengubah beberapa gambar JPG menjadi gambar PNG.
Untuk gambar PNG24 true color, dapat menghilangkan beberapa informasi warna yang tidak terdeteksi oleh mata telanjang, menutupi kekurangan photoshop dan kembang api yang tidak dapat mengoptimalkan gambar PNG24.
Gambar animasi GIF dapat dioptimalkan.
Metode penggunaan Smush.it 1: Gunakan Semua Smush.it di alat Alat di plug-in Firefox Yslow
Ambil contoh beranda Weibo:
Firebug, gunakan alat Yslow, setelah dijalankan, pilih Tools
Klik All Smush.it dan secara otomatis akan melompat ke http://www.smushit.com/ysmush.it/ untuk mendapatkan gambar berikut:
Setelah mengklik tombol Unduh Gambar Smusshed, file zip akan diunduh.
Metode 2: Masuk langsung ke situs Smush.it, tempelkan URL gambar yang perlu dikompres ke dalam kotak input (atau pilih gambar dari komputer lokal), klik Smush untuk mengompres gambar, lalu Smuch. itu akan memberikan laporan optimasi, menampilkan rasio kompresi gambar dan berapa banyak byte yang disimpan, dan menyediakan paket terkompresi yang dapat diunduh berisi file gambar terkompresi.
Gambar di bawah ini menunjukkan cara langsung mengisi URL online (dipisahkan dengan koma):
Gambar berikut menunjukkan cara memilih gambar dari komputer lokal Anda:
Gambar di bawah ini menunjukkan hasil optimasi:
induksi:
Mari kita tinjau kembali poin-poin penting:
1. Pilih format yang sesuai: gunakan JPG untuk menyimpan foto, gunakan GIF untuk menyimpan animasi, gunakan PNG untuk menyimpan gambar lain, dan gunakan PNG8 sebanyak mungkin.
2. Teknik kompresi gambar PNG24.
3. Penggunaan Smush.it.