Er zijn een aantal afbeeldingsindelingen die op webpagina's kunnen worden gebruikt. Enkele veel voorkomende voorbeelden zijn GIF, JPG en PNG. SVG-bestanden worden tegenwoordig ook vaak op websites gebruikt, waardoor webontwerpers nog een andere optie voor online afbeeldingen worden geboden.
GIF-afbeeldingen
Gebruik GIF-bestanden voor afbeeldingen met een klein, vast aantal kleuren. GIF-bestanden worden altijd teruggebracht tot niet meer dan 256 unieke kleuren. Het compressiealgoritme voor GIF-bestanden is minder complex dan voor JPG-bestanden, maar bij gebruik op platte kleurenafbeeldingen en tekst, produceert het zeer kleine bestandsgrootten.
Het GIF-formaat is niet geschikt voor fotografische afbeeldingen of afbeeldingen met verloopkleuren. Omdat het GIF-formaat een beperkt aantal kleuren heeft, zullen gradiënten en foto's eindigen met banding en pixelatie wanneer ze worden opgeslagen als een GIF-bestand.
In een notendop, je zou GIF's alleen gebruiken voor eenvoudige afbeeldingen met slechts een paar kleuren, maar je zou ook PNG's kunnen gebruiken (meer hierover binnenkort).
JPG-afbeeldingen
Gebruik JPG-afbeeldingen voor foto's en andere afbeeldingen met miljoenen kleuren. Het maakt gebruik van een complex compressiealgoritme 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 beeldinformatie verloren gaat wanneer de afbeelding wordt gecomprimeerd.
Het JPG-formaat is niet geschikt voor afbeeldingen met tekst, grote blokken effen kleuren 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 zou worden opgeslagen in een ander formaat.
JPG-afbeeldingen kunnen het best worden gebruikt voor foto's en afbeeldingen met heel veel natuurlijke kleuren.
PNG-afbeeldingen
Het PNG-formaat is ontwikkeld ter vervanging van het GIF-formaat toen bleek dat GIF-afbeeldingen royalty's zouden kosten. PNG-afbeeldingen hebben een betere compressieverhouding dan GIF-afbeeldingen, wat resulteert in kleinere afbeeldingen dan hetzelfde bestand dat is opgeslagen als een GIF. PNG-bestanden bieden alpha-transparantie, wat betekent dat u gedeelten van uw afbeeldingen kunt hebben die volledig transparant zijn of zelfs een reeks alfatransparantie gebruiken. Een slagschaduw maakt bijvoorbeeld gebruik van een reeks transparantie-effecten en zou geschikt zijn voor een PNG (of u kunt ons gewoon beëindigen met CSS-schaduwen).
PNG-afbeeldingen, zoals GIF's, zijn niet goed geschikt voor foto's. Het is mogelijk om het banding-probleem te omzeilen dat van invloed is op foto's die als GIF-bestanden zijn opgeslagen met echte kleuren, maar dit kan tot zeer grote afbeeldingen leiden. PNG-afbeeldingen worden ook niet goed ondersteund door oudere mobiele telefoons en featurephones.
We gebruiken PNG voor elk bestand dat transparantie vereist. We gebruiken ook PNG-8 voor elk bestand dat geschikt zou zijn als een GIF, in plaats daarvan met dit PNG-formaat.
SVG-afbeeldingen
SVG staat voor Scalable Vector Graphic. In tegenstelling tot de op rasters gebaseerde indelingen die worden gevonden in JPG, GIF en PNG, gebruiken deze bestanden vectoren om zeer kleine bestanden te maken die op elke grootte kunnen worden gerenderd zonder verlies van kwaliteit van toename in bestandsgrootte. Ze zijn gemaakt voor illustraties zoals pictogrammen en zelfs logo's.
Afbeeldingen voorbereiden voor weblevering
Ongeacht welk beeldformaat u gebruikt en uw website zal zeker een aantal verschillende indelingen gebruiken op al zijn pagina's, u moet ervoor zorgen dat alle afbeeldingen op die site zijn voorbereid voor levering via internet. Te grote afbeeldingen kunnen ertoe leiden dat een site langzaam werkt en van invloed zijn op de algehele prestaties. Om dit te bestrijden, moeten die afbeeldingen worden geoptimaliseerd om de balans te vinden tussen hoge kwaliteit en de laagst mogelijke bestandsgrootte op dat kwaliteitsniveau.
Het kiezen van de juiste afbeeldingsindeling is onderdeel van de strijd, maar ook zorgen dat je die bestanden hebt voorbereid, is de volgende stap in dit belangrijke webleveringsproces.
Origineel artikel door Jennifer Kyrnin. Bewerkt door Jeremy Girard.
