it-swarm-eu.dev

Co mohu udělat, abych zmenšil velikost souborů mých obrázků?

Práce s některými motivy wordpress Upravoval jsem některé obrazové soubory a všiml jsem si, že mé upravené verze jsou někdy 3-4x větší než původní (uložené ve stejném formátu). Nechci snižovat kvalitu - jaké jsou některé způsoby, 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).

15
Ryan Elkins

Smashing Magazine udělal 2 skvělé články o PNG Optimization a JPG optimalizace .

Jsou do hloubky a podrobně vysvětlují některé věci, které možná nevíte o formátech a jejich implementacích. Například článek ve formátu JPEG: „Mějte na paměti, že když ve Photoshopu nastavíte kvalitu na méně než 50, spustí další optimalizační algoritmus nazvaný vzorkování barev dolů, který průměruje barvu v sousedních blocích osmi pixelů“.

Oba články se zabývají specifickými technikami, které můžete použít ve Photoshopu k přípravě souborů pro větší kompresi. Což je mnohem účinnější než techniky používané po uložení souboru.

Poté, co jste tyto soubory uložili, nebo na soubory, které nemáte to štěstí, že máte zdrojové soubory s vrstvami pro Tweak ve Photoshopu, je tu ještě větší komprese, aby se tyto soubory vyhnaly.

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

ImageOptim optimalizuje obrázky - takže zabírají méně místa na disku a rychleji se načítají - vyhledáním nejlepších parametrů komprese a odstraněním zbytečných komentářů a barevných profilů. Zpracovává 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 „Uloženo pro web“ ve Photoshopu) a také užitečné pro zmenšení aplikací Mac a iPhone.

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

Všechny nástroje propojené v této nabídce mají verze Windows/Linux/Mac kromě PNGOUT, ale naštěstí někdo portoval PNGOUT na OS X a linux, protože jsou tak promyšlené. Pokud se rozhodnete použít ImageOptim, zahrne do .app vše kromě PNGOUT, takže uchopte port PNGOUT, vložte jej do/usr/local/bin (nebo kamkoli) a řekněte ImageOptim, kde je.

Není pro mě neobvyklé, zejména u obrázků PNG, vidět, jak se velikost souborů sníží o 30%, a to i po uložení pomocí aplikace „Uložit pro web a zařízení“ Photoshopu.

Protip: Po spuštění optimalizace seřaďte sloupec ikon vlevo a vyberte všechny řádky s ikonou (X) - soubory, které nebyly dále zmenšeny. Odstraňte 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 ztratí velikost souboru. Opakujte řazení, výběr, odebrání a opětovné spuštění, dokud nezískáte všechny (X) ikony a nezavoláte to den.

14
Bryson

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 vidět vizuální výsledek v reálném čase. Na fotografiích si jej obvykle můžete uložit pod úroveň 8 a stále dosahovat skvělých výsledků. alt text

10
jessegavin

Možná budete chtít vyzkoušet Yahoo's Smush.it . Zjistil jsem, že to funguje velmi dobře.

4

U obrázků PNG můžete snížit počet barev v barevné mapě a uložit jako indexované PNG. Zvažte například logo, které je 128 x 128 pixelů (nekomprimováno). 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 bez snížení kvality obrazu (to platí pouze pro určité druhy obrázků) můžete podstatně zmenšit velikost.

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

4
dmsnell

Vyzkoušejte jiné formáty.

  • PNG pro fotografování s alfa a/nebo stínem
  • GIF pro obrázky s malou paletou barev (černobílá nebo žlutá ikona nebo tak něco)
3
Aaron

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

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

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

V dnešní době je doporučeno používat skřítky 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 obraz CSS Sprite bude mnohem větší než obrázky komponent, pokud například kombinujete několik černobílých PNG s barevným.

2
delete

Rovněž byste chtěli zajistit, že odstraňujete všechna data EXIF ​​- téměř vše je pro uživatele na webu irelevantní, opravdu potřebují vědět, že jste použili fotoaparát Canon 5D k pořízení fotografie a že jste použili F-Stop 2,8, vystavený po dobu 0,5 sekundy, s ISO 160, žádné zkreslení expozice a ohnisková vzdálenost 9 mm?

Všechna tato metadata zvyšují váhu vašeho obrázku a obecně by měla být odstraněna.

Jak ukazuje jessegavin , většina obrázkových aplikací vám ukáže náhled efektů komprese - použijte je, protože plošné nastavení „8“ vám jen zřídka poskytne nejlepší možný kompromis.

Konečně, plugin Google Page Speed Firefox/ Firebug vám může poskytnout dobrou představu o tom, kolik byste mohli zmenšit velikost obrázku (včetně umožnění prohlížení a ukládání menších verzí) .

2
1
adamcodes

Jakmile uděláte všechny ostatní návrhy, abyste zajistili, že váš obrázek je co nejmenší a zároveň si zachujete požadovanou úroveň kvality, budete chtít také nakonfigurovat svůj web tak, aby zobrazoval obrázky s minimálními hlavičkami HTTP, a ujistěte se, že záhlaví, které zobrazujete, umožňují správné uložení obrázků do mezipaměti proxy serverů a webových prohlížečů.

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

U statických obrázků nastavte záhlaví Expires na datum v nejbližší budoucnosti. Tím je zajištěno, že webový prohlížeč a všechny servery proxy pro ukládání do mezipaměti uprostřed zůstanou na obrázku co nejdéle. Jedinou nevýhodou je, že pokud chcete ukázat jiný obrázek, budete muset místo toho použít jiný název souboru a odkaz na něj. Efektivní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 realistickou hlavičku Expires (přístup plus X hodin) a ujistěte se, že nastavujete buď hlavičku Last-Modified, nebo hlavičku eTag (ne obojí), aby prohlížeče, které dříve stáhly soubory, mohly rychle otestovat zda mají aktuální verzi porovnáním záhlaví namísto stahování celého obrázku.

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

1
JasonBirch