Nemáte rádi obrázky?

Dokážou proměnit text v poutavý zážitek při čtení. Obrázky vylepšují příspěvek na blogu, umožňují jeho sdílení a udávají tón a značku celého webu.

A víte co? Jsme pevně předurčeni k tomu, abychom reagovali na obrázky. Proto je začlenění obrázků do vašeho obsahu mocným nástrojem, který můžete použít při marketingu vašeho blogu.

Pokud si však nedáte pozor, mohou obrázky tvořit více než polovinu (nebo i více) celkové velikosti webové stránky. Ještě před několika lety byla průměrná velikost webové stránky 600-700 K. Nyní je průměrná velikost 2 MB a každým rokem se zvyšuje.

To je obrovské!

Hlavním důvodem, proč k tomu dochází, je to, že se na webových stránkách stále častěji používá více obrázků, které nejsou správně dimenzovány a optimalizovány. To znamená, že nejsou uloženy nebo zkompilovány způsobem vhodným pro web a místo toho zbytečně zvětšují stránky.

Většina z nás však optimalizaci obrázků ponechává na vedlejší koleji a raději se věnuje zábavným věcem, jako je tvorba epického příspěvku nebo navazování kontaktů s ostatními blogery ve vašem oboru.

Zvětšování stránek však znamená, že je ovlivněna rychlost jejich načítání. Pokud máte vysokorychlostní připojení, možná si myslíte, že to není velký problém, ale mnoho vašich návštěvníků to tak nemá. Také Google nemá rád pomalu se načítající stránky a může to negativně ovlivnit vaši SEO.

Proč je třeba optimalizovat obrázky

Tvrdě pracujete na vytváření hvězdného obsahu a trávíte nespočet hodin propagací svého blogu a navazováním kontaktů s ostatními blogery, takže poslední, co chcete, je, aby potenciální návštěvníci opustili vaše webové stránky ještě před jejich načtením!

Studie ukazují, že až 40 % návštěvníků klikne na tlačítko zpět, pokud načítání webu trvá déle než tři sekundy.

Vím, že tři sekundy opravdu nejsou tak dlouhá doba, ale když jste na mobilním připojení a čekáte na načtení webu, může se vteřina zdát jako věčnost.

A protože mnoho vašich návštěvníků může používat pomalejší mobilní připojení, je jasné, že potřebujete snížit velikost stránky. A už víme, co je největším viníkem nadměrné velikosti stránky - jsou to vaše obrázky.

Zbytečně velké obrázky také zabírají místo na vašem hostingovém účtu. Zatímco někteří z vás mohou mít hosting s "neomezeným" úložným prostorem, mnoho poskytovatelů prémiového hostingu omezuje úložný prostor na přibližně 10 GB u tarifů nižší úrovně. To se může rychle zaplnit, zejména pokud na jednom účtu hostujete více webů s velkým množstvím obrázků.

Jak zjistíte, zda vaše obrázky zpomalují váš web? Otestujte rychlost svého webu pomocí nástroje Google PageSpeed Insights.

Pokud Google hlásí neoptimalizované obrázky jako problém, zde jsou informace, které potřebujete k nápravě.

Základy optimalizace obrázků

Pokud jde o optimalizaci obrázků na blogu, je třeba si uvědomit několik různých věcí: typ souboru, velikost a rozměry obrázku, způsob, jakým obrázky zobrazujete, a kompresi obrázků.

Podívejme se na každou z těchto oblastí blíže.

Typ souboru

Obrázky na webu se obvykle ukládají ve formátu PNG nebo JPEG - případně GIF pro animace. Kdo by neměl rád ty veselé animované GIFy, které kolují po webu!

Nyní je to technicky Dobře pokud uložíte obrázky v obou formátech - prohlížeč návštěvníka nebude mít problémy se zobrazením vaší webové stránky - ale pro nejlepší kvalitu a optimalizaci se držte následujících pravidel:

• JPEG - použijte pro fotografie a návrhy, na kterých jsou zobrazeny osoby, místa nebo věci.
• PNG - nejlepší pro grafiku, loga, návrhy s velkým množstvím textu, snímky obrazovky a pro obrázky s průhledným pozadím.
• GIF - pokud potřebujete animaci, jinak použijte PNG

Proč tedy existují různé formáty?

PNG se tradičně používá pro ukládání log a grafiky, protože zachovává původní kvalitu obrázku - nikdo nechce rozmazaný text a rozpixelované tvary. Pokud však zkusíte uložit fotografii jako PNG, bude vypadat úžasně, ale výsledná velikost souboru bude méně než úžasná.

JPEG se tradičně používá pro ukládání fotografií. Část obrazových dat je vyřazena, aby se dosáhlo výrazně menší velikosti souboru, ale protože fotografie obsahují širokou škálu barev a přirozených variací, ztráta kvality je pro lidské oko obvykle nepostřehnutelná.

Podrobněji se kompresi budeme věnovat později, ale pokud si zatím pamatujete jen dvě věci, zapamatujte si: JPEG pro fotografie a PNG pro text/grafiku.

Rozměry obrázku

Už jste někdy načetli webovou stránku a všimli jste si, že se malý obrázek (například fotografie hlavy) stahuje tak pomalu, že vidíte každý řádek? Říkáte si, jak je možné, že se tak malý obrázek stahuje tak dlouho?

A když se to stane velkému obrázku v záhlaví, je to ještě horší, protože to může zdržet načítání celé stránky.

Důvodem je to, že blogger správně nezměnil velikost a neoptimalizoval svůj obrázek a v případě našeho příkladu snímku hlavy možná nahrál JPEG v plném rozlišení přímo ze své digitální zrcadlovky.

A to je obrovský soubor!

Webový prohlížeč (obvykle) zmenší obrázek oproti jeho původním rozměrům tak, aby se dobře vešel na své místo na webové stránce. To, co se na obrazovce jeví jako malý obrázek, může být ve skutečnosti obrovská desetimegapixelová fotografie, kterou prohlížeč v reálném čase zmenšil.

Některé platformy pro publikování na webu automaticky vytvoří několik variant obrázku v plném rozlišení a v různých velikostech, ale pokud tomu tak není, měli byste předem změnit velikost obrázků v editoru obrázků, jako je Photoshop, Lightroom, Pixlr - nebo dokonce MS Paint. Může to znamenat rozdíl mezi 50kilovým a 5MB souborem.

WordPress například automaticky vytvoří tři (nebo více, v závislosti na motivu) kopie nahraného obrázku - všechny s různými rozměry - které můžete použít v příspěvcích na blogu, místo abyste vždy použili obrázek v plné velikosti.

Pokud máte ve zvyku nahrávat obrovské obrázky fotografií a chcete ušetřit místo na svém hostingovém účtu, plugin WordPress Imsanity vám kryje záda.

Změní velikost původního obrázku a nahradí jej jiným, takže i když do příspěvku vložíte obrázek v plné velikosti, nebude to tak hrozné.

Po aktivaci může Imsanity také prohledávat vaše stávající obrázky a podle toho měnit jejich velikost.

Podávání obrázků

Způsob, jakým návštěvníkům servírujete obrázky, není sám o sobě vyloženě o optimalizaci, ale může mít zásadní vliv na dobu načítání stránky.

Většina blogerů zobrazuje své obrázky přímo ze svého hostingového účtu a to je obvykle v pořádku, ale pokud chcete ze svého webu opravdu vytěžit co nejvíce výkonu, pak může být hostování obrázků v síti pro doručování obsahu (CDN) velkým přínosem.

Síť CDN se skládá ze strategicky rozmístěných webových serverů umístěných v datových centrech po celém světě. Na těchto serverech jsou umístěny duplicitní kopie vašich obrázků, a když prohlížeč návštěvníka požádá o obrázek z vašich webových stránek, síť CDN automaticky přesměruje prohlížeč na server, který je mu geograficky nejblíže.

To znamená, že například návštěvníci z Evropy obdrží obrázky z místního evropského serveru, nikoli ze serveru ve Spojených státech nebo jinde. Protože se sníží doba odezvy a latence sítě, obrázky se stahují mnohem rychleji, čímž se zkrátí doba načítání stránek.

Blogging Wizard používá Sucuri (obsahuje firewall pro zabezpečení i CDN), ale existují i další kvalitní poskytovatelé, jako je Cloudfront od Amazonu nebo KeyCDN. Dokonce i populární CloudFlare, který není striktně CDN, nabízí CDN zdarma a lze jej snadno nastavit ve většině sdílených hostingových balíčků.

Komprese obrazu

Pokud jde o optimalizaci obrázků, nic nezmenší velikost souboru více než pokročilá ztrátová komprese obrázků.

Většina nástrojů pro úpravu obrázků, jako je Visme nebo Photoshop, ukládá soubory pomocí ztrátové komprese JPEG, protože ta nejlépe snižuje velikost souboru. Takže zatímco kvalita obrázku je mírně snížena, použití ztrátové komprese zmenší obrovské obrázky na velikost vhodnou pro web.

Jsem si jistý, že mnozí uživatelé Photoshopu mohou považovat jeho Uložit pro web funkci, která je pro optimalizaci obrázků tím nejlepším a nejzajímavějším. A dokonce i online nástroje pro úpravu obrázků, jako je PicMonkey nebo Visme, optimalizují vaše obrázky také.

Věděli jste ale, že existují nástroje, které dokáží vzít váš "optimalizovaný" obrázek z Photoshopu nebo jiných nástrojů pro úpravy, zmačkat ho a zkomprimovat o dalších 40 % (nebo i více) a. stále aby vypadal téměř stejně jako lidské oko?

Zde je několik bezplatných i placených nástrojů, které vám pomohou zmenšit obrázky do stavu vhodného pro web.

Nástroje pro stolní počítače

ImageAlpha / ImageOptim

Pro uživatele počítačů Mac je ImageOptim bezplatný nástroj pro stolní počítače, který používám každý den k optimalizaci obrázků PNG - většinou snímků obrazovky - před jejich odesláním. Tyto nástroje se snadno používají, stačí přetáhnout soubory, ale je třeba provádět optimalizaci po jednom obrázku.

Profesionální tip : Pro technicky zdatné uživatele je k dispozici ImageOptim-CLI, kde můžete optimalizovat celou složku obrázků najednou.

ImageAlpha je ztrátový kompresor PNG a dokáže zázraky při zmenšování souborů PNG, zatímco ImageOptim provádí pokročilou bezeztrátovou (s možností ztrátové) kompresi - a odstraňuje zbytečná metadata ze souborů PNG, JPEG a GIF.

Obrázky PNG nejprve procházím programem ImageAlpha:

Zde se mi zmenšil obrázek ze 103K na 28K.

Poté jsem ji prohnal programem ImageOptim a ušetřil dalších 10 %.

JPEGmini

Soubory JPEG optimalizuji pomocí desktopové aplikace JPEGmini, která je k dispozici pro Mac i Windows.

Verze Lite umožňuje optimalizovat až 20 obrázků denně zdarma, odstranění limitu stojí 19,99 USD.

Profesionální tip : Pokročilí uživatelé, kteří chtějí integrovat JPEGmini do Photoshopu nebo Lightroomu prostřednictvím zásuvného modulu, si mohou zakoupit verzi Pro za 99,99 USD.

Online / Cloud / SaaS nástroje

TinyPNG

Pokud hledáte kvalitní online nástroj pro kompresi obrázků, TinyPNG (navzdory názvu optimalizuje i soubory JPEG) je webová aplikace, která vám umožní přetáhnout do prohlížeče až 20 5MB nebo menších obrázků a všechny je najednou optimalizovat.

Mají také rozhraní API pro vývojáře a k dispozici plugin pro WordPress, který dokáže automaticky optimalizovat obrázky při nahrávání.

TinyPNG poskytuje 500 bezplatných optimalizací obrázků měsíčně a poté si účtuje 0,002-0,009 USD za obrázek v závislosti na objemu.

500 obrázků za měsíc se může zdát jako hodně, ale když vezmete v úvahu, že WordPress často vytváří tři až pět variant každého obrázku v různých velikostech, 500 obrázků se nezdá být příliš. že mnoho pro plodné bloggery. Naštěstí je cena za obrázek finančně nenáročná.

EWWW Image Optimizer

Pokud nechcete utrácet peníze a nechcete se obtěžovat s ruční optimalizací obrázků, bezplatný doplněk EWWW Image Optimizer pro WordPress dokáže automaticky optimalizovat nahrané obrázky.

Můžete si zvolit prémiové předplatné, které provádí ztrátovou kompresi, ale bezplatná verze provádí pouze bezeztrátovou kompresi, takže úspora není tak výrazná. Ušetří vám to však čas a je to lepší než nic.

Poznámka: Kompletní přehled najdete v našem příspěvku o nástrojích pro kompresi obrázků.

Jak to zabalit

Někteří lidé předpovídají, že průměrná velikost webové stránky se do roku 2017 přiblíží 3 MB, a proto je nyní nejvyšší čas začít s optimalizací obrázků.

Nezapomeňte, že ne všichni vaši návštěvníci budou mít vysokorychlostní připojení, a proto může mít nadměrná velikost stránek a pomalé načítání stránek potenciální vliv na vaše hodnocení v Googlu. Abyste si takříkajíc ulehčili práci, zvykněte si optimalizovat své obrázky ještě dnes.

Věnujte pozornost rozměrům obrázků a změňte velikost příliš velkých fotografií nebo obrázků z digitálního fotoaparátu na vhodnou velikost.

Dále využijte moderní kompresi obrázků pomocí desktopových aplikací, jako je JPEGmini, nebo cloudových nástrojů, jako je TinyPNG nebo Kraken - pokud je to možné, integrujte je do WordPressu pomocí pluginu.

A konečně, pokud vaše publikační platforma automaticky vytváří zmenšené varianty původního obrázku, vyberte pro svůj příspěvek na blogu raději jednu z nich než původní obrázek v plné velikosti.

Související čtení: 7 způsobů, jak zmenšit velikost souborů PDF.