Hva er HTML-grafikk?

I HyperText Markup Language (HTML) er det en rekke måter å vise og lage grafikk i et HTML-dokument. Den mest brukte typen HTML-grafikk er bilder som er plassert direkte på HTML-siden, kalt inline images, selv om det er andre metoder - for eksempel å bruke skriptspråk eller kompilert webapplikasjon - som kan brukes til å oppnå de samme resultatene. For dynamisk generert grafikk for diagrammer eller grafer kan skalerbar vektorgrafikk (SVG) brukes. Det er også noen grunnleggende HTML-grafikk som støttes av språkspesifikasjonen og ikke krever eksterne filer som horisontale linjer og kuler i en liste. Mer kompleks HTML-grafikk kan oppnås ved bruk av et skriptspråk, cascading stilark (CSS) og HTML-lerretselementet, noe som gir et alternativ for noen effekter som tidligere bare var mulig gjennom eksterne objekter og plugins.

Langt sagt er inline HTML-grafikk den mest brukte og den enkleste måten å plassere et bilde i et HTML-dokument. Dette innebærer i utgangspunktet å lage et bilde i en bilderedigerer, lagre det i et ofte brukt filformat og deretter spesifisere navnet og plasseringen til bildefilen i HTML-dokumentet med IMG-taggen. Bortsett fra enkelheten med å innlemme en inline-grafikk i et dokument, kan gjengivelsesmotoren i de fleste nettlesere enkelt plassere grafikken i mer komplekse sideoppsett uten formateringsartifakter. En komplikasjon som kan oppstå med et inline-bilde, er at bildestørrelsen kan trenge å skaleres for å passe på usedvanlig store eller små skjermer når du ser dem, noe som potensielt kan redusere bildekvaliteten.

Skalerbar vektorgrafikk er en mer kompleks stil med HTML-grafikk. Et SVG-bilde tegnes ved å definere former, stier og strekvekter og tegnes mens du ser dokumentet. Dette gjør SVG til et godt valg for å vise dynamiske data som diagrammer eller grafer, men det gjør dem veldig upraktiske å bruke til andre typer grafikk, for eksempel å lage fotorealistiske bilder. For enkel HTML-grafikk, og i situasjoner der en ekstern bildefil ikke kan lastes, kan SVG være et levedyktig alternativ.

Med utviklingen av HTML versjon 5 språkstandard (HTML5), er dynamisk HTML-grafikk mulig å lage innenfor det grunnleggende HTML-språket. Dette gjøres ved å tegne direkte til en spesiell overflate kjent som lerretet i et HTML-dokument. Ved å bruke JavaScript® og CSS kan denne metoden lage animasjoner eller spill som kan svare på brukerinndata eller justere grafikk avhengig av innstillingene til nettleseren eller andre data. Å lage en HTML5-grafikk kan imidlertid være en kompleks prosedyre som kan føre til lange blokkeringer med skriptkode som kan kjøres veldig sakte på noen datamaskiner eller enheter.