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 banner hrdiny v horní části článku, 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. S moderními prohlížeči můžete definovat nejen zdroj pro obrázky, ale také sadu zdrojů – zdrojovou sadu srcset .

Jak název napovídá, sada zdrojů je seznam zdrojů namísto jednoho zdroje. Každý zdroj je spojen s šířkou prohlížeče, takže mobilní zařízení stahují malé obrázky a uživatelé přistupující k vaší Joomla! blog ze stolních počítačů stáhnout obrázek v plném rozlišení. Jinými slovy, obraz srcset transformuje obrázky na citlivé obrázky.

Výsledkem použití zdrojových sad není jen rychlejší doba načítání, ale také vylepšené skóre SEO. To vše přichází za nízkou cenu, protože kopie stejného obrazu s různým rozlišením jsou snadno dostupné, když je uživatelé potřebují. Si můžete přečíst více o srcset atributu a všechno ostatní týkající se zdrojových souprav tady , ale pokud jste netrpěliví začít používat je na Joomla! blog, čtěte dál.

Poskytování zmenšených obrázků v Joomle! 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 a dobrá, stejně jako lazy loading , ale někdy existuje jen tolik, co mohou udělat. V některých případech může být klíčem k překonání pomalé doby načítání použití moderní techniky HTML, která poskytuje sady zdrojů obrazu, namísto singulárních zdrojů.

Ale počkejte, to není všechno. V hádance stále chybí kousek.

Komprimujte obrázky srcset na Joomla!

Možná vás zajímá, zda je vhodné mít více kopií stejného obrázku. Možná budete chtít ušetřit na serverovém prostoru, nebo se obáváte, že se nové obrázky nahromadí. To, že používáte zdrojovou sadu, neznamená, že jej nelze kombinovat s jinými optimalizačními technikami, jako je například komprese.

ImageRecycle je k dispozici také na Joomle! a můžete jej bezproblémově integrovat s Droppics. Ve skutečnosti jej můžete dokonce nakonfigurovat tak, aby automaticky komprimoval vaši Joomla! obrázky zdrojové sady okamžitě po jejich generování. Můžete ušetřit až 80% se ztrátovou nebo nejlepší úsporou kompresí a až 20% se ztrátovou nebo originální kompresí. Více o rozdílu si můžete přečíst zde .

ImageRecycle můžete nastavit aby automaticky komprimoval obrázky tím, že přejdete do konfigurace rozšíření v Joomla! Odtud 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 ImageRecycle .

Načítání časů je mnohostranný problém. Musíte současně minimalizovat velikost souborů při zachování kvality a úspory místa v úložišti. Díky magické sadě zdrojů ImageRecycle a ImageRecycle je to nejen možné, ale může to být i snadný automatizovaný proces.