Online změna velikosti a optimalizace obrázků

Pokud máte spoustu úžasných obrázků, jsem si jistý, že se o ně rádi podělíte se svými klienty na svých webových stránkách. Můžete vytvořit krásnou prezentaci, galerie nebo jednoduše vložit obrázek na jednu stránku nebo blog. Ať už si vyberete jakoukoli možnost, bude existovat jeden problém, se kterým se setkáte u nespecializovaných editorů obsahu: změna velikosti obrázků.

Níže naleznete několik doporučení pro změnu velikosti obrázků, která vám budou užitečná.

Přizpůsobte velikost svému obsahu

Vždy upravujte velikost obrázků podle velikosti obsahu nebo podle šířky obsahu. Pokud je například oblast obsahu omezena na 650 pixelů na šířku, není nutné upravovat velikost obrázku nad 650 pixelů, protože stránka zobrazí pouze do 650 pixelů. Pokud je vlastnost velikosti obrázku menší nebo větší než kontejner, kvalita zobrazení se zhorší.

Přizpůsobte rozlišení obrázků pro web

V žádném webu se neobjeví žádný výraz „na palec“. PPI, tedy pixely na palec, a DPI, tedy body na palec, nemají žádný význam při úpravě nebo změně velikosti obrázku pro jakýkoli účel, jako je odesílání e-mailem, blogování nebo sdílení na sociálních sítích. S výjimkou tisku a zobrazení na obrazovce nebudete moci rozlišit mezi vlastnostmi nebo kvalitou obrázku.

To platí zejména pro PDF soubory , vyhněte se zpřístupňování PDF souborů pro čtení na webu, které obsahují obrázky s rozlišením vyšším než 72 dpi. V tomto případě ImageRecycle PDF, který optimalizuje PDF s obrázky s rozlišením 300 dpi a ušetří 98 % velikosti PDF souboru s perfektní kvalitou pro čtení na webu.

Nejlepší kvalita exportu JPG s ImageRecycle

Při použití Photoshopu se pro web doporučuje ukládat obrázky JPEG s max. 20% kompresí. Můžete také provést testování s různými vlastnostmi JPEGu, které vám nejlépe vyhovují. Použití globální komprese je otázkou rovnováhy mezi velikostí a kvalitou.

S algoritmem optimalizace obrazu ImageRecycle je proces zcela odlišný. ImageRecycle detekuje aktuální kompresní poměr obrazu a na základě toho jej optimalizuje. Protože komprese není aplikována na celý obrázek, budete níže uvedeným testem skutečně ohromeni.

Mějte na paměti: čím méně je původní obrázek komprimovaný, tím lepší bude optimalizace a velikost.

V níže uvedeném příkladu jsem exportoval 4 obrázky jpg pomocí Photoshopu v kvalitě: 60% | 80% | 90% | 100%.
Poté jsem obrázky optimalizoval pomocí ImageRecycle , zde je výsledná velikost. Co se týče kvality, 90/100% je o něco lepší než ostatní 2. Ponaučení zní: exportujte obrázky jpg co nejméně komprimované, ImageRecycle se postará o zbytek!

Optimalizace finálních obrázků

V závislosti na webové stránce, kterou provozujete, se stejné obrázky mohou zobrazovat na různých stránkách s různými velikostmi. To obvykle najdete v e-shopech se sliderem, v seznamech produktů, v podrobnostech o produktech atd.
Proces změny velikosti obvykle provádí online PHP knihovna, jako je GD. Ujistěte se o kvalitě a hmotnosti PŮVODNÍCH a FINÁLNÍCH obrázků uživatelů. Nedůvěřujte online knihovnám a generátorům mezipaměti, jinak můžete mít problém s kvalitou a velikostí. Pokud je váš původní obrázek již optimalizován (jemným doladěním kvality, barev, komprese) pro úsporu šířky pásma a načítání stránky, s některými knihovnami pro změnu velikosti webových rozšíření můžete o toto vše přijít!

Řešení:

• Optimalizaci použijte na obrázek zobrazený v prohlížeči vašeho finálního klienta. Můžete to provést ručně u každého obrázku a pro každou velikost, nebo použít naše API či rozšíření ImageRecycle pro CMS k výběru složky, kde jsou uloženy vaše finální obrázky. Poté na něm spusťte automatickou optimalizaci.
• Použijte náš program pro změnu velikosti originálních obrázků. Ušetříte místo na serveru, budete moci s obrázky manipulovat rychleji a obvykle nepotřebujete obrázky o šířce větší než 1600 pixelů

Co bude dál: HTML5 a<picture> živel

Techniky responzivního designu, které zahrnují mediální dotazy, jsou pro webové designéry způsobem, jak přizpůsobit rozvržení webu široké škále zařízení, od stolních počítačů po chytré telefony, a zajistit, aby web vypadal konzistentně ostře. Problém zde není v zobrazení, ale ve výkonu, tedy v obrázku na ploše, který se zobrazuje a načítá na chytrých telefonech a tabletech.

Ten/Ta/To<picture> Prvek HTML5 se snaží tento problém vyřešit. Výhodou nativně optimalizovaného obrazového zdroje je doba načítání – což je obzvláště důležité pro uživatele s pomalejším mobilním internetovým připojením.<picture> Element umožňuje skutečnou dynamickou změnu velikosti pouhým zadáním HTML instrukce prohlížeči.

Výňatek z kódu:

Momentálním omezením je, že pro správné fungování je vyžadována velmi aktuální verze Chromu (39) a nějaký JavaScript. V blízké budoucnosti můžeme s touto technologií spojenou s optimalizátorem obrázků očekávat nejlepší možnou dobu načítání webových stránek.