Při práci s některými tématy wordpressu jsem upravoval některé obrazové soubory a všiml jsem si, že moje upravené verze jsou někdy 3-4x větší než originál (uložené ve stejném formátu). Nechci degradovat kvalitu - jaké jsou některé ze způsobů, jak zmenšit velikost souboru, aby se načítal rychleji?

Právě teď například používám Photoshop a nastavuji posuvník kvality obrazu na 8 (z 10).

Časopis Smashing Magazine vytvořil 2 skvělé články o optimalizaci PNG a optimalizaci JPG.

Jsou poměrně podrobné a velmi podrobně vysvětlují některé věci, které možná nevíte o formátech a jejich implementacích. Například článek JPEG: „Pamatujte, že když ve Photoshopu nastavíte Quality na méně než 50, spustí se další optimalizační algoritmus s názvem color down-sampling, který průměruje barvu v sousedních blocích s osmi pixely.“

Oba články se věnují konkrétním technikám, které můžete ve Photoshopu použít k přípravě souborů na vyšší kompresi. Což je mnohem efektivnější než techniky používané po uložení souboru.

Poté, co uložíte tyto soubory, nebo na soubory, které nemáte to štěstí, že máte vrstvené zdrojové soubory k vyladění ve Photoshopu, existuje ještě větší komprese, která z nich vyždímá.

Používám aplikaci pro Mac s názvem ImageOptim. Z jejich webu:

ImageOptim optimalizuje obrázky - takže zabírají méně místa na disku a načítají se rychleji - vyhledáním nejlepších parametrů komprese a odstraněním zbytečných komentářů a barevných profilů. Zvládá animace PNG, JPEG a GIF.

ImageOptim poskytuje GUI pro různé optimalizační nástroje: AdvPNG od AdvanceCOMP, OptiPNG, PngCrush, JpegOptim, jpegtran z libjpeg, Gifsicle a volitelně PNGOUT.

Je vynikající pro publikování obrázků na webu (snadno zmenšuje obrázky „Saved for Web“ ve Photoshopu) a je také užitečný pro zmenšení aplikací pro Mac a iPhone.

Kus dortu. Přetáhněte své obrázky (nebo složky s obrázky) do okna, prochází všemi těmito nástroji, vyladí schémata komprese a odstraní nepotřebné metadata a informace o barevném profilu (které stejně nejsou široce podporovány - před uložením byste měli opravit barevné profily, neukládat a vkládat).

Všechny nástroje spojené v tomto citátu mají verze pro Windows / Linux / Mac kromě PNGOUT, ale naštěstí někdo přenesl PNGOUT na OS X a linux, protože jsou tak promyšlené. Pokud se rozhodnete použít ImageOptim, bude obsahovat všechny kromě PNGOUT v .app, takže uchopte port PNGOUT, vložte jej do / usr / local / bin (nebo kdekoli) a řekněte ImageOptim, kde je.

Není u mě neobvyklé, zejména u obrázků PNG, že velikost souborů klesne o více než 30% i po uložení pomocí „Uložit pro web a zařízení“ Photoshopu.

Protip: Po spuštění optimalizace seřaďte podle sloupce ikon vlevo a vyberte všechny řádky s ikonou (X) - soubory, které se dále neomezovaly. Odeberte je ze seznamu a znovu spusťte všechny obrázky, které mají ikonu zaškrtnutí. Skoro vám mohu slíbit, že budete mít obrázky, které stále ztrácejí velikost souboru. Opakujte třídění, výběr, odebírání, opakované spouštění, dokud nedostanete všechny ikony (X) a nebudete to nazývat den.

  • +1 Páni! To jsou úžasné články. Jsem velmi rád, že jste je zveřejnili.
  • Jo, jsou mnohem pokročilejší ve Photoshopu než já, ale ukázal jsem je svým návrhářům a vždy se naučili něco nebo dvě.

Při ukládání fotografií ve Photoshopu doporučuji použít File > Save for Web and Devices. Umožní vám hrát s úrovněmi komprese a zobrazit vizuální výsledek v reálném čase. Na fotografie jej obvykle můžete uložit pod úroveň 8 a stále získáte skvělé výsledky.

  • 1 Mohli byste prosím zmenšit velikost tohoto obrázku? Načtení trvá několik sekund.
  • 1 JPEG je obvykle u velkých vícebarevných obrázků menší velikost souboru.

U obrázků PNG můžete snížit počet barev v mapě barev a uložit je jako indexovaný soubor PNG. Zvažte například logo o rozměrech 128 x 128 pixelů (nekomprimované). Představte si, že existuje pouze 16 barev, které skutečně používá.

  • PNG-32, čtyři bajty na pixel - 65 kB
  • PNG-8, jeden bajt na pixel - 16 kB
  • PNG-4, čtyři bity na pixel - 8 KB

Vidíte, že aniž byste snížili kvalitu obrazu (to platí pouze pro určité druhy obrázků), můžete podstatně zmenšit jeho velikost.

U tlačítek a ikon webů můžete také zvážit jejich agregaci do jednoho obrázku a použití CSS nebo JavaScriptu k ovládání jejich zobrazení (skřítci). Tím se ušetří počet požadavků HTTP provedených pro každý obrázek.

  • Seznam kromě: CSS Sprites: Image Slicing’s Kiss of Death
  • Seznam navíc: CSS Sprites2 - je čas JavaScriptu
  • CSS Sprites: Co jsou zač, proč jsou v pohodě a jak je používat

Zkuste jiné formáty.

  • JPEG pro fotografie
  • PNG pro fotografie s alfa a / nebo shaddowem
  • GIF pro obrázky s malou paletou barev (černá / bílá nebo žlutá ikona nebo tak něco)
  • v kombinaci s „Uložit na web“ je to často skvělé řešení
  • 2 PNG-8 je nejčastěji mnohem menší než odpovídající GIF.
  • 1 GIF je téměř zastaralý, kromě animace, a dokonce je nahrazen APNG.

V zásadě zkuste uložit obrázek v různých formátech a poté zkontrolujte velikost souboru.

Pokud používáte JPEG, měli byste být schopni upravit kvalitu obrazu nahoru a dolů v grafickém editoru, jako je paint.net. 50% kvalita obrazu je pro web obvykle dost dobrá a obrázek je mnohem menší.

S PNG to nemůžete udělat, ale stojí za zmínku, že někdy je PNG mnohem větší a někdy mnohem menší než JPEG. PNG je mnohem menší například pro černobílé obrázky, například černobílé perokresby.

Dnešním doporučením je použít sprity CSS ke zrychlení doby načítání snížením požadavků, ale znovu se musíte skutečně podívat na velikost obrázku, kterou získáte. Je docela možné, že obrázek CSS sprite bude mnohem větší než obrázky komponent, pokud například zkombinujete několik černobílých PNG s barevným.

  • Budu sekundovat data EXIF ​​- pokud je nepotřebujete, uložte je. Myslel jsem, že to bude malé (je to jen text, že?) Ale na některých webech jsem viděl rozdíl 30KB, kde 50KB obrázky (nahrané uživatelem - ale změněná velikost při zachování EXIF) sníženy na 20KB nebo méně při stejném nastavení kvality - pouhým odstraněním EXIF ​​dat ..

Také se chcete ujistit, že odstraňujete všechna data EXIF ​​- téměř to vše je pro uživatele na webu irelevantní, musí skutečně vědět, že jste k pořízení fotografie použili Canon 5D a že jste použili F-Stop 2,8, exponovaný po dobu 0,5 sekundy, s ISO 160, bez zkreslení expozice a ohniskovou vzdáleností 9 mm?

Všechna tato metadata přidávají vašemu obrazu váhu a obecně by měla být odstraněna.

Jak upozorňuje jessegavin, většina obrazových aplikací vám ukáže náhled účinků komprese - použijte je, protože všeobecné nastavení „8“ vám málokdy poskytne nejlepší možný kompromis.

Nakonec vám plugin Google Page Speed ​​Firefox / Firebug poskytne dobrou představu o tom, jak moc můžete zmenšit velikost obrázku (včetně umožnění prohlížení a ukládání menších verzí).

Jakmile provedete všechny ostatní návrhy, abyste zajistili, že váš obrázek bude co nejmenší, při zachování požadované úrovně kvality, budete také chtít nakonfigurovat svůj web tak, aby poskytoval obrázky s minimálními hlavičkami HTTP a ujistěte se, že záhlaví, která obsluhujete, umožňují, aby byly obrázky správně ukládány do mezipaměti proxy servery a webovými prohlížeči.

Chcete-li zmenšit velikost požadavků, ujistěte se, že je váš webový server nakonfigurován tak, aby neposílal zbytečné záhlaví, jako je X-Powered-By. Také se ujistěte, že poskytujete věci, jako jsou obrázky, CSS a další statické komponenty z hostitele, který nenastavuje soubory cookie (např. Static.example.com).

U obrázků, které jsou statické, nastavte jejich záhlaví Expires na datum v daleké budoucnosti. Tím je zajištěno, že webový prohlížeč a všechny mezipaměti proxy ve středu udrží obrázek co nejdéle. Jedinou nevýhodou je, že pokud chcete ukázat jiný obrázek, musíte místo toho použít jiný název souboru a odkaz na něj. Účinným způsobem může být číslování verzí v názvu souboru (např. Myimage_1.png nebo /images/3/logo.png). U méně statických stránek nastavte realistické záhlaví Expires (přístup plus X hodin) a ujistěte se, že nastavujete záhlaví Last-Modified nebo záhlaví eTag (ne obojí), aby prohlížeče, které si dříve stáhly soubory, mohly rychle otestovat zda mají aktuální verzi porovnáním záhlaví namísto stáhnutí celého obrázku.

Přestože je o těchto technikách k dispozici mnoho zdrojů, Yahoo odvedlo skvělou práci a přineslo mnoho tipů pro zlepšení výkonu při doručování obsahu na jednom místě.

Pracoval pro vás: Charles Robertson | Chcete nás kontaktovat?