Megfelelően méretezett képek megjelenítése WordPress vagy Joomla webhelyén

Vegyél bármilyen képet a WordPress vagy Joomla blogodról. Ha a minőséget értékeled, valószínűleg a kép elég nagy ahhoz, hogy le kelljen kicsinyíteni, hogy elférjen az olvasók asztali eszközein, nemhogy mobileszközökön. A minőség rendben van, de az ilyen esetek borsos áron érhetők el.

Ahhoz, hogy egyetlen kép a lehető legtöbb különböző kijelzőt elférjen, nagyméretű képet kell használni. Ez viszont nagy fájlokat eredményez, amelyeket teljes egészében le kell tölteni még kis eszközökön is. Van megoldás: a képek megjelenítése a megjelenítő eszközhöz igazítva, legyen az asztali számítógép, tablet vagy mobil.

Méretezett képek kiszolgálása WordPressen és Joomlán CSS segítségével

Mennyi helyet foglalnak el a képek a weboldalakon? Nincsenek kőbe vésett szabályok, de fontosságukat és elterjedtségüket tekintve a válasz mindenképpen az, hogy sok. Ha olyan képeket kínálsz, amelyeket úgyis átméretezel, akkor logikus, hogy gazdaságosan bánj a WordPress vagy Joomla felhasználóiddal, és olyan képekkel szolgáld ki őket, amelyek már eleve kicsinyítve vannak, hogy felgyorsítsd a weboldalad betöltési idejét.

A CSS egy viszonylag ismeretlen, de felbecsülhetetlen értékű attribútum halmazával segít: az srcset , sizes és media . Ezek az attribútumok – amelyek mindegyikét támogatja a legtöbb modern webböngésző – lehetővé teszik, hogy a nézetablak méretétől függően meghatározzuk, hogy mely képverziókat jelenítsük meg.

Az srcset kiegészíti a szokásos src lapot. Ahogy az attribútum neve is sugallja, egyetlen kép megadása helyett a méretezett képek listáját és a szélességet adhatja meg, amikor az egyes képeket használni kell. Ezzel együtt használatos a sizes attribútum, amellyel a nézetablak szélessége alapján meghatározhatja, hogy mikor jelenjenek meg a képek.

itt olvashatsz bővebben , de a jó hír az, hogy az elmúlt néhány évben a WordPress automatikusan átméretezi a képeket, és a megfelelő méretekben jeleníti meg az olvasóközönségnek. Az eredmény megdöbbentő: egy 511 KB-os álló kép mobileszközökön 42 KB-ra csökken.

Automatikus átméretezés és optimalizálás ImageRecycle segítségével

A képméretek tekintetében minél kisebb, annál jobb, feltéve, hogy a minőség nem romlik. Bár a WordPress az srcset , többet is tehetsz a képméret minimalizálása érdekében, nevezetesen a képek átméretezésével és tömörítésével.

ImageRecycle egy olyan bővítmény, amely képes egyszerre átméretezni és tömöríteni a képeket, és mind WordPressen, mind Joomlán elérhető. A legjobb az egészben, hogy ImageRecycle segítségével automatikusan átméretezheted és tömörítheted a képeket.

Az átméretezés különösen hasznos, ha stock képeket használsz a WordPress vagy Joomla blogodon. Ezek a képek gyakran aránytalanul nagyok az összes felhasználási módhoz képest, beleértve a nyomtatott médiát is. Az interneten nagyon valószínűtlen, hogy valaha is a teljes felbontásukat kellene használnod. ImageRecyclesegítségével a nagy képeket automatikusan átméretezheted a maximális magasságra vagy szélességre feltöltéskor.

Az átméretezést kiegészíti a tömörítés, amely optimalizálja a képméretet a minőség feláldozása nélkül. A veszteséges tömörítéssel akár 80%-kal is csökkentheted a képterületet. Ez nemcsak az eredeti képekre vonatkozik, hanem a WordPress által átméretezett képekre is. ImageRecycle ezt ismét automatikusan elvégzi helyetted.

Amit néhány plusz kilobájtnak látsz, értékes időveszteséget jelenthet az olvasóid számára. A jó hír az, hogy nem kell feláldoznod a minőséget a betöltési idők miatt. A CSS és ImageRecycleátméretezésének és optimalizálásának intelligensebb használatával kiváló minőségű képeket kaphatsz, amelyek alkalmazkodnak az olvasóid eszközeihez.