Joomla responsieve afbeelding met srcset en compressie

Optimalisatie? Check. Lazy loading ? Ook check. Toch voelt je Joomla!-website traag aan en laadt hij te langzaam op mobiele apparaten en bij trage internetverbindingen. Wanhoop niet – hier komt de HTML-structuur van pas; meer specifiek, de afbeeldingsbronsets, oftewel het srcset- attribuut.

Misschien gebruikt uw Joomla!-blog afbeeldingen van hoge kwaliteit en kunt of wilt u deze niet verwijderen. Dat is geen probleem. Met de Droppics-plugin van Joomla! kunt u niet alleen algemene optimalisatie voor afbeeldingen toepassen, maar ook verschillende bestanden weergeven afhankelijk van het apparaat van de gebruiker.

Responsieve afbeeldingen met HTML srcset

Als je ooit met HTML hebt gewerkt, weet je dat afbeeldingen worden gedefinieerd door een source-attribuut: src . De afbeeldingsbron is de locatie waar browsers afbeeldingen laden om aan je Joomla!-gebruikers te tonen. Het probleem met het gebruik van een consistente bron voor een bepaalde afbeelding is dat hetzelfde bestand altijd wordt geladen, ongeacht de grootte.

Als je bijvoorbeeld een hero-banner bovenaan een artikel hebt, wordt dezelfde afbeelding op alle apparaten geladen. Browsers downloaden de afbeelding en verkleinen deze vervolgens, soms drastisch, vooral op mobiele apparaten. Met moderne browsers kun je niet alleen een bron voor afbeeldingen definiëren, maar een set bronnen: de bronset srcset .

Zoals de naam al doet vermoeden, 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 die uw Joomla!-blog vanaf een desktop bezoeken de afbeelding in volledige resolutie downloaden. Met andere woorden, de afbeeldingsbronset transformeert afbeeldingen in responsieve afbeeldingen.

Het gebruik van bronsets resulteert niet alleen in snellere laadtijden, maar ook in betere SEO-scores. Dit alles gaat gepaard met het kleine nadeel dat je kopieën van dezelfde afbeelding in verschillende resoluties direct beschikbaar hebt wanneer gebruikers ze nodig hebben. Je kunt hier srcset -attribuut en alles wat met bronsets te maken heeft , maar als je ze graag meteen op je Joomla!-blog wilt gebruiken, lees dan verder.

Afbeeldingen op schaal weergeven in Joomla! met Droppics

Je kent Droppics misschien alleen als een Joomla!-galerijbeheer-extensie, maar er gebeurt veel meer achter de schermen waar je je wellicht niet van bewust bent. Zo gebruikt Droppics bijvoorbeeld de broninstellingen om de juiste afbeeldingen voor je gebruikers te laden. Als je deze functie niet kent, is de kans groot dat je er ook geen gebruik van maakt.

Om het srcset-attribuut op je Joomla!-blog te gebruiken, moet je het eerst activeren via je Droppics-configuratie. Ga naar het 'Hoofdparameters ' in de Droppics-opties en schakel 'Responsieve afbeeldingen' in bij de eerste opties. Sla de wijzigingen op om de nieuwe instellingen te bevestigen.

Zoals de voor responsieve afbeeldingen aangeeft, maakt Droppics, door deze instelling in te schakelen, twee nieuwe miniaturen aan voor elke Joomla!-afbeelding die u hebt. Deze miniaturen zijn de responsieve afbeeldingen zelf, die worden weergegeven afhankelijk van het apparaat waarmee uw Joomla!-blog wordt bezocht.

Wanneer je een bericht aanmaakt en een Droppics-afbeelding invoegt, stelt de extensie automatisch de srcset voor je in. Geloof je ons niet? Bekijk de HTML in de frontend en je zult meerdere bronnen vinden voor verschillende schermformaten.

Algemene optimalisatie is prima, net als lazy loading, maar soms is er maar zoveel dat ze kunnen doen. In sommige gevallen kan het gebruik van de moderne HTML-techniek om sets met afbeeldingsbronnen aan te bieden in plaats van afzonderlijke bronnen, de sleutel zijn tot het verhelpen van trage laadtijden.

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

Comprimeer srcset-afbeeldingen in Joomla!

Je vraagt ​​je misschien af ​​of het zinvol is om meerdere kopieën van dezelfde afbeelding te hebben. Misschien wil je serverruimte besparen of ben je bang dat de nieuwe afbeeldingen te veel ruimte in beslag nemen. Het feit dat je de bronset gebruikt, betekent niet dat je deze niet kunt combineren met andere optimalisatietechnieken, zoals compressie.

ImageRecycle is ook beschikbaar voor Joomla! en kan naadloos worden geïntegreerd met Droppics. Je kunt het zelfs zo configureren dat de afbeeldingen in je Joomla!-bronset automatisch worden gecomprimeerd zodra ze worden gegenereerd. Je kunt tot 80% besparen met lossy (compressie met minimale compressie) en tot 20% met lossless (compressie zonder compressie). Lees hier .

Je kunt ImageRecycle dat afbeeldingen automatisch worden gecomprimeerd door naar de configuratie van de extensie in Joomla! te gaan. Ga vervolgens naar het tabblad 'Geavanceerd' 'Media optimaliseren bij opslaan de interface van ImageRecycle te selecteren welke afbeeldingen geoptimaliseerd moeten worden

Laadtijden zijn een complex probleem. Je moet tegelijkertijd de bestandsgrootte minimaliseren, de kwaliteit behouden en opslagruimte besparen. Met de fantastische bronnenset van Droppics en de compressie van ImageRecycleis dit niet alleen mogelijk, maar kan het ook een eenvoudig, geautomatiseerd proces zijn.