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

Optimalizálás? Jelölje be. Lazy loading ? Ellenőrizd újra. Ennek ellenére a Joomla! A webhely ügyetlennek tűnik, és túl sokáig tart a betöltése mobileszközökön és lassú kapcsolatokon. Ne ess kétségbe – ilyenkor jön jól a HTML-struktúra; pontosabban a képforráskészletek, vagy az srcset attribútum.

Talán a Joomla! A blog kiváló minőségű képeket használ, és egyszerűen nem tudsz – vagy nem akarsz – megszüntetni őket. Ez nem ok az aggodalomra. A Joomla! Droppics bővítményével nem egyszerűen általános képoptimalizálást végezhet, hanem a felhasználók eszközeitől függően különböző fájlokat is kiszolgálhat.

Reszponzív képek HTML srcset segítségével

Ha valaha is foglalkozott a HTML-lel, akkor tudni fogja, hogy a képeket egy forrásattribútum határozza meg – src . A képforrás az a hely, ahonnan a böngészők képeket töltenek be, hogy megjelenítsék azokat a Joomla! felhasználókat. Az a probléma, hogy egy adott képhez konzisztens forrást használunk, hogy mindig ugyanaz a fájl lesz betöltve, bármilyen nagy is legyen.

Például, ha egy cikk tetején van egy hős szalaghirdetés, akkor ugyanaz a kép lesz betöltve az összes eszközre. A böngészők letöltik a képet, majd leméretezik, 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 megadhat – az srcset forráskészletet .

Ahogy a neve is sugallja, a forráskészlet a források listája, nem pedig egyetlen forrás. Minden forrás hozzá van rendelve egy böngészőszélességhez, így a mobileszközök kis képeket töltenek le, és a felhasználók hozzáférnek a Joomla! blog asztali számítógépekről töltse le a teljes felbontású képet. Más szavakkal, az srcset kép a képeket reszponzív képekké alakítja.

A forráskészletek használatának eredménye nemcsak a gyorsabb betöltési idő, hanem a SEO-pontszámok javulása is. Mindez annak az alacsony árnak köszönhető, hogy ugyanazon a képen más-más felbontású másolatok vannak, amelyek könnyen elérhetők, amikor a felhasználóknak szüksége van rájuk. Az srcset attribútumról és minden másról, ami a forráskészletekhez kapcsolódik, itt olvashat , de ha türelmetlen kezdeni őket használni a Joomla! blog, olvasd tovább.

Méretezett képek kiszolgálása a Joomla! Droppics-szel

Lehet, hogy a Droppics egyszerűen Joomla! galériakezelő bővítmény, de sok minden történik a motorháztető alatt, amiről talán nem is tudsz. Példa: A Droppics most a forráskészlet segítségével tölti be a megfelelő képeket a felhasználók számára. Ha nem ismeri ezt a funkciót, akkor lehetséges, hogy Ön sem használja ki.

Az srcset attribútum használata a Joomla! blog, először aktiválnia kell a Droppics konfigurációján keresztül. a fő paraméterek lapra a Droppics beállításainál, és engedélyezze a reszponzív képeket az első lehetőségek közül. Mentse el a változtatásokat az új beállítások véglegesítéséhez.

Ahogy a reszponzív képek opció eszköztippje megmondja, a beállítás engedélyezésével a Droppics két új miniatűrt hoz létre minden Joomla! kép, ami van. Ezek a bélyegképek maguk a reszponzív képek, amelyek a Joomla! eléréséhez használt eszköztől függően jelennek meg. blog.

Amikor létrehoz egy bejegyzést, és beszúr egy Droppics-képet, a kiterjesztés automatikusan beállítja az srcset az Ön számára. Nem hisz nekünk? Vizsgálja meg a HTML-kódot a frontendben, és több forrást is talál a különböző eszközméretekhez.

Az általános optimalizálás rendben van, csakúgy, mint a lazy loading, de néha csak annyit tehetnek. Bizonyos esetekben a modern HTML technika alkalmazása a képforrás-készletek biztosítására, az egyes források helyett, lehet a kulcs a lassú betöltési idők leküzdéséhez.

De várj, ez még nem minden. A kirakós játékból még hiányzik egy darab.

Az srcset képek tömörítése a Joomla!

Elgondolkodhat azon, vajon érdemes-e ugyanarról a képről több másolatot készíteni. Lehet, hogy helyet szeretne spórolni a szerveren, vagy attól tart, hogy az új képek felhalmozódnak. Csak azért, mert a forráskészletet használja, ez nem jelenti azt, hogy nem kombinálhatja más optimalizálási technikákkal, például tömörítéssel.

ImageRecycle elérhető a Joomla! és zökkenőmentesen integrálhatja a Droppics programba. Valójában még azt is beállíthatja, hogy automatikusan tömörítse a Joomla! a forráskészlet azonnal létrehozza a képeket. Akár 80% -ot takaríthat meg veszteséges, vagy a legjobb megtakarítással történő tömörítéssel, és akár 20% -ot is megtakaríthat veszteség nélküli vagy eredeti tömörítéssel. A különbségről itt olvashat bővebben .

Beállíthatja, hogy az ImageRecycle automatikusan tömörítse a képeket a Joomla! bővítmény konfigurációjában. Innen lépjen a Speciális lapra, és engedélyezze a média optimalizálását mentéskor . ImageRecycle manuálisan is kiválaszthatja, hogy mely képeket szeretné optimalizálni .

A betöltési idők sokrétű probléma. Egyszerre kell minimalizálnia a fájlméreteket, miközben megőrzi a minőséget és megtakarítja a tárhelyet. A varázslatos Droppics forráskészletével és az ImageRecycletömörítésével mindez nemcsak lehetséges, hanem egyszerű, automatizált folyamat is lehet.