Bagaimana cara kerja kompresi gambar tanpa kehilangan Kecepatan Halaman Google?

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?

Jika Anda benar-benar tertarik dengan detail teknis, lihat kode sumber:

• png_optimizer.cc
• jpeg_optimizer.cc
• webp_optimizer.cc

Untuk file PNG, mereka menggunakan OptiPNG dengan beberapa pendekatan coba-coba

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

Ketika keempat kombinasi diterapkan, hasil terkecil disimpan. Sederhana seperti itu.

(NB: optipngAlat baris perintah melakukan itu juga jika Anda memberikan -o 2melalui -o 7)

Untuk file JPEG, mereka menggunakan jpeglib dengan opsi berikut:

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

Demikian pula, WEBP dikompresi menggunakan libwebp dengan opsi-opsi ini:

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

Ada juga image_converter.cc yang digunakan untuk mengkonversi lossless ke format terkecil.

Saya gunakan jpegoptimuntuk mengoptimalkan file JPG dan optipnguntuk mengoptimalkan file PNG.

Jika Anda aktif bash, perintah untuk mengoptimalkan semua JPG dalam direktori (secara rekursif) tanpa kehilangan adalah:

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

Anda dapat menambahkan -m[%]ke jpegoptimgambar JPG kompres yang hilang, misalnya:

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

Untuk mengoptimalkan semua PNG dalam direktori:

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2adalah tingkat optimalisasi default, Anda dapat mengubahnya dari o2menjadi o7. Perhatikan bahwa level optimisasi yang lebih tinggi berarti waktu pemrosesan yang lebih lama.

Lihatlah http://code.google.com/speed/page-speed/docs/payload.html#CompressImages yang menjelaskan beberapa teknik / alat.

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

• ImageOptim (lossless) dan
• ImageAlpha (lossy) untuk file PNG yang lebih kecil ( deskripsi tingkat tinggi cara kerjanya ) dan
• JPEGmini / MozJPEG (lossy) untuk kompresor JPEG yang lebih baik.

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:

jpegtran -optimize source_filename.jpg output_filename.jpg

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:

nice_picture.jpg

ke

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

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!

1. Mulai Adobe Bridge
2. Pilih semua file (menggunakan Kontrol A)
3. Pilih Tools> Batch Rename (atau Control Shift R)
4. Di bidang Preset pilih "String Substitusi". Bidang Nama File Baru sekarang harus menampilkan "Substitusi String", diikuti oleh "Nama File Asli"
5. Aktifkan kotak centang yang disebut "Gunakan Ekspresi Reguler"

6. Di bidang "Temukan", masukkan Ekspresi Reguler (yang akan memilih semua karakter mulai dari pemisah garis bawah paling kanan):

   _ (?!. * _) (. *) \. jpg $

7. Di bidang "Ganti dengan", masukkan:

   .jpg

8. Secara opsional, klik tombol Pratinjau untuk melihat hasil penamaan ulang batch yang diusulkan, lalu tutup

9. Klik tombol Ganti Nama

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

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.

sudo apt-get install trimage    
trimage -d images/*

dan voila! :-)
Selain itu Anda akan menemukan antarmuka yang cukup sederhana untuk melakukannya secara manual juga.

Ada skrip batch yang sangat berguna yang secara rekursif mengoptimalkan gambar di bawah folder menggunakan OptiPNG (dari blog ini ):

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G

SATU GARIS!

Jika 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

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

Ubah opsi sesuai kebutuhan Anda.

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!