Zobrazujte správně škálované obrázky na svém webu WordPress nebo Joomla

Vezměte si jakýkoli obrázek na svém blogu na WordPressu nebo Joomle. Pokud hodnotíte kvalitu, je pravděpodobné, že obrázek je dostatečně velký na to, aby se vešel na stolní počítače čtenářů, natož na mobilní zařízení. Kvalita je sice dobrá, ale případy, jako je tento, mají vysokou cenu.

Aby se na jeden obrázek zobrazovalo co nejvíce různých displejů, je nutné použít velký obrázek. To se následně promítá do velkých souborů, které je nutné stáhnout vcelku i na malá zařízení. Existuje řešení: zobrazování obrázků v závislosti na zobrazovacím zařízení, ať už se jedná o stolní počítač, tablet nebo mobilní telefon.

Zobrazování zmenšených obrázků na WordPressu a Joomle pomocí CSS

Kolik místa zabírají obrázky na webových stránkách? Neexistují žádná pevná pravidla, ale vzhledem k jejich důležitosti a všudypřítomnosti je odpověď rozhodně velká. Pokud zobrazujete obrázky, které stejně nakonec budete muset zmenšovat, dává smysl být úsporný a zobrazovat uživatelům WordPressu nebo Joomly obrázky, které jsou již zmenšené, aby se zrychlilo načítání webu.

CSS slouží k pomoci se sadou relativně neznámých, ale neocenitelných atributů: srcset , sizes a media . Tyto atributy – které všechny podporuje většina moderních webových prohlížečů – umožňují určit, které verze obrázků se mají zobrazovat v závislosti na velikosti zobrazované oblasti.

Atribut srcset doplňuje obvyklou src . Jak název atributu napovídá, místo zadání jednoho obrázku jej používáte k určení seznamu obrázků s upraveným měřítkem a šířky, kdy se má každý z nich použít. Ve spojení s ním se používá sizes , pomocí kterého můžete definovat, kdy se mají obrázky zobrazovat na základě šířky zobrazovacího okna.

Více se o těchto atributech můžete dočíst zde , ale dobrou zprávou je, že WordPress v posledních několika letech automaticky upravuje velikost obrázků a zobrazuje je čtenářům ve správných velikostech. Výsledek je ohromující: portrétní obrázek o velikosti 511 kB se na mobilních zařízeních zmenší na 42 kB.

Automatické změny měřítka a optimalizace pomocí ImageRecycle

Pokud jde o velikosti obrázků, čím menší, tím lepší, pokud to neovlivní kvalitu. Ačkoli vám WordPress pomáhá pomocí srcset , existuje více možností, jak minimalizovat velikost obrázků, zejména změnou měřítka a kompresí obrázků.

ImageRecycle je plugin, který dokáže současně měnit velikost a komprimovat obrázky a je k dispozici pro WordPress i Joomlu. A co je nejlepší, ImageRecycle můžete použít k automatické změně velikosti a kompresi obrázků.

Změna měřítka je obzvláště užitečná, pokud na svém blogu na WordPressu nebo Joomle používáte obrázky z fotobanky. Tyto obrázky jsou často neúměrně velké, aby se daly použít pro všechna použití, včetně tištěných médií. Na webu je velmi nepravděpodobné, že byste někdy museli použít celé jejich rozlišení. Pomocí ImageRecyclemůžete při nahrávání automaticky zmenšit velké obrázky na maximální výšku nebo šířku.

Doplňkem změny měřítka je komprese, která optimalizuje velikost obrázku bez ztráty kvality. Díky ztrátové kompresi můžete omezit prostor na obrázku až o 80 %. To platí nejen pro původní obrázky, ale i pro obrázky upravené pomocí WordPressu. ImageRecycle to opět dokáže automaticky za vás.

To, co vnímáte jako pár kilobajtů navíc, může pro vaše čtenáře znamenat drahocennou ztrátu času. Dobrou zprávou je, že nemusíte obětovat kvalitu kvůli době načítání. Díky chytřejšímu využití CSS a změně měřítka a optimalizaci ImageRecyclemůžete mít vysoce kvalitní obrázky, které se přizpůsobí zařízením vašich čtenářů.