Poskytujte obrázky ve správném měřítku na svém webu WordPress nebo Joomla

Pořiďte libovolný obrázek na svůj blog WordPress nebo Joomla. Pokud hodnotíte kvalitu, je pravděpodobné, že obrázek je dostatečně velký na to, aby se musel zmenšit, aby se vešel na stolní zařízení vašich čtenářů, natož na mobilní zařízení. Kvalita je dobrá a dobrá, ale případy, jako je tento, mají vysokou cenu.

Aby bylo možné pojmout co nejvíce různých displejů s jedním obrázkem, musíte použít velký. To se zase promítne do velkých souborů, které je třeba stáhnout v plném rozsahu i na malých zařízeních. Existuje řešení: zobrazování obrázků v měřítku v závislosti na zobrazovacím zařízení, ať už stolním, tabletovým nebo mobilním.

Poskytování zmenšených obrázků na WordPress a Joomla s CSS

Kolik místa zabírají obrázky na webových stránkách? Neexistují žádná tvrdá a rychlá pravidla, ale vzhledem k jejich důležitosti a všudypřítomnosti je odpověď určitě hodně. Pokud zobrazujete obrázky, které přesto přešlápnete, přesto má smysl být ekonomický a sloužit uživatelům WordPress nebo Joomla obrázky, které jsou již zmenšeny, aby se urychlilo načítání webových stránek.

CSS je tu, aby vám pomohlo se sadou relativně neznámých, ale neocenitelných atributů: srcset , size and media . Tyto atributy – z nichž všechny jsou podporovány většinou moderních webových prohlížečů – vám umožňují určit, které verze obrázků se mají zobrazovat v závislosti na velikosti výřezu.

Sada srcset doplňuje obvyklou src . Jak název atributu napovídá, místo určení jednoho obrázku jej použijete k určení seznamu zmenšených obrázků a šířky, kdy by měl být každý použit. Ve spojení s ním se používá size , pomocí kterého můžete definovat, kdy se mají zobrazovat obrázky na základě šířky výřezu.

Více o těchto atributech si můžete přečíst zde , ale dobrou zprávou je, že posledních pár let WordPress automaticky mění měřítko vašich obrázků a poskytuje vhodné velikosti vašim čtenářům. Výsledek je ohromující: obrázek na výšku s 511 kB je na mobilních zařízeních zmenšen na 42 kb.

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

Pokud jde o velikosti obrázků, čím menší, tím lepší, pokud není ohrožena kvalita. Ačkoli vám WordPress pomáhá pomocí srcset , můžete minimalizovat velikost obrázků, zejména změnou měřítka a kompresí obrázků.

ImageRecycle je plugin, který pro vás může současně ImageRecycle měřítko a komprimovat obrázky a je k dispozici na WordPress i Joomla. Nejlepší ze všeho je, že ImageRecycle můžete použít k automatické ImageRecycle měřítka a komprimaci obrázků.

Změna měřítka je obzvláště užitečná, pokud ve svém blogu WordPress nebo Joomla používáte obrázky ze skladu. Tyto obrázky jsou často nepřiměřeně velké, aby odpovídaly všem účelům, včetně tištěných médií. Na webu je vysoce nepravděpodobné, že byste někdy museli použít celé jejich rozlišení. S ImageRecyclemůžete automaticky ImageRecyclevelkých obrázků na maximální výšku nebo šířku při nahrávání.

Doplněním změny měřítka je komprese, která optimalizuje velikost obrazu bez ztráty kvality. Se ztrátovou kompresí můžete omezit obrazový prostor až o 80%. To platí nejen pro původní obrázky, ale také pro obrázky se změněnou velikostí WordPress. ImageRecycle může udělat znovu automaticky za vás.

To, co vidíte jako několik kilobajtů navíc, může znamenat drahocenný ztracený čas pro vaši čtenářskou obec. Dobrou zprávou je, že nemusíte obětovat kvalitu za časy načítání. Díky chytřejšímu využití CSS a ImageRecyclea optimalizace ImageRecyclemůžete mít vysoce kvalitní obrázky, které se přizpůsobí zařízením vašich čtenářů.