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

Pořiďte si jakýkoli obrázek na svém blogu WordPress nebo Joomla. Pokud hodnotíte kvalitu, je pravděpodobné, že obraz je dostatečně velký, aby byl přizpůsoben stolním zařízením vašich čtenářů, natož mobilním zařízením. Kvalita je v pořádku a dobrá, ale případy, jako je tento, přicházejí se statnou cenou.

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 kartu src . Jak vyplývá z názvu atributu, místo určení jediného obrázku jej použijete k určení seznamu zmenšených obrázků a šířky, kdy mají být použity. Ve spojení s ním se používá atribut velikosti , pomocí kterého můžete určit, kdy se mají obrázky zobrazovat na základě šířky výřezu.

Další informace o těchto atributech si můžete přečíst zde , ale dobrou zprávou je, že za posledních několik let WordPress automaticky změní měřítko vašich obrázků a vašim čtenářům zobrazí příslušné velikosti. Výsledek je ohromující: portrétní obraz s 511 kB je u mobilních zařízení sníž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 ImageRecycle můžete automaticky ImageRecycle velký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 ImageRecycle a optimalizace ImageRecycle můžete mít vysoce kvalitní obrázky, které se přizpůsobí zařízením vašich čtenářů.