Webafbeeldingen zijn visuele weergaven die op een website worden gebruikt om de weergave van een idee of gevoel te versterken of mogelijk te maken om de websitegebruiker te bereiken. Afbeeldingen kunnen de gebruiker vermaken, opvoeden of emotioneel beïnvloeden en zijn cruciaal voor de sterkte van de branding, de duidelijkheid van de illustratie en het gebruiksgemak van interfaces.
Voorbeelden van afbeeldingen zijn kaarten, foto's, ontwerpen en patronen, stambomen, diagrammen, bouwkundige of technische blauwdrukken, staafdiagrammen en cirkeldiagrammen, typografie, schema's, lijntekeningen, stroomdiagrammen en vele andere afbeeldingsvormen.
Grafische ontwerpers hebben veel tools en technologieën tot hun beschikking, van print tot webontwikkeling, en W3C biedt veel van de onderliggende formaten die kunnen worden gebruikt voor het creëren van inhoud op het open webplatform.
Afbeeldingen worden voor alles gebruikt, van het verbeteren van het uiterlijk van webpagina's tot het dienen als presentatie- en gebruikersinteractielaag voor volwaardige webapplicaties.
Verschillende gebruikssituaties voor grafische afbeeldingen vragen om verschillende oplossingen, daarom zijn er verschillende technologieën beschikbaar. Foto's worden het best weergegeven met PNG, terwijl interactieve lijntekeningen, gegevensvisualisatie en zelfs gebruikersinterfaces de kracht van SVG en de Canvas API nodig hebben. CSS bestaat om andere formaten zoals HTML of SVG te verbeteren. WebCGM voldoet aan de behoefte aan technische illustraties en documentatie in vele industrieën.
Portable Network Graphics (PNG) is een statisch bestandsformaat voor verliesvrije, draagbare, goed gecomprimeerde opslag en uitwisseling van rasterafbeeldingen (bitmaps). Het biedt rijke kleurcontrole, met ondersteuning voor geïndexeerde kleuren, grijstinten en TrueColor en alfakanaaltransparantie. PNG is ontworpen voor het web, met mogelijkheden voor streaming en progressieve weergave. Het wordt overal ondersteund in webbrowsers, grafische ontwerptools, toolkits voor afbeeldingen en andere delen van de creatieve toolketen. PNG-bestanden hebben de bestandsextensie ".PNG" of ".png" en moeten worden geïmplementeerd met het mediatype "image / png". PNG-afbeeldingen kunnen worden gebruikt met HTML, CSS, SVG, de Canvas API en WebCGM.
Scalable Vector Graphics (SVG) is als HTML voor afbeeldingen. Het is een opmaaktaal voor het beschrijven van alle aspecten van een afbeelding of webtoepassing, van de geometrie van vormen en de vormgeving van tekst en vormen tot animatie en multimediapresentaties inclusief video en audio. Het is volledig interactief en bevat zowel een scriptbare DOM als een declaratieve animatie (via de SMIL-specificatie). Het ondersteunt een breed scala aan visuele functies zoals verlopen, ondoorzichtigheid, filters, knippen en maskeren.
Het gebruik van SVG maakt volledig schaalbare, vloeiende, herbruikbare afbeeldingen mogelijk, van eenvoudige afbeeldingen om HTML-pagina's te verbeteren, tot volledig interactieve diagram- en gegevensvisualisatie, tot games, tot stand-alone statische afbeeldingen van hoge kwaliteit. SVG wordt standaard ondersteund door de meeste moderne browsers (met plug-ins om het in alle browsers te kunnen gebruiken) en is overal beschikbaar op mobiele apparaten en settopboxen. Alle belangrijke tekengereedschappen voor vectorafbeeldingen importeren en exporteren SVG, en ze kunnen ook worden gegenereerd via scripttalen aan de client- of serverzijde.