En inline-bild är en grafisk bild som infogas på en webbsida för att lägga till visuellt tilltalande, tillhandahålla information eller för att representera en hyperlänk. Inline-bilder är vanligtvis i GIF-, JPEG- eller PNG-format. De är inkorporerade i en webbsida med hjälp av data-URI-schemat.
Data-URI:er tillåter inbäddning av små data som omedelbart kan hämtas av webbläsaren. Inline-bilder hämtas av webbläsaren tillsammans med HTML och visas som en del av webbdokumentet. För att webbläsaren ska kunna hämta och visa bilderna utan alltför mycket tid och besvär är det lämpligt att använda små inline-bilder.
Större bilder skulle sakta ner laddningstiden och göra att det tar lång tid innan webbplatsen visas på skärmen. De flesta webbbesökare har inte tålamodet att hänga runt för att se det hända. Detta skulle påverka webbplatstrafiken negativt.
HTML inline-bilder hämtas från servern på webbplatsen där de ska visas, eller inkluderas från andra externa servrar. Att använda inline-bilder från externa källor är en stridsfråga eftersom detta kan göras utan tillstånd. Img-taggen används för att infoga inlinebilder i stycken och rubriker på webbsidan. Img-taggen kan inte användas i en fritt flytande form. Det måste vara inneslutet i ett annat element.
Det obligatoriska attributet för img-taggen är attributet src. Attributet src anger webbadressen eller URL från vilken webbläsaren kan hämta bildfilen. Förutom src-attributet kan HTML inline-bilder definieras av tre valfria attribut. Dessa är alt, align och ismap.
Alt-attributet tillhandahåller ett inline-bildtextalternativ. Så om tittarens webbläsare inte stöder grafik, kommer tittaren att se texten i stället för bilden. Att använda alt-attributet rekommenderas starkt.
Alt-attributvärdet kan vara en tom sträng. Till exempel, om det finns en dekorativ bild, är det inte nödvändigt att tillhandahålla alternativ text för den. Därför kan alt-attributvärdet lämnas tomt.
Inline-bildstilen kan ställas in med attributet align. Attributet align talar om för webbläsaren var den infogade bilden måste visas i förhållande till texten på webbsidan. Den infogade bilden kan justeras med toppen, mitten eller botten av den intilliggande texten på webbsidan.
Med ismap-attributet kan en inline-bild markeras som en aktiv bildkarta. Detta innebär att olika delar av bilden kan fås att producera olika åtgärder när någon klickar på de olika delarna. Till exempel, om det finns en inline-bild som visar jorden och Saturnus, kan ett klick på jorden leda till information om jorden och ett klick på Saturnus kan leda till information om Saturnus.
Till skillnad från alt och align-attributen fungerar inte ismap-attributet bara genom att inkludera i img-taggen. Det kräver viss konfiguration på servern. Viss mängd programmeringskunskaper kan också krävas.