Online změna velikosti a optimalizace obrázku

Pokud máte shluk úžasných obrázků, jsem si jistý, že byste je rádi sdíleli se svými klienty na svých webových stránkách. Můžete vytvořit krásnou prezentaci, vytvořit galerie nebo jednoduše vložit obrázek na jednu stránku nebo blog. Ať už zvolíte kteroukoli možnost, u nespecializovaného editoru obsahu narazíte na jeden problém: změna velikosti obrázku.

Níže uvádíme některá doporučení pro změnu velikosti obrázku, která pro vás budou užitečná.

Přizpůsobte velikost obsahu

Vždy měňte velikost obrázků podle velikosti obsahu nebo podle šířky obsahu. Pokud je například vaše oblast obsahu omezena na šířku 650 pixelů, pak není požadováno, aby velikost vašeho obrázku přesahovala 650 pixelů, protože vaše stránka bude zobrazovat pouze 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ů webu

V žádném obrysu webové stránky nebude žádný dojem „na palec“. PPI, tedy pixely na palec a DPI, což jsou body na palec, nemají žádný význam, když upravujete nebo měníte velikost obrázku pro jakýkoli účel, jako je posílání e-mailů, blogování nebo sdílení na sociálních sítích. Kromě tisku na obrazovce nebudete moci rozlišovat vlastnosti nebo kvalitu obrazu.

To platí zejména pro PDF , vyhněte se zpřístupnění PDF pro čtení na webu, které obsahuje obrázky s rozlišením vyšším než 72 dpi. V tomto případě ImageRecycle , optimalizovat PDF s obrázky 300 dpi uvnitř a můžete ušetřit 98 % velikosti PDF s perfektní kvalitou, kterou lze číst 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% komprese. Můžete také provést nějaké testování s různými přednostmi JPEG, které vám nejlépe vyhovují. Použití globální komprese je otázkou rovnováhy mezi velikostí a kvalitou.

Nyní s algoritmem optimalizace obrazu ImageRecycle je proces zcela odlišný. ImageRecycle zjišťuje aktuální kompresní poměr obrazu a s ohledem na to obraz optimalizuje. Vzhledem k tomu, že komprese není aplikována na celý obrázek, budete opravdu ohromeni níže uvedeným testem.

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

V níže uvedeném příkladu jsem exportoval 4 obrázky jpg pomocí photoshopu na úrovni kvality: 60% |
80 % | 90 % | 100 % Pak jsem optimalizoval obrázky pomocí ImageRecycle , zde je výsledek velikosti. Pokud jde o kvalitu, 90/100% je o něco lepší než 2 ostatní. Ponaučení zní: exportujte své obrázky jpg co nejméně komprimované, ImageRecycle se postará o zbytek!

Optimalizujte výsledné obrázky

V závislosti na webu, který provozujete, mohou být stejné obrázky zobrazeny na různých stránkách s různou velikostí. Toto je typicky něco, co najdete na elektronickém obchodu s posuvníkem, výpisem produktu, podrobnostmi o produktu,...
Proces změny velikosti obvykle provádí online php knihovna, jako je GD. Ujistěte se, že kvalita a hmotnost vašich originálních a konečných uživatelských obrázků. Nevěřte online knihovnám a generátoru mezipaměti nebo můžete mít problém s kvalitou a velikostí. Pokud je váš původní obrázek již z vaší strany optimalizován (vyladěním mezi kvalitou, barvami, kompresí), abyste ušetřili šířku pásma a načítání stránky, můžete s některými knihovnami pro změnu velikosti webových rozšíření o vše přijít!

Řešení:

• Aplikujte optimalizaci na obrázek, který se zobrazí ve vašem konečném klientském prohlížeči. Můžete to udělat ručně u každého obrázku a pro každou velikost nebo použít naše rozšíření API nebo CMS ImageRecycle k výběru složky, kde jsou uloženy vaše konečné obrázky. Poté na něm spusťte automatickou optimalizaci.
• Použijte náš resizer pro originální obrázky. Můžete ušetřit úložiště na serveru, rychleji manipulovat s obrázky a obvykle nepotřebujete obrázek o šířce větší než 1600 pixelů na konečném zobrazení

Co bude dál: HTML5 a živel

Techniky responzivního návrhu, které zahrnují dotazy na média, jsou pro webdesignéry způsob, jak přizpůsobit rozvržení webu široké škále zařízení, od stolních počítačů po chytré telefony, a zajistit, aby vypadalo konzistentně ostře. Problém zde není v displeji, ale ve výkonu, to je obraz plochy, který se zobrazuje a načítá na smartphonu a tabletu.

The HTML5 element se snaží tento problém vyřešit. Výhodou nativně optimalizovaného zdroje obrázků je doba načítání – zvláště důležitá pro uživatele s pomalejším mobilním internetovým připojením. The umožňuje skutečnou dynamickou změnu velikosti pouhým zadáním HTML instrukce do prohlížeče.

Výňatek kódu:

Omezení v tuto chvíli je, že to vyžaduje velmi aktuální verzi Chrome (39) a některé JS, aby správně fungovaly. V blízké budoucnosti, s touto technologií spojenou s optimalizátorem obrázků, můžeme očekávat to nejlepší pro dobu načítání webu.