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 inte vill undanröja 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ändarens enheter.

Mottagliga 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äsares bredd så att mobila enheter laddar ner små bilder och användare som har åtkomst till din Joomla! blogg från stationära datorer ladda ner bilden i full upplösning. Med andra ord förvandlar bilden srcset bilder till känsliga bilder.

Resultatet av att använda källuppsättningar är inte bara snabbare laddningstider utan också förbättrade SEO-poäng. Allt detta kommer till det lilla priset att ha kopior av samma bild med olika upplösningar, tillgängliga för när användare behöver dem. Du kan läsa mer om attributet 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! blogg, fortsätt läsa.

Serverar skalade bilder på Joomla! med Droppics

Du kanske känner till Droppics som en Joomla! gallery manager-förlängning, men det finns mycket som händer under huven som du kanske inte är medveten om. Fall i sak: Droppics använder nu källuppsättningen för att ladda rätt bilder för dina användare. Om du inte känner till den här funktionen kanske det bara är möjligt att du inte utnyttjar den heller.

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 bra och bra, liksom lazy loading , men ibland finns det bara så mycket de kan göra. I vissa fall kan det vara nyckeln att använda den moderna HTML-tekniken för att tillhandahålla bildkälluppsättningar istället för enstaka källor för att övervinna långsamma laddningstider.

Men vänta, det är inte allt. Det finns fortfarande en saknad pussel till pusslet.

Komprimera srcset-bilder på Joomla!

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

ImageRecycle finns också på Joomla! och du kan integrera det sömlöst med Droppics. I själva verket kan du till och med konfigurera den för att automatiskt komprimera din Joomla! källa ställa in bilder direkt när de genereras. Du kan spara upp till 80% med lossy, eller bäst sparande, komprimering och upp till 20% med lossless 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 ImageRecycle komprimering är det inte bara möjligt, men det kan vara en enkel, automatiserad process.