Joomla responsieve afbeelding met behulp van srcset en compressie

Optimalisatie? Controleren. Lazy loading ? Controleer nog eens. Toch is uw Joomla! website voelt onhandig aan en het duurt te lang om te laden op mobiele apparaten en trage verbindingen. Wanhoop niet - dit is wanneer de HTML-structuur van pas komt; meer precies, de afbeeldingsbronsets of het srcset- attribuut.

Misschien is jouw Joomla! blog maakt gebruik van afbeeldingen van hoge kwaliteit en je kunt of wilt ze gewoon niet afschaffen. Dat is geen reden tot bezorgdheid. Met de Droppics-plug-in van Joomla! kunt u niet alleen algemene optimalisatie voor afbeeldingen toepassen, maar ook verschillende bestanden weergeven, afhankelijk van de apparaten van de gebruikers.

Responsieve afbeeldingen met HTML-srcset

Als je ooit met HTML hebt geploeterd, weet je dat afbeeldingen worden gedefinieerd door een bronattribuut - src . De afbeeldingsbron is de locatie van waaruit browsers afbeeldingen laden om op uw Joomla! gebruikers. Het probleem met het gebruik van een consistente bron voor een bepaalde afbeelding is dat hetzelfde bestand altijd wordt geladen, hoe groot ook.

Als je bijvoorbeeld een heldenbanner bovenaan een artikel hebt staan, wordt dezelfde afbeelding op alle apparaten geladen. Browsers downloaden de afbeelding en verkleinen deze vervolgens, soms drastisch, vooral op mobiele apparaten. Met moderne browsers kunt u niet alleen een bron voor afbeeldingen definiëren, maar ook een reeks bronnen: de bronset srcset .

Zoals de naam al aangeeft, is de bronset een lijst met bronnen, in plaats van één enkele bron. Elke bron is gekoppeld aan een browserbreedte, zodat mobiele apparaten kleine afbeeldingen downloaden en gebruikers toegang krijgen tot uw Joomla! blog vanaf desktops download de afbeelding met volledige resolutie. Met andere woorden: de afbeeldingsbronset transformeert afbeeldingen in responsieve afbeeldingen.

Het resultaat van het gebruik van bronsets is niet alleen snellere laadtijden, maar ook betere SEO-scores. Dit alles heeft de kleine prijs dat kopieën van dezelfde afbeelding met verschillende resoluties direct beschikbaar zijn wanneer gebruikers ze nodig hebben. U kunt hier srcset attribuut en al het andere gerelateerd aan bronsets , maar als u ongeduldig bent om ze te gaan gebruiken op uw Joomla! bloggen, blijf lezen.

Geschaalde afbeeldingen weergeven op Joomla! met Droppics

Je kent Droppics misschien gewoon als een Joomla! galerijmanager-extensie, maar er gebeurt veel onder de motorkap waarvan u zich misschien niet bewust bent. Voorbeeld: Droppics gebruikt nu de bronset om de juiste afbeeldingen voor uw gebruikers te laden. Als u niet op de hoogte bent van deze functie, is het mogelijk dat u er ook geen gebruik van maakt.

Om het srcset attribuut op uw Joomla! blog, moet je het eerst activeren via je Droppics-configuratie. Ga naar het belangrijkste parameters in de opties van Droppics en schakel responsieve afbeeldingen in via de eerste opties. Sla wijzigingen op om de nieuwe instellingen vast te leggen.

Zoals de responsieve afbeeldingen -optie u vertelt, creëert Droppics door het inschakelen van de instelling twee nieuwe miniaturen voor elke Joomla! beeld dat je hebt. Deze miniaturen zijn de responsieve afbeeldingen zelf, die worden weergegeven afhankelijk van het apparaat dat wordt gebruikt om toegang te krijgen tot uw Joomla! blog.

Wanneer u een bericht maakt en een Droppics-afbeelding invoegt, stelt de extensie automatisch de srcset voor u in. Gelooft u ons niet? Inspecteer de HTML in de frontend en je zult meerdere bronnen vinden voor verschillende apparaatgroottes.

Algemene optimalisatie is allemaal goed en wel, net als lazy loading, maar soms kunnen ze maar zoveel doen. In sommige gevallen kan het gebruik van de moderne HTML-techniek van het aanbieden van afbeeldingsbronsets, in plaats van enkelvoudige bronnen, de sleutel zijn om trage laadtijden te overwinnen.

Maar wacht, dat is niet alles. Er ontbreekt nog steeds een stukje van de puzzel.

Comprimeer srcset-afbeeldingen op Joomla!

U vraagt ​​zich misschien af ​​of het de moeite waard is om meerdere exemplaren van dezelfde afbeelding te hebben. Misschien wilt u besparen op serverruimte of bent u bang dat de nieuwe afbeeldingen zich opstapelen. Alleen omdat u de bronset gebruikt, betekent dit niet dat u deze niet kunt combineren met andere optimalisatietechnieken, zoals compressie.

ImageRecycle is ook beschikbaar op Joomla! en je kunt het naadloos integreren met Droppics. U kunt het zelfs configureren om uw Joomla! bronsetafbeeldingen onmiddellijk wanneer ze worden gegenereerd. U kunt tot 80% besparen met compressie met verlies of beste opslag en tot 20% met verliesloze of originele compressie. U kunt meer lezen over het verschil te lezen hier .

U kunt ImageRecycle om afbeeldingen automatisch te comprimeren door naar de configuratie van de extensie in Joomla! Ga vanaf daar naar het tabblad Geavanceerd en schakel media optimaliseren bij opslaan in . Als alternatief kunt u handmatig kiezen welke afbeeldingen u wilt optimaliseren via ImageRecycle .

Laadtijden zijn een veelzijdig probleem. U moet tegelijkertijd de bestandsgrootte minimaliseren, terwijl u de kwaliteit behoudt en opslagruimte bespaart. Met de magische bronset van Droppics en de compressie van ImageRecycleis dit niet alleen allemaal mogelijk, maar kan het ook een eenvoudig, geautomatiseerd proces zijn.