HTML-Bildtaggar (<img>) & Figure + Figcaption (HTML5 bildbehållare och mer)

av ·0 kommentarer

Bilder är något av det vanligaste typen av innehåll förutom text som man brukar placera på sina webbsidor, de kan ge webbsidan ett proffsigare och ”fullare” intryck om det är bilder av rätt typ, på rätt plats :)

HTML’s bildtaggar känner ni säkert igen sedan tidigare: <img>, själv brukar jag använda 4 attribut (+ klass / ID) för mina bilder: src, width, height samt alt.

MDN’s referenssida för HTML bildtaggen <img> hittas här: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img.

Tankar kring bildformat att använda (.jpg, .png, .gif, etc.)

Jag brukar hålla mig till .jpg, .png, .gif när jag lägger upp bilder med <img> taggen på webbsidor, däremot säger MDN’s referenssida att antalet stödda bildformat är upp till webbläsaren som tolkar webbsidan – förutom de listade ovan finns ju även SVG (Scalable Vector Graphic (bibehåller alltid samma höga kvalitet)), samt BMP (Bitmap picture).

Några webbartiklar jag hittade som verkar ha intressant och bra information om detta område kan ses nedan för de av er som vill läsa på lite extra om detta:

Insikt .png bildformat (Portable Network Graphics – fonetiskt uttalat PING)

.png är ett jättestarkt bildformat i mån av snabb laddningstid, stöd för alpha-kanal (genomskinliga bilder – som GIF fast högre upplösning), bra kvalitet och har allt.

MEN(!) det är inte alltid som .png bildformatet stöds i alla webbläsare – därför kan man i t ex. Internet Explorer ibland behöva lägga in extra kod för att bidra med extra stöd (JavaScript).

Detta är nog enda nackdelen jag kan komma på. När .png bildformatet inte stöds så kan kvaliteten bli lidande och i värsta fall (typ i äldre Internet Explorer) så försvinner alphakanalen och blir vanlig vit färg istället.

.png brukar jag själv använda för t ex. logotyper, ikoner, transparenta bilder.

För att se lite kortfattat vad Wikipedia säger om .png som bildformat se nedan utdrag:

Portable Network Graphics (PNG) is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF), and is the most used lossless image compression format on the Internet.

PNG supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors), grayscale images (with or without alpha channel), and full-color non-palette-based RGB[A] images (with or without alpha channel). PNG was designed for transferring images on the Internet, not for professional-quality print graphics, and therefore does not support non-RGB color spaces such as CMYK.

PNG files nearly always use file extension PNG or png and are assigned MIME media type image/png

För webbläsarsupport se följande utdrag från Wikipedia:

Despite calls by the Free Software Foundation and the World Wide Web Consortium (W3C), tools such as gif2png, and campaigns such as Burn All GIFs, PNG adoption on websites has been fairly slow due to: late and buggy support in Internet Explorer, particularly regarding transparency.

PNG compatible browsers include: Apple Safari, Google Chrome, Mozilla Firefox, Opera, Camino, Internet Explorer 7 (still numerous issues), Internet Explorer 8 (still some issues), Internet Explorer 9 and many others. For the complete comparison, see Comparison of web browsers (Image format support).

Especially versions of Internet Explorer (Windows) below 9.0 have numerous problems which prevent it from correctly rendering PNG images.

Där kan ni ju se hur stora problem Internet Explorer haft och har med .png som bildformat.

Inkluderade även där lite länkar från Wikipedia utdraget som kan hjälpa skapa stöd för .png bilder om ni är ute efter sådant i tidigare versioner av Internet Explorer, såväl som länken till en jämförelsetabell där man lättare kan översiktligt se vilka webbläsare har vilket typ av stöd för .png som bildformat.

Var dock vaksamma på att även om där finns s.k. ”hack” för att fixa stöd för .png bildformat, så brukar detta fortfarande vara rätt så klumpigt och problematiskt och inte optimal lösning.

Insikt .jpg bildformat

.jpg formatet är ett jättestarkt bildformat när det gäller högupplösta och högkvalitativa bilder (mycket färger och mycket nyanser) – bör användas vid fotografier eller liknande.

Se följande artikel för mer insikt: https://css-tricks.com/when-to-use-jpg-and-when-to-use-gif/

Insikt .gif bildformat (Graphics Interchange Format)

Använd om bilden har fåtalet färger, ganska hårda och distinkta kanter, ev. alpha kanal för transparens, eller om ni har GIF animationer (PNG kan inte göra animationer).

GIF animationer (se hur man skapar dessa med hjälp av verktyg listade på Länkar-sidan) kan läggas in på webbsidor med <img> taggen.

Positionering av bilder bland innehållet för webbsidan

Angående positionering av bilder på en webbsida säger jag bara en sak: CSS.

All positionering utav bilder sker via CSS. Kommer skriva mer om detta i inlägg för CSS-kodning senare framöver :)

Klickbara bilder med länkar (<a>)

Ni har säkert besökt webbsidor där de haft ikoner/bilder som varit klickbara, detta kan göras genom att ersätta länktexten med en <img> tagg med bilden man önskar vara klickbar!

Det är egentligen väldigt enkelt. Enda anledningen att kanske överväga kompletterande text eller andra alternativ än bilder som länkar, är då bilders information inte är så lättupptaglig av sökmotorindexerings robotarna (se följande inlägg). Se nedan för hur en sådan bild-länk annars kan göras i HTML:

<a href="#" target="_blank"><img src="bilder/bildfil.jpg" width="150" height="150" alt="alternativ texten här" /></a>

Vid klickning av ovan länk så är det <a> taggens href (hypertext reference) attribut som bestämmer vart länken ska leda som för alla andra länkar, <img> taggens src attribut är som vanligt till för att indikera källan till bilden som skall visas.

Figure behållare med Figcaption för bilder med undertexter

Figure och figcaption är en ny tagg som kom med HTML5 och är väldigt populär att använda som bildbehållare och utifall man vill ha bildtexter till sina bilder.

Jag har hittat en jättebra och fin webbartikel hos HTML5Doctor.com, där de i detalj går igenom hur man använder <figure> och <figcaption>. Det var den artikeln som lärde mig hur man gjorde. Se nedan lista med dels den artikeln, såväl som MDN referenssidor för <figure> och <figcaption>:

Som ni säkert redan listat ut så är <figure> själva behållaren för en/flera bilder, medan <figcaption> hamnar inuti behållaren och utgör bildtexten för den ene/flera bilder(na) som ligger i <figure> behållaren.

Varken <figure> eller <figcaption> har några attribut direkt att använda, styling sker via CSS.

Dock är inte <figure> och <figcaption> begränsat till enbart <img> taggar, utan kan även användas till andra taggar. Det är heller inte alltid <figure> och <figcaption> är lämpligt att använda. För mer info om båda dessa påståendena se nedan citat från HTML5Doctor’s webbartikel om <figure> och <figcaption>:

No need to constrain your <figure>s to images and code examples. Other content suitable for use in <figure> includes audio, video, charts (perhaps using <canvas> or <svg>), poems, or tables of statistics.

It may not always be appropriate to use the <figure> element, though. For example, a graphic banner should not be marked up with<figure>. Instead, simply use the <img> element.

<figure> med 1 bild och utan <figcaption>

<figure>
   <img src="bilder/bildfil.jpg" width="150" height="150" alt="alternativ text för bild här" />
</figure>

<figure> med 1 bild och <figcaption>

<figure>
   <img src="bilder/bildfil.jpg" width="150" height="150" alt="alternativ text för bild här" />
   <figcaption>Här placeras sen bildtexten för bilden</figcaption>
</figure>

<figure> med flera bilder och <figcaption>

<figure>
   <img src="bild1.jpg" width="150" height="150" alt="alttext" />
   <img src="bild2.jpg" width="150" height="150" alt="alttext2" />
   <img src="bild3.jpg" width="150" height="150" alt="alttext3" />
   <figcaption>Bildtext för ovan 3 st. bilder placeras här</figcaption>
</figure>

Alla ovan exempel kan se förhandsgranskade i webbläsaren här

Praktiskt exempel och demo av figure och figcaption i HTML.

Praktiskt exempel och demo av figure och figcaption i HTML.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *