Joomla reszponzív kép srcset és tömörítés használatával

Optimalizálás? Ellenőrizve. Lazy loading ? Ellenőrizve újra. Ennek ellenére a Joomla! webhelyed nehézkesnek tűnik, és túl sokáig tart a betöltés mobileszközökön és lassú internetkapcsolattal. Ne ess kétségbe – itt jön jól a HTML struktúra; pontosabban a képforrás-készletek, vagyis az srcset attribútum.

Lehetséges, hogy a Joomla! blogod kiváló minőségű képeket használ, és egyszerűen nem tudsz – vagy nem akarsz – megszabadulni tőlük. Ez nem ok az aggodalomra. A Joomla! Droppics bővítményével nemcsak általános optimalizálást alkalmazhatsz a képekre, hanem a felhasználók eszközeitől függően különböző fájlokat is megjeleníthetsz.

Reszponzív képek HTML srcset-tel

Ha valaha is ismerkedtél a HTML-lel, akkor tudod, hogy a képeket egy „source” attribútum – „src” – . A kép forrása az a hely, ahonnan a böngészők betöltik a képeket, hogy megjelenítsék azokat a Joomla! felhasználóknak. Az adott képhez tartozó konzisztens forrás használatának problémája az, hogy mindig ugyanaz a fájl töltődik be, függetlenül a méretétől.

Például, ha egy cikk tetején egy fő banner található, akkor ugyanaz a kép fog betöltődni az összes eszközön. A böngészők letöltik a képet, majd lekicsinyítik, néha drasztikusan, különösen mobileszközökön. A modern böngészőkkel nemcsak a képek forrását, hanem egy forráskészletet is definiálhatsz – az srcset .

Ahogy a neve is sugallja, a forráskészlet források listája, nem pedig egyetlen forrás. Minden forráshoz egy böngészőszélesség tartozik, így a mobileszközök kis képeket tölthetnek le, az asztali számítógépekről a Joomla! bloghoz hozzáférő felhasználók pedig teljes felbontású képet tölthetnek le. Más szóval, a képforráskészlet reszponzív képekké alakítja a képeket.

A forráskészletek használatának eredménye nemcsak a gyorsabb betöltési idő, hanem a jobb SEO-pontszámok is. Mindez azzal a kis árral jár, hogy ugyanazon kép különböző felbontású másolatai állnak rendelkezésre, amelyek könnyen elérhetők, amikor a felhasználóknak szükségük van rájuk. Az srcset attribútumról és a forráskészletekkel kapcsolatos minden másról itt , de ha türelmetlenül várod, hogy elkezdhesd használni őket a Joomla! blogodon, olvass tovább.

Méretezett képek kiszolgálása Joomla!-n Droppics segítségével

Lehet, hogy a Droppics-et egyszerűen csak egy Joomla! galériakezelő bővítményként ismered, de sok minden történik a motorháztető alatt, amiről lehet, hogy nem tudsz. Példa erre: a Droppics mostantól a forráskészletet használja a megfelelő képek betöltéséhez a felhasználók számára. Ha nem ismered ezt a funkciót, lehetséges, hogy nem is használod ki.

Az srcset attribútum Joomla! blogodon való használatához először aktiválnod kell azt a Droppics konfigurációján keresztül. Lépj a Droppics beállításainál fő paraméterek az első opciók közül a reszponzív képeket

Ahogy a reszponzív képek opciójának eszköztippje is mutatja, a beállítás engedélyezésével a Droppics minden Joomla! képhez két új bélyegképet hoz létre. Ezek a bélyegképek maguk a reszponzív képek, amelyek a Joomla! blog elérésére használt eszköztől függően jelennek meg.

Amikor létrehozol egy bejegyzést és beszúrsz egy Droppics képet, a bővítmény automatikusan beállítja az srcset-et . Nem hiszed el? Ellenőrizd a HTML-t a frontendben, és több forrást is találsz a különböző eszközméretekhez.

Az általános optimalizálás rendben is van, ahogy lazy loadingis, de néha csak egy bizonyos pontig tudnak eljutni. Bizonyos esetekben a modern HTML technika használata, amely képforrás-készleteket ad meg az egyes források helyett, lehet a kulcs a lassú betöltési idők leküzdéséhez.

De várjunk csak, ez még nem minden. Még mindig hiányzik egy darab a kirakósból.

Srcset képek tömörítése Joomla-n!

Lehet, hogy azon tűnődsz, hogy megéri-e ugyanabból a képből több példányt készíteni. Talán szerverhelyet szeretnél megtakarítani, vagy attól félsz, hogy az új képek felhalmozódnak. Csak azért, mert a forráskészletet használod, nem jelenti azt, hogy nem kombinálhatod más optimalizálási technikákkal, például tömörítéssel.

ImageRecycle Joomla!-n is elérhető, és zökkenőmentesen integrálható a Droppics-szel. Sőt, akár úgy is beállíthatod, hogy automatikusan tömörítse a Joomla! forráskészletének képeit, amint létrejönnek. Akár 80%-ot is megtakaríthatsz veszteséges, vagyis legjobb mentésű tömörítéssel, és akár 20%-ot veszteségmentes, vagyis eredeti tömörítéssel. A különbségről itt .

Beállíthatod ImageRecycle a képek automatikus tömörítésére a Joomla! bővítmény konfigurációjában. Innen lépj a Speciális fülre, és engedélyezd a Média optimalizálása mentéskor lehetőséget . Alternatív megoldásként manuálisan is kiválaszthatod, hogy mely képeket szeretnéd optimalizálni ImageRecycle felületén.

A betöltési idők sokrétű probléma. Egyszerre kell minimalizálni a fájlméretet, miközben megőrzöd a minőséget és tárhelyet takarítasz meg. A varázslatos Droppics forráskódkészletével és ImageRecycletömörítésével mindez nemcsak lehetséges, de egy egyszerű, automatizált folyamat is lehet.