Joomla responsieve afbeelding met 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 uw Joomla! blog maakt gebruik van afbeeldingen van hoge kwaliteit en u kunt ze gewoon niet - of wilt niet - verwijderen. Dat is geen reden tot bezorgdheid. Met de Droppics-plug-in van Joomla! Kunt u niet alleen algemene optimalisatie voor afbeeldingen toepassen, maar 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 een enkele bron. Elke bron wordt geassocieerd met een browserbreedte zodat mobiele apparaten kleine afbeeldingen downloaden en gebruikers die toegang hebben tot uw Joomla! blog van desktops download de afbeelding in volledige resolutie. Met andere woorden, de afbeeldingsrcset transformeert afbeeldingen in responsieve afbeeldingen.

Het resultaat van het gebruik van bronsets is niet alleen snellere laadtijden, maar ook verbeterde SEO-scores. Dit alles komt tegen de lage prijs van het hebben van kopieën van dezelfde afbeelding met verschillende resoluties, direct beschikbaar voor wanneer gebruikers ze nodig hebben. U kunt meer informatie over het lezen srcset attribuut en alles wat met betrekking tot de bron sets hier , maar als je bent ongeduldig om te beginnen met het gebruik ervan op uw Joomla! blog, blijf lezen.

Geschaalde afbeeldingen weergeven op Joomla! met Droppics

Je kent Droppics misschien als een Joomla! Gallery Manager-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 deze functie niet kent, 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 is er maar zo veel dat ze kunnen doen. In sommige gevallen kan het gebruik van de moderne HTML-techniek van het leveren van afbeeldingsbronsets, in plaats van enkelvoudige bronnen, de sleutel zijn om langzame laadtijden te overwinnen.

Maar wacht, dat is niet alles. Er ontbreekt nog 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 met behoud van kwaliteit en besparing op opslagruimte. Met de magische Bronset van ImageRecycle en de compressie van ImageRecycle is dit niet alleen allemaal mogelijk, maar het kan ook een eenvoudig, geautomatiseerd proces zijn.