Google'ın Sayfa Hızı kayıpsız görüntü sıkıştırması nasıl çalışır?

Bir web sitesinde Google'ın Firebug / Firefox için PageSpeed ​​eklentisini çalıştırdığınızda, görüntünün kayıpsız bir şekilde sıkıştırılabileceği durumlar önerilecek ve bu daha küçük resmi indirmek için bir bağlantı sağlanacaktır.

Örneğin:

• Kayıpsız sıkıştırılması http://farm3.static.flickr.com/2667/4096993475_80359a672b_s.jpg 33.5KiB (% 85 azalma) sağlayabilir.
• Kayıpsız sıkıştırılması http://farm2.static.flickr.com/1149/5137875594_28d0e287fb_s.jpg 18.5KiB (% 77 azalma) sağlayabilir.
• Http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png sayfasının kayıpsız sıkıştırılması 262B tasarruf sağlayabilir (% 11 azalma).
• Kayıpsız sıkıştırılması http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/images/ui-bg_flat_75_ffffff_40x100.png 91B (% 51 azalma) sağlayabilir.
• Http://www.gravatar.com/avatar/0b1bccebcd4c3c38cb5be805df5e4d42?s=45&d=mm , kayıpsız bir şekilde sıkıştırılması 61B tasarruf sağlayabilir (% 5 azalma).

Bu, hem JPG hem de PNG dosya türlerinde geçerlidir (GIF veya diğerlerini test etmedim.)

Flickr küçük resimlerine de dikkat edin (tüm bu görüntüler 75x75 pikseldir.) Oldukça büyük tasarruflar. Bu gerçekten çok güzelse, Yahoo neden bu sunucu tarafını tüm kitaplıklarına uygulamıyor ve depolama ve bant genişliği yüklerini azaltmıyor?

Stackoverflow.com bile çok az tasarruf anlamına gelir:

• Kayıpsız sıkıştırılması http://sstatic.net/stackoverflow/img/sprites.png?v=3 1.7KiB (% 10 azalma) sağlayabilir.
• Http://sstatic.net/stackoverflow/img/tag-chrome.png sayfasının kayıpsız sıkıştırılması 11B tasarruf sağlayabilir (% 1 azalma).

PageSpeed'in Photoshop'un 'Web için Kaydet' özelliğini kullanarak oluşturduğum PNG dosyalarında oldukça iyi tasarruflar önerdiğini gördüm.

Benim sorum şu, görüntüleri bu kadar azaltmak için görüntülerde ne gibi değişiklikler yapıyorlar? Farklı dosya türleri için farklı cevaplar olduğunu tahmin ediyorum. Bu JPG'ler için gerçekten kayıpsız mı? Ve Photoshop'u nasıl yenebilirler? Bundan biraz şüphelenmeli miyim?

Teknik ayrıntılarla gerçekten ilgileniyorsanız, kaynak koduna göz atın:

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

PNG dosyaları için OptiPNG'yi bazı deneme yanılma yaklaşımıyla kullanıyorlar

// 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)
};

Dört kombinasyonun hepsi uygulandığında, en küçük sonuç korunur. Bu kadar basit.

(Not: optipngEğer sağlarsanız -o 2, komut satırı aracı bunu yapar -o 7)

JPEG dosyaları için jpeglib'i aşağıdaki seçeneklerle kullanırlar:

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

Benzer şekilde, WEBP kullanılarak sıkıştırılır libwebp bu seçeneklerle:

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

Kayıpsız biçimde en küçük formata dönüştürmek için kullanılan image_converter.cc de vardır .

Kullandığım jpegoptimoptimize JPG dosyalarına ve optipngoptimize PNG dosyaları için.

Eğer kullanıyorsanız bash, kayıpsız için komut bir dizin (yinelemeli) 'dir tüm JPG'leri optimize:

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

Ekleyebilir -m[%]için jpegoptimörneğin kompres JPG, kayıplı için:

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

Bir dizindeki tüm PNG'leri optimize etmek için:

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

-o2Varsayılan optimizasyon seviyesi, sen bu değiştirebilir o2için o7. Daha yüksek optimizasyon seviyesinin daha uzun işlem süresi anlamına geldiğine dikkat edin.

Bazı teknikleri / araçları açıklayan http://code.google.com/speed/page-speed/docs/payload.html#CompressImages adresine bakın .

Sıkıştırma verimliliği için enkoderin CPU zamanı ile ticaret yapmak önemlidir. Sıkıştırma, daha kısa temsiller için yapılan bir aramadır ve daha fazla arama yaparsanız daha kısa olanları bulacaksınız.

Görüntü formatı özelliklerini sonuna kadar kullanma meselesi de vardır, örneğin PNG24 + a yerine PNG8 + a, JPEG'de optimize edilmiş Huffman tabloları vb.

Photoshop, görüntüleri web için kaydederken bunu yapmak için çok uğraşmaz, bu nedenle herhangi bir aracın onu yenmesi şaşırtıcı değildir.

Görmek

• ImageOptim (kayıpsız) ve
• Daha küçük PNG dosyaları için ImageAlpha (kayıplı) ( nasıl çalıştığını gösteren üst düzey açıklama ) ve
• Daha iyi JPEG kompresörü için JPEGmini / MozJPEG (kayıplı).

PageSpeed'in JPG Sıkıştırma Sonuçlarını Windows'ta Çoğaltmak İçin:

Www.jpegclub.org/jpegtran adresinden edinebileceğiniz jpegtran'ın Windows sürümünü kullanarak PageSpeed ​​ile tam olarak aynı sıkıştırma sonuçlarını elde edebildim . DOS komut istemini kullanarak yürütülebilir çalıştırdım (Başlat> CMD kullanın). PageSpeed ​​sıkıştırmasıyla tam olarak aynı dosya boyutunu (bayta kadar) almak için Huffman optimizasyonunu aşağıdaki gibi belirledim:

jpegtran -optimize source_filename.jpg output_filename.jpg

Sıkıştırma seçenekleri hakkında daha fazla yardım için komut istemine şunu yazın: jpegtran

Veya Firebug'daki PageSpeed ​​sekmesinden Otomatik Oluşturulan Resimleri Kullanmak İçin:

PageSpeed'in optimize edilmiş dosyalarına erişmek için Pumbaa80'in tavsiyelerini takip edebildim. Umarım ekran görüntüsü burada FireFox çevre için daha da netlik sağlar. (Ancak Chrome'da bu optimize edilmiş dosyaların yerel bir sürümüne erişemedim.)

Adobe Bridge ve Düzenli İfadeler kullanarak Dağınık Sayfa Hızı Dosya Adlarını Temizlemek için:

FireFox'taki PageSpeed ​​benim için optimize edilmiş görüntü dosyaları üretebilse de, aynı zamanda aşağıdaki gibi basit isimlerle adlarını değiştirdi:

nice_picture.jpg

içine

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

Bunun yaygın bir şikayet gibi göründüğünü keşfettim. Tüm resimlerimi el ile yeniden adlandırmak istemediğimden, Adobe Bridge'in Yeniden Adlandırma aracını Düzenli İfade ile birlikte kullandım. Normal İfadeleri kabul eden diğer yeniden adlandırma komutlarını / araçlarını kullanabilirsiniz, ancak Adobe Bridge'in PageSpeed ​​sorunları ile çalışan çoğumuz için hazır olduğundan şüpheleniyorum!

1. Adobe Bridge uygulamasını başlatma
2. Tüm dosyaları seç (Kontrol A kullanarak)
3. Araçlar> Toplu Yeniden Adlandırma (veya Control Shift R) seçeneğini belirleyin
4. Önayar alanında "Dize Değiştirme" yi seçin. Yeni Dosya Adları alanlarında artık "Dize Değiştirme" ve ardından "Orijinal Dosya Adı" görüntülenmelidir
5. “Normal İfadeyi Kullan” adlı onay kutusunu etkinleştirin

6. “Bul” alanına Normal İfadeyi (en sağ alt çizgi ayırıcısından başlayarak tüm karakterleri seçer) girin:

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

7. "Şununla değiştir" alanına şunu girin:

   .jpg

8. İsteğe bağlı olarak, önerilen toplu yeniden adlandırma sonuçlarını görmek için Önizleme düğmesini tıklayın, ardından kapatın

9. Yeniden Adlandır düğmesini tıklayın

İşlemden sonra Bridge'in etkilenmeyen dosyaların seçimini kaldırdığını unutmayın. Tüm .png dosyalarınızı temizlemek istiyorsanız, tüm resimleri yeniden seçmeniz ve yukarıdaki yapılandırmayı değiştirmeniz gerekir ("jpg" yerine "png" için). Ayrıca, ileride dosya adlarını hızlı bir şekilde temizleyebilmeniz için yukarıdaki yapılandırmayı "PageSpeed ​​jpg Görüntülerini Temizle" gibi bir ön ayar olarak kaydedebilirsiniz.

Yapılandırma Ekran Görüntüsü / Sorun Giderme

Sorun yaşıyorsanız, bazı tarayıcıların yukarıdaki RegEx ifadesini düzgün bir şekilde göstermemesi (kaçış karakterleri suçlaması) mümkündür, bu nedenle yapılandırmanın ekran görüntüsü için (bu talimatlarla birlikte), bkz:

Dağınık Dosya Adlarına Sahip Optimize Edilmiş Sayfa Hızı Görüntülerini Temizlemek için Adobe Bridge Toplu Yeniden Adlandırma Aracı Nasıl Kullanılır

Bence bir görüntüde çoğu görüntü formatını etkili bir şekilde işleyen en iyi seçenek trimage . Görüntü formatına göre optipng, pngcrush, advpng ve jpegoptim'i etkili bir şekilde kullanır ve kayıpsız mükemmel sıkıştırma sağlar.

Komut satırı kullanılıyorsa uygulama oldukça kolaydır.

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

ve işte! :-)
Ayrıca elle yapmak için oldukça basit bir arayüz bulacaksınız.

OptiPNG'yi ( bu blogdan ) kullanarak bir klasörün altındaki görüntüleri tekrar tekrar optimize eden çok kullanışlı bir toplu komut dosyası var :

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

TEK ÇİZGİ!

Toplu işlem arıyorsanız, Xserver'iniz yoksa trimage şikayetlerini unutmayın. Bu durumda sadece bir bash veya php betiği yazın.

<?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 {} \;");
?>

Gereksinimlerinize uygun seçenekleri değiştirin.

Pencereler için kolay erişim için birkaç sürükle ve bırak arayüzü vardır.

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

PNG dosyaları için bunu zevk için buldum, görünüşe göre bu GIU'ya sarılmış 3 farklı araç. Sadece sürükleyip bırakın ve sizin için yapar.

https://pnggauntlet.com/

Gerçi zaman alır, 1MB png dosyasını sıkıştırmayı deneyin - Burada ne olması gerektiğini bu sıkıştırma karşılaştırmasına ne kadar CPU girdiğini görünce şaşırdım. Resmin 100 yolu sıkıştırılmış gibi görünüyor ve en iyisi kazanıyor: D

JPG sıkıştırma ile ilgili olarak ben renk profilleri ve tüm ekstra bilgi şeridi için riskli hissediyorum - ancak - herkes yapıyorsa - onun iş standardı bu yüzden sadece kendim yaptım: D

Bugün bir WP kurulumunda 5500 dosyaya 113MB tasarruf ettim, bu yüzden kesinlikle buna değer!