Joomla responsiv bild med srcset och komprimering

Optimering? Kontrollera. Lazy loading ? Kontrollera igen. Ändå känns din Joomla!-webbplats klumpig och det tar för lång tid att ladda på mobila enheter och långsamma anslutningar. Misströsta inte – det är då HTML-strukturen kommer till nytta; mer exakt, bildkällan eller srcset- attributet.

Kanske använder din Joomla!-blogg högkvalitativa bilder och du kan helt enkelt inte – eller vill inte – bli av med dem. Det är ingen anledning till oro. Med Joomla!s Droppics-plugin kan du inte bara tillämpa generell optimering för bilder, utan även visa olika filer beroende på användarnas enheter.

Responsiva bilder med HTML srcset

Om du någonsin har sysslat med HTML vet du att bilder definieras av ett source-attribut – src . Bildkällan är den plats varifrån webbläsare laddar bilder för att visa dem för dina Joomla!-användare. Problemet med att använda en konsekvent källa för en viss bild är att samma fil alltid kommer att laddas, oavsett hur stor den är.

Om du till exempel har en hero-banner högst upp i en artikel kommer samma bild att laddas på alla enheter. Webbläsare laddar ner bilden och skalar sedan ner den, ibland drastiskt, särskilt på mobila enheter. Med moderna webbläsare kan du definiera inte bara en källa för bilder, utan en uppsättning källor – källuppsättningen srcset .

Som namnet antyder är källuppsättningen en lista över källor, istället för en enda källa. Varje källa är associerad med en webbläsarbredd så att mobila enheter kan ladda ner små bilder och användare som öppnar din Joomla!-blogg från datorer kan ladda ner bilden i full upplösning. Med andra ord omvandlar bilduppsättningen bilder till responsiva bilder.

Resultatet av att använda källkodsuppsättningar är inte bara snabbare laddningstider, utan också förbättrade SEO-poäng. Allt detta kommer till det lilla priset att det finns kopior av samma bild med olika upplösningar, lättillgängliga när användarna behöver dem. Du kan läsa mer om srcset- attributet och allt annat relaterat till källkodsuppsättningar här , men om du är otålig att börja använda dem på din Joomla!-blogg, fortsätt läsa.

Visa skalade bilder på Joomla! med Droppics

Du kanske känner till Droppics som enbart ett Joomla!-tillägg för gallerihantering, men det händer mycket bakom kulisserna som du kanske inte är medveten om. Ett exempel: Droppics använder nu källkoden för att ladda rätt bilder för dina användare. Om du inte känner till den här funktionen kan det vara möjligt att du inte utnyttjar den heller.

För att använda srcset-attributet på din Joomla!-blogg måste du först aktivera det via din Droppics-konfiguration. Gå till "huvudparametrar" i Droppics inställningar och aktivera "responsiva bilder" bland de första alternativen. Spara ändringarna för att spara de nya inställningarna.

Som responsiva bilder visar, skapar Droppics två nya miniatyrbilder för varje Joomla!-bild du har genom att aktivera inställningen. Dessa miniatyrbilder är själva de responsiva bilderna, som renderas beroende på vilken enhet som används för att komma åt din Joomla!-blogg.

När du skapar ett inlägg och infogar en Droppics-bild ställer tillägget automatiskt in srcset åt dig. Tror du oss inte? Titta i HTML-koden i frontend så hittar du flera källor för olika enhetsstorlekar.

Allmän optimering är väl bra, liksom lazy loading, men ibland finns det bara en viss gräns för hur mycket de kan göra. I vissa fall kan det vara nyckeln till att övervinna långsamma laddningstider att använda den moderna HTML-tekniken för att tillhandahålla bildkälluppsättningar istället för enskilda källor.

Men vänta, det är inte allt. Det saknas fortfarande en pusselbit.

Komprimera srcset-bilder i Joomla!

Du kanske undrar om det är värt att ha flera kopior av samma bild. Kanske vill du spara serverutrymme eller så är du rädd att de nya bilderna kommer att staplas. Bara för att du använder källkodsuppsättningen betyder det inte att du inte kan kombinera den med andra optimeringstekniker, som komprimering.

ImageRecycle finns även tillgängligt på Joomla! och du kan integrera det sömlöst med Droppics. Du kan faktiskt till och med konfigurera det så att det automatiskt komprimerar dina Joomla!-källkodsbilder direkt när de genereras. Du kan spara upp till 80 % med förlustbeständig komprimering, eller "best saving", och upp till 20 % med förlustfri komprimering, eller "original" komprimering. Du kan läsa mer om skillnaden här .

Du kan ställa in ImageRecycle för att automatiskt komprimera bilder genom att gå till tilläggets konfiguration i Joomla! Därifrån går du till Avancerat och aktiverar optimera media vid sparning . Alternativt kan du manuellt välja vilka bilder som ska optimeras via ImageRecycle gränssnitt.

Laddningstider är ett mångfacetterat problem. Du måste samtidigt minimera filstorlekar samtidigt som du bibehåller kvaliteten och sparar lagringsutrymme. Med den magiska Droppics källkod och ImageRecyclekomprimering är inte bara allt detta möjligt, utan det kan också vara en enkel, automatiserad process.