Om je website snel te houden en je pagespeedscores te optimaliseren ligt er vaak een grote winst in het uploaden van de juiste grootte afbeelding. Een grote afbeelding is immers zwaarder dan een kleine afbeelding en wanneer dit niet nodig is, is dit zonde.
Maar wat is het beste formaat?
In onderstaande tekst leggen we het zo duidelijk mogelijk voor je uit. De punten die we uitleggen zijn:
- Welke format moet je gebruiken?
- Welke size moet je uploaden per onderdeel?
- Hoe resize je een image?
- Photoshop
- Online tools
- Wat is de beste manier om images te optimaliseren?
- Waar kan WE je nog mee helpen?
- Mobile optimalisatie
- Beste image format voor het web
- Varnish cache
- Lazyload
- Tot slot
1. Welke format moet je gebruiken?
De meeste gebruikte is .jpg, maar voor beste performance zijn er nu al lichtere versies die de site sneller laten laden. Dit hangt er vanaf of er een module is binnen het platform die dit mogelijk maakt en is geen standaard functionaliteit.
.jpg is dus de gebruikelijke om banners, product images enzovoorts te voorzien van een foto. Als je afbeelding een transparante achtergrond heeft, dan kun je het beste .png gebruiken.
2. Welke size moet je uploaden per onderdeel?
Dit is voor developer vrij gemakkelijk te zien in de live site maar dit kun jij zelf ook zien. Neem bijvoorbeeld een slider image:
Je wilt het linker plaatje veranderen maar weet niet precies het formaat.
- Op de pagina ga je met je muis op de gewenste afbeelding staan
- Klik op de rechterknop van je muis
- Klik op "Inspect" of "Inspecteren"
Je ziet dan het volgende:
Rechts zie je als je met je muis over de link gaat staan: 669x315 pixels (rendered size). Dit is het formaat dat je moet uploaden in .jpg. Je ziet ook meteen dat de image te groot is geupload als je de image 'Open in new tab' gebruikt en linksonder naar de aangegeven maat kijkt:
Image size is hier 788x370 pixels. Plus ook nog eens in .png (wat zwaarder is dan .jpg terwijl dit geen transparante achtergrond heeft en dit niet noodzakelijk is). Hier valt dus performance te winnen met het uploaden van images in je website.
In dit geval raden we aan om deze afbeelding te resizen en te vervangen met de geresizede afbeelding.
3. Hoe resize je een image?
3.1. Photoshop
Je kan gebruik maken van photoshop om foto’s kleiner te maken. Dit kan met resolutie die voor het web max 72dpi hoort te zijn. Ook het formaat kan je hiermee perfect resizen.
Tevens raad ik aan als je webshops beheert, je hier photoshop voor aanschaft om als tool te gebruiken in de optimalisatie van images.
- Zorg dat je img 72 DPI is:
- Resize je image voor desktop naar gevraagde formaat (zoals je dat bij punt 2 hebt bepaald)
- Ga bij desktop full page width van je scherm uit van maximaal 1920px breed
- Voor tablet is dit 1024px
- Voor mobile kun je uitgaan van de grootste phone device dat ongeveer op 420px uitkomt
Maak je geen zorgen om 1 pixel meer of minder, dit zal het verschil niet maken.
Hoe laat je de image passen in het bepaalde formaat?
Maak bijvoorbeeld een new file aan in Photoshop in het juiste formaat. Hier kun je nu de image in slepen of openen. Als laatst moet je de afbeelding opslaan voor het web:
Tip: Verwerk in je image ook goede info bijvoorbeeld: "product-image-naam-420x420-mobile". Op deze manier kun je makkelijk zien welke image je op welke plek wilt uploaden en kun je makkelijk de performance uitlezen.
3.2. Online tools
Heb je geen photoshop? Geen zorgen! Gelukkig zijn er online genoeg gratis tools te vinden die je hiermee kunnen helpen. Gebruik google 'resize image online free' of andere software die dit mogelijk maakt.
4. Wat is de beste manier om images te optimaliseren?
Je kan als je de beste format en size hebt opgeslagen, deze ook nog verder optimaliseren met een free tool: 
Online Image Сompressor De output van je images zijn nu perfect voor je website om te uploaden.
5. Waar kan WE je nog mee helpen?
Bovenstaand geeft je alle informatie die je nodig hebt om je site optimaal te vullen met betrekking tot de afbeeldingen. Maar er zijn altijd meer trucjes die we kunnen doen voor nog betere resultaten.
Onderstaand een kort overzicht met punten waar wij je mee kunnen helpen. Ben je hierin geinteresseerd: neem contact met ons op!
5.1. Mobile optimalisatie
Het gebruik van mobile apparaten is zodanig gestegen, dat dit ook te zien is in de data van schermgebruik. Images optimaliseren voor mobile is dus belangrijker dan voor een desktop of laptop.
Vooral dataverkeer van hoge resolutie images die in size intact blijven is funest voor je mobiele internetverbinding. Tevens doet je mobile device er langer over om deze overtollige mb’s binnen te halen. Ze zijn immers bedoeld geweest voor desktop of laptop devices.
We kunnen dit realiseren door in de backend een mogelijkheid maken om 2 of 3 images te uploaden voor mobile/tablet/desktop. Deze worden dan alleen gebruikt voor specifieke devices en dus automatisch geoptimaliseerd voor alles soorten media devices.
5.2. Beste image format voor het web
Images zijn een grote bron van paginagewicht en vormen ook het grootste aantal HTTP-verzoeken per pagina:
JPG en PNG zijn ook goede keuzes voor het web. Als je kiest tussen JPG of PNG, gebruik dan JPG voor foto's en PNG voor logo's. De reden hiervoor is omdat een JPG beter gecomprimeerd is en sneller laadt, terwijl een PNG meer details vasthoudt en een transparante achtergrond mogelijk maakt.
WebP is het beste format om je site te voorzien van images. Om dit voor elkaar te krijgen kunnen we gebruik maken van programma’s die jpg om kunnen zetten naar deze format. In magento 2 zijn er diverse modules die dit automatiseren en dus jpg omzet naar WebP bij het uploaden van images.
5.3. Varnish cache
Je kunt Varnish gebruiken om zowel dynamische als statische inhoud te cachen: dit is een efficiënte oplossing om niet alleen de snelheid van uw website, maar ook uw serverprestaties te verhogen.
5.4. Lazyload
Bij Lazy Loading wordt er in plaats van alle afbeeldingen/video’s/iframes (die op een webpagina staan) in één keer te downloaden, media content pas geladen zodra deze in de viewport komt (d.i. het zichtbare gedeelte van een webpagina in het browserscherm). Dat kan de laadtijd van een pagina aanzienlijk versnellen en ervoor zorgen dat bezoekers niet snel afhaken door trage laadtijden. Ook dit kunnen we doorvoeren voor de hele site om de performance te verbeteren.
5.5. Tot slot
We kunnen al deze punten in je site meten en adviseren waar we pijnpunten weg kunnen nemen. Als we de site ontwikkelen houden we rekening met veel optimalisaties. Daarnaast zijn er optimalisaties die meer onderzoek, ontwikkeling of kosten met zich mee brengen.
Vraag aan je Product Owner welke mogelijkheden we kunnen bieden en hoe we dit kunnen realiseren. Een gezonde site is een goed werkende verhoogde conversie site en altijd een goede investering dat zich terugvediend in statistieken.
Opmerkingen
0 opmerkingen
U moet u aanmelden om een opmerking te plaatsen.