Bagaimana cara kerja kompresi gambar tanpa kehilangan Kecepatan Halaman Google?


138

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:

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:

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?


Sepertinya Pagespeed sekarang menuntut kompresi lossy. Sebelum hasilnya berkata: "Mengompresi lossless xxx.jpg dapat menghemat xx kb (pengurangan xx%)". Sekarang dikatakan "Mengkompresi xxx.jpg dapat menghemat xx kb (pengurangan xx%)" Yang penting, Google tampaknya meminta untuk mengkompresi gambar yang lebih kecil saja (thumbnails dll). Adakah yang bisa mengetahui alat kompresi dan parameter apa yang Google gunakan?
Martin

Jawaban:


83

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


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.


3
Khususnya retain_color_profile (false) untuk JPEG dapat menjadi ide yang buruk. Saat tampilan gamut warna yang diperluas menjadi lebih umum, instruksi rendisi warna yang terdefinisi dengan jelas menjadi ambigu. Jika gambar asli disandikan sRGB ini masih akan berfungsi di beberapa browser (Safari, Firefox dengan about: config modifikasi) sementara di yang lain hanya gambar yang ditandai mungkin dikelola dengan warna (default Firefox). Tentu saja browser tanpa kapabilitas manajemen warna tidak akan peduli ...
CO

2
Aku sudah berjalan optipng file.png -o7dan aku tidak mendapatkan di mana saja dekat apa acara Google. Mungkin mereka mengonversi ke SVG jika memungkinkan?
Nateowami

@Nateowami Saya memiliki masalah yang sama ... untuk beberapa PNG Google tidak lebih baik daripada optipng -o7. Untuk ini, Anda dapat mengunduh gambar yang dioptimalkan dari situs web kecepatan halaman itu sendiri.
chrisvdb

46

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.


29

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


1
Terima kasih untuk tautannya. Saya kira saya benar-benar mencari untuk mempelajari lebih lanjut tentang jenis redudansi yang ada dalam file gambar yang dapat dihapus jika filesize adalah perhatian utama Anda. Saya tahu bahwa info ada di web, saya hanya ingin memiliki tempat yang bagus untuk menyusunnya di sini di SO.
Drew Noakes

Saya menggunakan alat build khusus yang mengkompres gambar dengan optipng dan pngcrush, lalu memilih file yang lebih kecil. Namun, Kecepatan Laman mengeluh tentang gambar yang tidak optimal. Jadi alat mana yang benar-benar mereka gunakan?
user123444555621

@ Pumbaa80 Anda juga dapat mencoba advsys.net/ken/util/pngout.htm (yang secara khusus mengatakan bahwa kadang-kadang ukurannya bisa lebih kecil daripada optipng dan pngcrush).
Amber

Saya baru tahu bahwa Kecepatan Halaman memang menggunakan optipng, dengan pembungkus khusus yang menentukan opsi konfigurasi terbaik. @Amber Bukan pilihan, saya tidak menggunakan Windows;)
user123444555621

15

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


Satu-satunya jawaban yang mencoba menjawab pertanyaan aktual yang sebenarnya ditanyakan oleh O / P, alih-alih pertanyaan yang berbeda "bagaimana saya bisa paling memampatkan gambar saya"? lol
toddmo

13

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


Terima kasih telah berbagi ini!
rotaercz

1
Jika Anda menggunakan IIS, PageSpeed ​​baru-baru ini porting ke Windows dan melakukan optimasi yang sama secara otomatis. iispeed.com Untuk reduksi terbaik meskipun tanpa kerugian, saya telah mengonversi sebagian besar direktori JPEG menggunakan JPEGmini jpegmini.com
James Moberg

Sepertinya tidak ada lagi ekstensi PageSpeed ​​untuk Firebug.
Stephan Schielke

10

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.


2
Ada alternatif untuk Windows?
Mathias Lykkegaard Lorenzen

2

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!


1
FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full "%G" jika Anda memiliki spasi di nama file Anda
Ned Martin

0

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.


0

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!

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.