Veelvoorkomende voorbeelden van afbeeldingstypen op internet zijn: GIF, JPG, en PNG. SVG-bestanden. Deze verschillende formaten bieden webdesigners verschillende mogelijkheden om de visuele aantrekkingskracht van een website te optimaliseren.
GIF-afbeeldingen
Gebruik GIF-bestanden voor afbeeldingen met een klein, vast aantal kleuren. GIF-bestanden worden altijd teruggebracht tot maximaal 256 unieke kleuren. Het compressie-algoritme voor GIF-bestanden is minder complex dan voor JPG-bestanden, maar bij gebruik op platte kleurenafbeeldingen en tekst produceert het zeer kleine bestandsgroottes.
Het GIF-formaat is niet geschikt voor fotografische afbeeldingen of afbeeldingen met verloopkleuren. Omdat het GIF-formaat een beperkt aantal kleuren heeft, zullen verlopen en foto's eindigen met strepen en pixelvorming wanneer ze worden opgeslagen als een GIF-bestand.
JPG-afbeeldingen
Gebruik JPG-afbeeldingen voor foto's en andere afbeeldingen met miljoenen kleuren. Het maakt gebruik van een complex compressie-algoritme waarmee u kleinere afbeeldingen kunt maken door een deel van de kwaliteit van de afbeelding te verliezen. Dit wordt een "lossy" compressie genoemd omdat een deel van de afbeeldingsinformatie verloren gaat wanneer de afbeelding wordt gecomprimeerd.
Het JPG-formaat is niet geschikt voor afbeeldingen met tekst, grote blokken effen kleur en eenvoudige vormen met scherpe randen. Dit komt omdat wanneer de afbeelding wordt gecomprimeerd, de tekst, kleur of lijnen kunnen vervagen, wat resulteert in een afbeelding die niet zo scherp is als in een ander formaat zou worden opgeslagen.
PNG-afbeeldingen
Het PNG-formaat is ontwikkeld als vervanging voor het GIF-formaat toen bleek dat GIF-afbeeldingen onderhevig zouden zijn aan royalty's. PNG-afbeeldingen hebben een betere compressiesnelheid dan GIF-afbeeldingen, wat resulteert in kleinere afbeeldingen dan hetzelfde bestand dat als GIF is opgeslagen. PNG-bestanden bieden alfatransparantie, wat betekent dat u delen van uw afbeeldingen kunt hebben die volledig transparant zijn of zelfs een reeks alfatransparantie gebruiken. Een slagschaduw gebruikt bijvoorbeeld een reeks transparantie-effecten en zou geschikt zijn voor een PNG (of u kunt ons in plaats daarvan gewoon CSS-schaduwen gebruiken).
PNG-afbeeldingen, zoals GIF's, zijn niet erg geschikt voor foto's. Het is mogelijk om het bandingprobleem te omzeilen dat van invloed is op foto's die zijn opgeslagen als GIF-bestanden met ware kleuren, maar dit kan resulteren in zeer grote afbeeldingen. PNG-afbeeldingen worden ook niet goed ondersteund door oudere mobiele telefoons en featurephones.
SVG-afbeeldingen
SVG staat voor Scalable Vector Graphic. In tegenstelling tot de op rasters gebaseerde formaten in JPG, GIF en PNG, gebruiken deze bestanden vectoren om zeer kleine bestanden te maken die op elke grootte kunnen worden weergegeven zonder kwaliteitsverlies of toename van de bestandsgrootte. Ze zijn gemaakt voor illustraties zoals pictogrammen en zelfs logo's.
Afbeeldingen voorbereiden voor levering via het web
Ongeacht welk afbeeldingsformaat u gebruikt, zorg ervoor dat alle afbeeldingen op die site site voorbereid voor webbezorging. Te grote afbeeldingen kunnen ertoe leiden dat een site traag werkt en de algehele prestaties beïnvloeden. Om dit tegen te gaan, die afbeeldingen moeten worden geoptimaliseerd om de balans te vinden tussen hoge kwaliteit en de laagst mogelijke bestandsgrootte op dat kwaliteitsniveau.
Het kiezen van het juiste afbeeldingsformaat is een deel van de strijd, maar er ook voor zorgen dat je die bestanden hebt voorbereid, is de volgende stap in dit belangrijke webbezorgingsproces.