was successfully added to your cart.

Afbeeldingen optimaliseren voor het web

By februari 2, 2016Handig

Ondanks dat internetverbindingen steeds sneller worden, is de snelheid van een website nog steeds één van de succesfactoren. Tegenwoordig surfen mensen over het internet met behulp van verschillende apparaten (tablets, smartphones, etc.) met lagere internetsnelheden. Het is algemeen bekend dat de gemiddelde website bezoeker verwacht dat een webpagina snel zal laden, anders zullen zij de website waarschijnlijk verlaten.

Het optimaliseren van de afbeeldingen op uw website is een ‘must’ als u uw bezoekers van een snelle website wilt voorzien. Moderne websites bevatten vaak grote visuals, e-commerce websites bevatten veel en grote product foto’s, etc. Zonder optimalisatie van deze afbeeldingen kunnen deze websites langzaam worden op desktop computers, en zullen dat zeker worden op mobiele apparaten. Hoe lager de bestandsgroottes van deze afbeeldingen zijn, hoe sneller de website zal laden.

Afbeeldingen kunnen in verschillende bestandsformaten opgeslagen worden. Dit artikel zal u begeleiden door het proces van het optimaliseren van 2 bestandsformaten, namelijk JPG en PNG afbeeldingen. GIF bestanden laten we buiten beschouwing, omdat dit type bestand bedoeld is voor animaties.

Wanneer JPG en wanneer PNG inzetten?

Websites bestaan gewoonlijk ook uit afbeeldingen en foto’s. Foto’s kunt u het beste opslaan als een JPG bestand. Voor elke andere afbeelding (logo’s, iconen etc.) geldt dat u deze het beste kunt opslaan als een PNG bestand.

Er is echter wel een uitzondering: Als uw foto een transparante achtergrond bevat, zou u deze wel als PNG bestand moeten opslaan, omdat een JPG bestand geen transparantie ondersteunt.

afb1

Wanneer PNG-8 gebruiken en wanneer PNG-24

PNG is een relatief nieuw bestandstype. PNG kan opgedeeld worden in PNG-8 en PNG-24. PNG-8 heeft een lage bestandsgrootte, maar heeft als nadeel dat het maar een kleine set van kleuren bevat (PNG-8 ondersteunt 256 kleuren). Dit bestandsformaat wordt daarom meestal gebruikt voor iconen. De kleurenset van PNG-24 is groter, maar de bestandsgrootte ligt ook een stuk hoger. Een foto die opgeslagen wordt als PNG-24 zal ongeveer 5 keer groter worden in bestandsgrootte dan wanneer dezelfde foto opgeslagen wordt als JPG. Dit onderscheid kan nuttig zijn wanneer de foto geprint wordt, maar voor het internet zijn JPG bestanden goed genoeg.

Hoe JPG en PNG bestanden optimaliseren

Er zijn een aantal zaken die u kunt doen om uw JPG en PNG bestanden te optimaliseren.

Verwijder overbodige ruimte

Stel dat uw afbeelding een tekst bevat (in het voorbeeld ‘company’) en een grote paarse achtergrond, terwijl u eigenlijk alleen de tekst met een klein stukje achtergrond nodig heeft, dan zou u de afbeelding moeten ‘croppen’. Dit betekent dat u de randen van de afbeelding verwijdert, zodat deze kleiner wordt (zowel in resolutie als in afbeeldingsgrootte). U kunt dit doen met behulp van een programma zoals Photoshop, Illustrator of een online tool zoals http://www.picresize.com/.

afb3

Sla op voor het web

Als u Photoshop gebruikt voor het maken van uw afbeeldingen, dan zou u de functionaliteit ‘save for web’, moeten gebruiken. Als u meer wilt leren over deze functionaliteit, raden we het bekijken van deze video van Adobe aan:

http://tv.adobe.com/watch/understanding-adobe-photoshop-cs6/save-for-web/

Progressive JPG’s

Als u JPG’s gebruikt op de mobiele versie van uw website, zou u over kunnen gaan op Progressive JPG’s. Dit bestandsformaat is ideaal voor grote afbeeldingen die via een langzame internetverbinding bekeken worden. Een progressieve JPG toont een redelijke versie van het bestand, zodat de bezoeker al een beeld krijgt van wat er op de afbeelding staat, zonder dat het gehele bestand al volledig geladen is. Een ander voordeel van een progressive JPG is dat deze vanaf het moment dat het laden is gestart, meteen de gehele plaats inneemt van waar de afbeelding geladen zal worden. Als een groot non-progressive JPG bestand wordt ingeladen, zal deze stukje voor stukje geladen worden, waardoor de inhoud van de website onder het bestand steeds een stukje verder geduwd zal worden.

Er is wel een kanttekening te maken bij het gebruik van progressive JPG’s: het bestand wordt wel sneller geladen, maar de bestandsgrootte wordt het wel hoger, omdat het meerdere lage resolutie versies van het bestand maakt.

In Photoshop kunt u de optie ‘Save for web and devices’ kiezen. Wanneer u voor JPG kiest, kunt u een vinkje plaatsen bij de optie ‘progressive’ om het bestand op te slaan als een progressive JPG.

afb2

Interlaced PNG’s

Interlaced PNG’s zijn vergelijkbaar met progressive JPG’s. Ze worden sneller getoond, maar verhogen de bestandsgrootte.

Daadwerkelijke grootte

Als u een afbeelding heeft op uw website die 200×200 pixels ruimte inneemt op uw website, maar u gebruikt een afbeelding van 400×400 pixels die u in uw HTML verkleint naar 200×200 pixels, dan gebruikt u onnodige extra ruimte (en laadtijd) om de afbeelding te tonen. Als u een afbeelding van 200×200 pixels wilt tonen, gebruik dan ook een afbeelding van 200×200 pixels.

Mogelijk te gebruiken Tools

Als u uw afbeeldingen heeft geoptimaliseerd met bovenstaande tips, dan kunt u uw afbeeldingen eventueel nog verder optimaliseren met onderstaande tools.

Belangrijk: Controleer altijd uw bestanden wanneer u ze geoptimaliseerd heeft met een tool. De tools maken de bestanden kleiner door visuele informatie te verwijderen waarvan zij gokken dat het menselijke oog dit niet zal zien. Soms kan het verwijderen van deze informatie echter een klein verschil in kleur veroorzaken. De huid van een persoon kan bijvoorbeeld groener worden, wat natuurlijk niet wenselijk is.