it-swarm-eu.dev

Jak funguje stránka Google s bezeztrátovou kompresí obrazu?

Když spustíte Google PageSpeed ​​plugin pro Firebug/Firefox na webové stránce, navrhne případy, kdy může být obraz bezeztrátově komprimován a poskytne odkaz ke stažení tohoto menšího obrázku.

Například:

To platí jak pro typy souborů JPG, tak i pro soubory PNG (GIF ani jiné nebyly testovány).

Všimněte si také miniatury Flickr (všechny tyto obrázky jsou 75x75 pixelů.) Jsou to docela velké úspory. Pokud je to opravdu tak velké, proč nejsou Yahoo použití této server-side na jejich celou knihovnu a snížení jejich ukládání a zatížení šířky pásma?

Dokonce i Stackoverflow.com znamená velmi malé úspory:

Viděl jsem PageSpeed ​​navrhnout docela slušné úspory na PNG soubory, které jsem vytvořil pomocí Photoshopu 'Uložit pro Web' funkce.

Takže moje otázka zní, jaké změny dělají na obrázcích, aby je snížily tolik? Hádám, že existují různé odpovědi pro různé typy souborů. Je to pro JPG opravdu bezeztrátové? A jak mohou porazit Photoshop? Měl bych na to být trochu podezřelý?

compressionimagingpagespeedgoogle-pagespeed
136
Drew Noakes

Pokud vás zajímají technické podrobnosti, podívejte se na zdrojový kód: 

Pro soubory PNG používají OptiPNG s některými metodami pokus-omyl

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

Při použití všech čtyř kombinací je zachován nejmenší výsledek. Jednoduché.

(N.B .: Nástroj optipng příkazového řádku to udělá i v případě, že zadáte -o 2 až -o 7)

U souborů JPEG používají jpeglib s následujícími možnostmi:

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

Podobně je WEBP komprimován pomocí libwebp s těmito volbami:

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

K dispozici je také image_converter.cc , který se používá pro bezeztrátovou konverzi do nejmenšího formátu.

82
user123444555621

Používám jpegoptim pro optimalizaci souborů JPG a optipng pro optimalizaci souborů PNG.

Pokud jste v bash, příkaz pro bezeztrátovou optimalizaci všech souborů JPG v adresáři (rekurzivně) je:

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

-m[%] můžete přidat do jpegoptim pro ztrátové komprese JPG obrázků, například:

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

Optimalizace všech PNG v adresáři:

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

-o2 je výchozí úroveň optimalizace, můžete ji změnit z o2 na o7. Všimněte si, že vyšší úroveň optimalizace znamená delší dobu zpracování.

46
Hoang Huynh

Podívejte se na http://code.google.com/speed/page-speed/docs/payload.html#CompressImages které popisuje některé z technik/nástrojů.

29
Amber

Je to záležitost času CPU CPU pro kompresní efektivitu. Komprese je hledání kratších reprezentací, a pokud budete hledat tvrději, najdete kratší.

Je také třeba plně využít možnosti formátování obrazu, např. PNG8 + a místo PNG24 + a, optimalizované Huffmanovy tabulky v JPEG, atd.

Photoshop se opravdu nesnaží dělat to, když ukládá obrázky pro web, takže není divu, že jakýkoliv nástroj ho bije.

Vidět 

15
Kornel

Chcete-li replikovat výsledky komprese JPG ve službě PageSpeed ​​ve Windows:

Byl jsem schopen získat přesně stejné výsledky komprese jako PageSpeed ​​pomocí verze systému Windows jpegtran, kterou můžete získat na www.jpegclub.org/jpegtran . Spustil jsem spustitelný soubor pomocí DOS Prompt (použijte Start> CMD). Chcete-li získat přesně stejnou velikost souboru (až na bajt) jako kompresi PageSpeed, určil jsem Huffmanovu optimalizaci následujícím způsobem:

jpegtran -optimize source_filename.jpg output_filename.jpg

Chcete-li získat další informace o možnostech komprese, zadejte na příkaz Prompt pouze příkaz: jpegtran

Nebo použijte obrázky generované automaticky z karty PageSpeed ​​v aplikaci Firebug:

Byl jsem schopen následovat radu Pumbaa80, abych získal přístup k optimalizovaným souborům PageSpeed. Doufejme, že screenshot zde poskytuje další jasnost prostředí FireFox. (V prohlížeči Chrome jsem ale nemohl získat přístup k místní verzi těchto optimalizovaných souborů.)

A vyčistit soubory Messy PageSpeed ​​pomocí Adobe Bridge a regulárních výrazů

Přestože aplikace PageSpeed ​​v aplikaci FireFox dokázala generovat optimalizované obrazové soubory pro mě, změnila také jejich jména a změnila jednoduchá jména:

Nice_picture.jpg

do 

Nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

Zjistil jsem, že se jedná o společnou stížnost. Protože jsem nechtěl přejmenovat všechny obrázky ručně, použil jsem nástroj Přejmenování aplikace Adobe Bridge spolu s regulárním výrazem. Můžete použít jiné příkazy/nástroje pro přejmenování, které přijímají regulární výrazy, ale domnívám se, že Adobe Bridge je snadno dostupný pro většinu z nás, kteří pracují s problémy s PageSpeed! 

  1. Spusťte aplikaci Adobe Bridge
  2. Vybrat všechny soubory (pomocí ovládacího prvku A)
  3. Zvolte Nástroje> Přejmenování dávky (nebo Řídit Shift R)
  4. V poli Přednastavení vyberte "String Substitution". Pole Nová jména souborů by nyní měla zobrazovat „String Substitution“, za nímž následuje název „Original Filename“
  5. Zaškrtněte políčko „Použít regulární výraz“

  6. Do pole „Najít“ zadejte regulární výraz (který vybere všechny znaky začínající oddělovačem vpravo): 

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

  7. Do pole „Nahradit“ zadejte:

    .jpg

  8. Volitelně můžete kliknutím na tlačítko Náhled zobrazit navrhované výsledky přejmenování dávek a zavřít

  9. Klepněte na tlačítko Přejmenovat

Po zpracování aplikace Bridge zruší výběr souborů, které nebyly ovlivněny. Pokud chcete vyčistit všechny vaše .png soubory, musíte znovu vybrat všechny obrázky a upravit konfiguraci výše (pro "png" místo "jpg"). Výše uvedenou konfiguraci můžete také uložit jako přednastavení, například „Clean PageSpeed ​​jpg Images“, abyste mohli v budoucnu rychle vymazat názvy souborů. 

Snímek obrazovky konfigurace/Odstraňování problémů

Máte-li potíže, je možné, že některé prohlížeče nebudou správně zobrazovat výraz RegEx (obviňovat mé znaky escape), takže pro snímek obrazovky (spolu s těmito pokyny) viz:

Jak používat nástroj Adobe Bridge pro přejmenování dávek k vyčištění optimalizovaných obrazů PageSpeed, které mají Messy názvy souborů

13
Thor

Podle mého názoru nejlepší volba tam, která účinně zpracovává většinu obrazových formátů v režimu go je trimage . Efektivně využívá optipng, pngcrush, advpng a jpegoptim založené na obrazovém formátu a poskytuje téměř dokonalou bezeztrátovou kompresi.

Implementace je velmi snadná, pokud používáte příkazový řádek. 

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

a voila! :-)
Navíc najdete docela jednoduché rozhraní, jak to udělat ručně.

10
Rohan

Existuje velmi šikovný dávkový skript, který rekurzivně optimalizuje obrázky pod složkou pomocí funkce OptiPNG (z tohoto blogu ):

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

JEDNA LINKA!

2
Digs

Pokud hledáte pro dávkové zpracování, mějte na paměti trimage stěžuje, pokud nemáte Xserver využít. V takovém případě stačí napsat bash nebo php skript, abyste mohli něco udělat

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

Změňte možnosti podle svých potřeb.

0
Nate

Pro okna existuje několik drag'n'drop rozhraní pro snadný přístup.

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

Pro PNG soubory jsem našel tento pro mé potěšení, zřejmě 3 různé nástroje zabalené v tomto GIU. Stačí přetáhnout a to udělá za vás.

https://pnggauntlet.com/

Chvíli to trvá nějakou dobu, zkuste kompresi 1MB png souboru - byl jsem ohromen, kolik CPU šlo do tohoto komprese komparace, která musí být to, co se děje tady. Vypadá to, že obraz je komprimován 100 způsoby a ten nejlepší vyhrává: D

Co se týče komprese JPG, cítím, že jeho riskantní je zbavit se barevných profilů a všech dalších informací - nicméně pokud to všichni dělají - jeho obchodní standard, tak jsem to udělal sám: D

Uložil jsem 113MB na 5500 souborech při instalaci WP dnes, takže jeho hodnota stojí za to!

0
Kim Steinhaug