Ketika Anda menjalankan plugin PageSpeed Google untuk Firebug / Firefox di situs web, itu akan menyarankan kasus di mana gambar dapat dikompresi tanpa kehilangan, dan menyediakan tautan untuk mengunduh gambar yang lebih kecil ini.
Sebagai contoh:
- Losslessly mengompresi http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg bisa menyelamatkan 33.5KiB (pengurangan 85%).
- Losslessly mengompresi http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg bisa menyelamatkan 18.5KiB (pengurangan 77%).
- Losslessly mengompresi http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png bisa menyelamatkan 262B (pengurangan 11%).
- Mengompresi http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png yang hilang dapat menghemat 91B (pengurangan 51%).
- Mengompresi tanpa kehilangan http://www.gravatar.com/[/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm dapat menghemat 61B (pengurangan 5%).
Ini berlaku untuk semua tipe file JPG dan PNG (Saya belum menguji GIF atau lainnya.)
Perhatikan juga thumbnail Flickr (semua gambar berukuran 75x75 piksel). Ini adalah penghematan yang cukup besar. Jika ini benar-benar hebat, mengapa Yahoo tidak menerapkan sisi server ini ke seluruh perpustakaan mereka dan mengurangi penyimpanan dan beban bandwidth mereka?
Bahkan Stackoverflow.com singkatan dari penghematan sangat kecil:
- Losslessly mengompresi http://sstatic.net/stackoverflow/img/sprites.png?v=3 bisa menyelamatkan 1.7KiB (pengurangan 10%).
- Mengompresi tanpa kerugian http://sstatic.net/stackoverflow/img/tag-chrome.png dapat menghemat 11B (pengurangan 1%).
Saya telah melihat PageSpeed menyarankan penghematan yang lumayan pada file PNG yang saya buat menggunakan fitur 'Save for Web' Photoshop.
Jadi pertanyaan saya adalah, perubahan apa yang mereka buat pada gambar untuk mengurangi mereka sebanyak itu? Saya menduga ada jawaban berbeda untuk tipe file berbeda. Apakah ini benar-benar lossless untuk JPG? Dan bagaimana mereka bisa mengalahkan Photoshop? Haruskah saya sedikit curiga dengan ini?
sumber
Jawaban:
Jika Anda benar-benar tertarik dengan detail teknis, lihat kode sumber:
Untuk file PNG, mereka menggunakan OptiPNG dengan beberapa pendekatan coba-coba
Ketika keempat kombinasi diterapkan, hasil terkecil disimpan. Sederhana seperti itu.
(NB:
optipng
Alat baris perintah melakukan itu juga jika Anda memberikan-o 2
melalui-o 7
)Untuk file JPEG, mereka menggunakan jpeglib dengan opsi berikut:
Demikian pula, WEBP dikompresi menggunakan libwebp dengan opsi-opsi ini:
Ada juga image_converter.cc yang digunakan untuk mengkonversi lossless ke format terkecil.
sumber
optipng file.png -o7
dan aku tidak mendapatkan di mana saja dekat apa acara Google. Mungkin mereka mengonversi ke SVG jika memungkinkan?Saya gunakan
jpegoptim
untuk mengoptimalkan file JPG danoptipng
untuk mengoptimalkan file PNG.Jika Anda aktif
bash
, perintah untuk mengoptimalkan semua JPG dalam direktori (secara rekursif) tanpa kehilangan adalah:Anda dapat menambahkan
-m[%]
kejpegoptim
gambar JPG kompres yang hilang, misalnya:Untuk mengoptimalkan semua PNG dalam direktori:
-o2
adalah tingkat optimalisasi default, Anda dapat mengubahnya dario2
menjadio7
. Perhatikan bahwa level optimisasi yang lebih tinggi berarti waktu pemrosesan yang lebih lama.sumber
Lihatlah http://code.google.com/speed/page-speed/docs/payload.html#CompressImages yang menjelaskan beberapa teknik / alat.
sumber
Ini masalah waktu perdagangan encoder CPU untuk efisiensi kompresi. Kompresi adalah pencarian untuk representasi yang lebih pendek, dan jika Anda mencari lebih keras, Anda akan menemukan yang lebih pendek.
Ada juga masalah menggunakan kemampuan format gambar secara maksimal, misalnya PNG8 + a bukan PNG24 + a, tabel Huffman yang dioptimalkan dalam JPEG, dll.
Photoshop tidak benar-benar berusaha keras untuk melakukannya ketika menyimpan gambar untuk web, jadi tidak mengherankan bahwa alat apa pun mengalahkannya.
Lihat
sumber
Untuk Mereplikasi Hasil Kompresi JPG PageSpeed di Windows:
Saya bisa mendapatkan hasil kompresi yang sama persis seperti PageSpeed menggunakan jpegtran versi Windows yang bisa Anda dapatkan di www.jpegclub.org/jpegtran . Saya menjalankan executable menggunakan DOS prompt (gunakan Start> CMD). Untuk mendapatkan ukuran file yang persis sama (ke byte) seperti kompresi PageSpeed, saya menetapkan optimasi Huffman sebagai berikut:
Untuk bantuan lebih lanjut tentang opsi kompresi, pada prompt perintah, cukup ketik: jpegtran
Atau Menggunakan Gambar yang Dibuat Otomatis dari tab PageSpeed di Firebug:
Saya bisa mengikuti saran Pumbaa80 untuk mendapatkan akses ke file yang dioptimalkan PageSpeed. Semoga tangkapan layar di sini memberikan kejelasan lebih lanjut untuk lingkungan FireFox. (Tapi saya tidak bisa mendapatkan akses ke versi lokal dari file yang dioptimalkan ini di Chrome.)
Dan untuk Membersihkan Nama File PageSpeed Berantakan menggunakan Adobe Bridge & Regular Expressions:
Meskipun PageSpeed in FireFox dapat menghasilkan file gambar yang dioptimalkan untuk saya, itu juga mengubah nama mereka menjadi nama-nama sederhana seperti:
ke
Saya menemukan bahwa ini tampaknya menjadi keluhan umum. Karena saya tidak ingin mengganti nama semua foto saya dengan tangan, saya menggunakan alat Ganti Nama Adobe Bridge bersama dengan Ekspresi Reguler. Anda dapat menggunakan perintah ganti nama lain / alat yang menerima Ekspresi Reguler, tetapi saya menduga bahwa Adobe Bridge sudah tersedia bagi sebagian besar dari kita yang bekerja dengan masalah PageSpeed!
Di bidang "Temukan", masukkan Ekspresi Reguler (yang akan memilih semua karakter mulai dari pemisah garis bawah paling kanan):
_ (?!. * _) (. *) \. jpg $
Di bidang "Ganti dengan", masukkan:
.jpg
Secara opsional, klik tombol Pratinjau untuk melihat hasil penamaan ulang batch yang diusulkan, lalu tutup
Perhatikan bahwa setelah pemrosesan, Bridge membatalkan pilihan file yang tidak terpengaruh. Jika Anda ingin membersihkan semua file .png Anda, Anda harus memilih kembali semua gambar dan memodifikasi konfigurasi di atas (untuk "png", bukan "jpg"). Anda juga dapat menyimpan konfigurasi di atas sebagai preset seperti "Bersihkan PageSpeed jpg Images" sehingga Anda dapat membersihkan nama file dengan cepat di masa depan.
Screenshot Konfigurasi / Pemecahan Masalah
Jika Anda memiliki masalah, ada kemungkinan beberapa browser mungkin tidak menunjukkan ekspresi RegEx di atas dengan benar (salahkan karakter pelarian saya) sehingga untuk tangkapan layar konfigurasi (bersama dengan petunjuk ini), lihat:
Cara Menggunakan alat Batch Rename dari Adobe Bridge untuk Membersihkan Gambar PageSpeed yang Dioptimalkan yang memiliki Nama File yang Berantakan
sumber
Menurut pendapat saya pilihan terbaik di luar sana yang secara efektif menangani sebagian besar format gambar dalam perjalanan adalah trimage . Ini secara efektif menggunakan optipng, pngcrush, advpng dan jpegoptim berdasarkan pada format gambar dan memberikan kompresi lossless mendekati sempurna.
Implementasinya cukup mudah jika menggunakan baris perintah.
dan voila! :-)
Selain itu Anda akan menemukan antarmuka yang cukup sederhana untuk melakukannya secara manual juga.
sumber
Ada skrip batch yang sangat berguna yang secara rekursif mengoptimalkan gambar di bawah folder menggunakan OptiPNG (dari blog ini ):
SATU GARIS!
sumber
FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full "%G"
jika Anda memiliki spasi di nama file AndaJika Anda mencari pemrosesan batch, ingatlah trimage mengeluh jika Anda tidak memiliki Xserver. Dalam hal ini cukup tulis script bash atau php untuk melakukan sesuatu seperti
Ubah opsi sesuai kebutuhan Anda.
sumber
Untuk windows ada beberapa antarmuka drag'n'drop untuk akses mudah.
https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/
Untuk file PNG saya menemukan ini untuk kesenangan saya, ternyata 3 alat yang berbeda dibungkus dalam GIU ini. Cukup seret dan lepas dan itu berfungsi untuk Anda.
https://pnggauntlet.com/
Butuh waktu, coba mengompres file png 1MB - Saya kagum berapa banyak CPU yang masuk ke perbandingan kompresi ini yang harus menjadi apa yang terjadi di sini. Tampaknya gambar dikompresi dengan 100 cara dan yang terbaik menang: D
Mengenai kompresi JPG, saya merasa berisiko mengambil strip profil warna dan semua info tambahan - namun - jika semua orang melakukannya - ini adalah standar bisnis jadi saya hanya melakukannya sendiri: D
Saya menyimpan 113MB pada 5500 file pada instalasi WP hari ini, jadi itu sangat berharga!
sumber