Joomla responsiv bild med srcset och komprimering

Optimering? Kontrollera. Lazy loading ? Kolla igen. Ändå, din Joomla! webbplatsen känns 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 väl till pass; närmare bestämt bildkällans uppsättningar eller srcset- attributet.

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

Responsiva bilder med HTML srcset

Om du någonsin har pysslat med HTML vet du att bilder definieras av ett källattribut — src . Bildkällan är platsen varifrån webbläsare laddar bilder för att visa till din 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 hjältebanner överst i en artikel, kommer samma bild att laddas över 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 med källor, istället för en enda källa. Varje källa är associerad med en webbläsarbredd så att mobila enheter laddar ner små bilder och användare kommer åt din Joomla! blogg från stationära datorer ladda ner bilden i full upplösning. Med andra ord, bildskärmen förvandlar bilder till responsiva bilder.

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

Visar skalade bilder på Joomla! med Droppics

Du kanske känner till Droppics som helt enkelt en Joomla! gallery manager extension, men det är mycket som händer under huven som du kanske inte är medveten om. Exempel: Droppics använder nu källuppsättningen för att ladda rätt bilder för dina användare. Om du inte är medveten om den här funktionen kan det bara vara möjligt att du inte heller utnyttjar den.

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

Som responsiva bilder säger, skapar Droppics två nya miniatyrer för varje Joomla! bild som du har. Dessa miniatyrer är själva de responsiva bilderna, som återges 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 för dig. Tror du oss inte? Inspektera HTML-koden i gränssnittet så hittar du flera källor för olika enhetsstorlekar.

Allmän optimering är väl och bra, liksom lazy loading, men ibland finns det bara så 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 att tillhandahålla bildkälluppsättningar, istället för enstaka källor.

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

Komprimera srcset-bilder på Joomla!

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

ImageRecycle finns också på Joomla! och du kan integrera det sömlöst med Droppics. Faktum är att du till och med kan konfigurera den för att automatiskt komprimera din Joomla! källinställningsbilder direkt när de genereras. Du kan spara upp till 80 % med förlustfri, eller bästa sparande, komprimering och upp till 20 % med förlustfri, eller original, komprimering. Du kan läsa mer om skillnaden här .

Du kan ställa in ImageRecycle att automatiskt komprimera bilder genom att gå till tilläggets konfiguration i Joomla! Därifrån går du till Avancerat och aktiverar optimering av media när du sparar . 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älluppsättning och ImageRecyclekomprimering är det inte bara möjligt, men det kan vara en enkel, automatiserad process.