Responzivní obrázek v Joomle s využitím srcsetu a komprese

Optimalizace? Zaškrtnuto. Lazy loading ? Zkontrolujte to znovu. Váš web Joomla! se i tak zdá neohrabaný a jeho načítání na mobilních zařízeních a pomalém připojení trvá příliš dlouho. Nezoufejte – v tomto okamžiku se hodí struktura HTML, přesněji řečeno, zdrojové sady obrázků nebo srcset .

Možná váš blog na platformě Joomla! používá vysoce kvalitní obrázky a vy se jich prostě nemůžete – nebo nechcete – zbavit. To není důvod k obavám. S pluginem Droppics od Joomla! můžete nejen aplikovat obecnou optimalizaci obrázků, ale také zobrazovat různé soubory v závislosti na zařízeních uživatelů.

Responzivní obrázky s HTML srcset

Pokud jste se někdy zabývali HTML, víte, že obrázky jsou definovány atributem source – src . Zdroj obrázku je umístění, odkud prohlížeče načítají obrázky, které se zobrazují uživatelům Joomla!. Problém s používáním konzistentního zdroje pro konkrétní obrázek spočívá v tom, že se vždy načte stejný soubor, bez ohledu na jeho velikost.

Například pokud máte v horní části článku hlavní banner, stejný obrázek se načte na všech zařízeních. Prohlížeče obrázek stáhnou a poté ho zmenší, někdy drasticky, zejména na mobilních zařízeních. V moderních prohlížečích můžete definovat nejen zdroj obrázků, ale sadu zdrojů – zdrojovou sadu srcset .

Jak název napovídá, zdrojová sada je seznam zdrojů, nikoli jeden zdroj. Každý zdroj je přiřazen k šířce prohlížeče, takže mobilní zařízení stahují malé obrázky a uživatelé, kteří přistupují k vašemu blogu Joomla! z počítačů, stahují obrázky v plném rozlišení. Jinými slovy, sada zdrojů obrázků transformuje obrázky na responzivní obrázky.

Výsledkem používání sad zdrojových kódů není jen rychlejší načítání, ale také lepší skóre SEO. To vše za nízkou cenu v podobě kopií stejného obrázku s různým rozlišením, které jsou snadno dostupné, když je uživatelé potřebují. Více o srcset a všem ostatním, co se týká sad zdrojových kódů, zde , ale pokud se netrpělivě těšíte, až je začnete používat na svém blogu Joomla!, čtěte dál.

Zobrazování zmenšených obrázků na Joomla! pomocí Droppics

Droppics možná znáte jen jako rozšíření pro správu galerií v Joomla!, ale pod kapotou se děje spousta věcí, o kterých možná nevíte. Příklad: Droppics nyní používá zdrojový kód k načítání správných obrázků pro vaše uživatele. Pokud o této funkci nevíte, je možné, že ji ani nevyužíváte.

Chcete-li na svém blogu Joomla! použít atribut srcset, musíte jej nejprve aktivovat v konfiguraci Droppics. V nastavení Droppics přejděte na kartu hlavních parametrů v první nabídce responzivní obrázky

Jak responzivních obrázků , povolením tohoto nastavení vytvoří Droppics pro každý obrázek Joomla! dvě nové miniatury. Tyto miniatury jsou samotné responzivní obrázky, které se vykreslují v závislosti na zařízení použitém pro přístup k vašemu blogu Joomla!.

Když vytvoříte příspěvek a vložíte obrázek z Droppics, rozšíření automaticky nastaví zdrojovou sadu (srcset ). Nevěříte nám? Prohlédněte si HTML kód ve frontendu a najdete tam několik zdrojů pro různé velikosti zařízení.

Obecná optimalizace je v pořádku, stejně jako lazy loading, ale někdy toho nemůžou dělat moc. V některých případech může být klíčem k překonání pomalého načítání použití moderní HTML techniky, která spočívá v poskytování sad zdrojového kódu obrázků namísto jednotlivých zdrojů.

Ale počkejte, to není všechno. Stále chybí jeden dílek skládačky.

Komprimace obrázků srcset v Joomla!

Možná vás zajímá, zda se vyplatí mít více kopií stejného obrazu. Možná chcete ušetřit místo na serveru, nebo se obáváte, že se nové obrazy budou hromadit. Jen proto, že používáte zdrojovou sadu, neznamená to, že ji nemůžete kombinovat s jinými optimalizačními technikami, jako je komprese.

ImageRecycle je k dispozici také na Joomla! a můžete jej bez problémů integrovat s Droppics. Dokonce jej můžete nakonfigurovat tak, aby automaticky komprimoval obrázky zdrojového kódu Joomla! ihned po jejich vygenerování. Se ztrátovou neboli „best saving“ kompresí můžete ušetřit až 80 % a s bezztrátovou neboli „original“ kompresí až 20 %. Více o rozdílu si můžete přečíst zde .

Můžete nastavit ImageRecycle tak, aby automaticky komprimoval obrázky, v konfiguraci rozšíření v Joomla!. Odtud přejděte na Upřesnit a povolte optimalizaci médií při ukládání . Případně můžete ručně vybrat, které obrázky chcete optimalizovat, prostřednictvím rozhraní ImageRecycle

Doba načítání je mnohostranný problém. Musíte současně minimalizovat velikost souborů, zachovat kvalitu a ušetřit místo na úložišti. Díky magické sadě zdrojového kódu Droppics a kompresi ImageRecycleje to vše nejen možné, ale může to být i snadný a automatizovaný proces.