Joomla Responsive Image using srcset and Compression

Optimalizace? Šek. Lazy loading ? Zkontrolovat znovu. Přesto vaše Joomla! webové stránky působí neohrabaně a jejich načítání na mobilních zařízeních a pomalém připojení trvá příliš dlouho. Nezoufejte – v tomto případě se hodí struktura HTML; přesněji, zdrojové sady obrázku nebo srcset .

Možná vaše Joomla! blog používá obrázky ve vysoké kvalitě a vy s nimi prostě nemůžete - nebo nechcete -. To není důvod k obavám. S pluginem Joomla! 'S Droppics můžete použít nejen obecnou optimalizaci pro obrázky, ale obsluhovat různé soubory v závislosti na zařízeních uživatelů.

Citlivé obrázky s HTML srcset

Pokud jste někdy fušovali do HTML, budete vědět, že obrázky jsou definovány zdrojovým atributem — src . Zdroj obrázků je místo, odkud prohlížeče načítají obrázky pro zobrazení do vašeho Joomla! uživatelů. Problém s použitím konzistentního zdroje pro konkrétní obrázek je ten, že bude vždy načten stejný soubor, bez ohledu na jeho velikost.

Pokud máte například v horní části článku banner hrdiny, načte se stejný obrázek na všech zařízeních. Prohlížeče stahují obrázek a poté jej zmenšují, někdy drasticky, zejména na mobilních zařízeních. V moderních prohlížečích můžete definovat nejen zdroj pro obrázky, ale také sadu zdrojů – zdrojovou sadu srcset .

Jak název napovídá, zdrojová sada je seznam zdrojů, nikoli jeden zdroj. Každý zdroj je spojen s šířkou prohlížeče, takže mobilní zařízení stahují malé obrázky a uživatelé přistupují k vašemu Joomla! blog z počítačů stáhněte si obrázek v plném rozlišení. Jinými slovy, image srcset transformuje obrázky na responzivní obrázky.

Výsledkem používání zdrojových sad je nejen rychlejší načítání, ale také lepší skóre SEO. To vše přichází za malou cenu mít kopie stejného obrázku s různým rozlišením, které jsou snadno dostupné, když je uživatelé potřebují. Můžete si přečíst více o srcset a všem dalším souvisejícím se zdrojovými sadami zde , ale pokud jste netrpěliví, abyste je začali používat na svém Joomla! blog, čtěte dál.

Poskytování zmenšených obrázků na Joomla! s Droppics

Možná znáte Droppics jako prostě Joomla! rozšíření správce galerie, ale pod kapotou se toho hodně děje, o kterých si možná nejste vědomi. Příklad: Droppics nyní používá zdrojovou sadu k načtení správných obrázků pro své uživatele. Pokud si nejste vědomi této funkce, je možné, že ji nevyužijete.

Chcete-li použít atribut srcset na vašem Joomla! blog, nejprve jej musíte aktivovat prostřednictvím konfigurace Droppics. Přejděte na hlavních parametrů v možnostech Droppics a povolte responzivní obrázky z prvních možností. Uložte změny pro potvrzení nových nastavení.

Jak responzivní obrázky , povolením nastavení Droppics vytvoří dvě nové miniatury pro každou Joomla! obrázek, který máte. 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 Joomla! blog.

Když vytvoříte příspěvek a vložíte obrázek Droppics, rozšíření automaticky nastaví srcset za vás. Nevěříte nám? Prohlédněte si HTML ve frontendu a najdete více zdrojů pro různé velikosti zařízení.

Obecná optimalizace je v pořádku, stejně jako lazy loading, ale někdy toho mohou udělat jen tolik. V některých případech může být klíčem k překonání pomalého načítání pomocí moderní techniky HTML poskytování sad zdrojových obrázků namísto singulárních zdrojů.

Ale počkat, to není všechno. Do skládačky stále chybí kousek.

Komprimujte obrázky srcset na Joomla!

Možná se ptáte, jestli se vyplatí mít více kopií stejného obrázku. Možná chcete ušetřit místo na serveru nebo se bojíte, že se nové obrázky nahromadí. To, že používáte zdrojovou sadu, neznamená, že ji nemůžete kombinovat s jinými optimalizačními technikami, jako je komprese.

ImageRecycle je také k dispozici na Joomla! a můžete jej bez problémů integrovat s Droppics. Ve skutečnosti jej můžete nakonfigurovat tak, aby automaticky komprimoval váš Joomla! obrázky zdrojové sady ihned po jejich vygenerování. Můžete ušetřit až 80 % se ztrátovou nebo nejlépe úspornou kompresí a až 20 % s bezztrátovou nebo původní kompresí. Více o rozdílu si můžete přečíst zde .

ImageRecycle můžete nastavit tak, aby automaticky komprimoval obrázky tím, že přejdete do konfigurace 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ů při zachování kvality a úspory místa v úložišti. S magickou zdrojovou sadou Droppics a kompresí ImageRecycleje to nejen možné, ale může to být snadný a automatizovaný proces.