Bilder på web

Faggruppemøte Brukskvalitet, 19.02.14

av Ole Petter(reveal.js-tema av Atle)

Bildeformater i rasterformat

JPG, PNG, GIF

Bildeformater i vektorformat

!

SVG (Scalable Vector Graphics)

<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.0" width="520" height="520">
<style type="text/css">

  path {
    fill-opacity:1;stroke:none;stroke-width:1px;stroke-linejoin:miter;stroke-opacity:1
  }

</style>
<defs>
  <linearGradient id="dk">
    <stop style="stop-color:black;stop-opacity:1" offset="0"></stop>
    <stop style="stop-color:black;stop-opacity:0" offset="1"></stop>
  
  <linearGradient id="lt">
    <stop style="stop-color:#ffe681;stop-opacity:1" offset="0"></stop>
    <stop style="stop-color:#ffe681;stop-opacity:0" offset="1"></stop>
  
  <linearGradient x1="136.4" y1="136.4" x2="167.5" y2="167.5" id="tl" href="#lt" gradientUnits="userSpaceOnUse">
  <linearGradient x1="136.4" y1="383.6" x2="167.5" y2="352.5" id="bl" href="#lt" gradientUnits="userSpaceOnUse">
  <linearGradient x1="383.6" y1="383.6" x2="352.5" y2="352.5" id="br" href="#dk" gradientUnits="userSpaceOnUse">
  <linearGradient x1="383.6" y1="136.4" x2="352.5" y2="167.5" id="tr" href="#dk" gradientUnits="userSpaceOnUse">
</linearGradient></linearGradient></linearGradient></linearGradient></linearGradient></linearGradient></defs>
<path style="fill:#d4a000;stroke:black;stroke-width:9" d="M 260,6.3 L 6.3,260 L 260,513.7 L 513.7,260 L 260,6.3 z"></path>
<text style="font-size:362px;font-weight:bold;font-family:Times New Roman, serif" y="380" x="200">!</text>
<path style="fill:url(#tl)" d="M 260,12.7 L 260,75 L 75,260 L 12.7,260 L 260,12.7 z"></path>
<path style="fill:url(#bl)" d="M 260,507.3 L 260,445 L 75,260 L 12.7,260 L 260,507.3 z"></path>
<path style="fill:url(#br)" d="M 260,507.3 L 260,445 L 445,260 L 507.3,260 L 260,507.3 z"></path>
<path style="fill:url(#tr)" d="M 260,12.7 L 260,75 L 445,260 L 507.3,260 L 260,12.7 z"></path>
</svg>

Bilder i HTML

						<img src="img/file_extensions.png">
					

Responsive bilder

						img {
    max-width: 100%;
}
					

Max-width-quickfix

Men hva med...

• ... filstørrelsen?
• ... retinaskjermer?
• ... klipping av bilder?

Filstørrelse og skalering

Hvorfor laste ned et bilde med bredde på 1200px for å vise på en skjerm med bredde på 500px?

Bruker unødvendig mye båndbredde og ressurser på telefonen.

Velg riktig format

SVG: Vektorgrafikk (IE9+, Android 3+)

JPG: Foto

PNG: Logo, ikoner og annet

GIF: Spinner?

... og komprimer det

Art Direction

Automatisert klipping gir ikke alltid et godt resultat.

Art Direction

Er webredaktøren villig til å klippe?

Art Direction

Bør systemet ha innebygd løsning for klipping i systemet?

Retina og skalering

• obama-480px.jpg
• obama-640px.jpg
• obama-640px-retina.jpg
• obama-960px.jpg
• obama-960px-retina.jpg
• obama-full.jpg

pluss klippede versjoner

Server riktig bilde

• Javascript
• Serverside
• Image srcset
• <picture>

Javascript

Som for alt annet finnes det en haugjavascriptbiblioteker som vil hjelpe

• Mobify.js
• responsive-images.js
• Picturefill
• HiSRC
• ReSRC.it

Serverside

• Adaptive Images
• Sencha.io src

Image srcset

						<img src="fallback.jpg" srcset="small.jpg 640w 1x, 
small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…">
					

<picture>

						<picture alt="description">
  <source src="small.jpg">
  <source src="medium.jpg" media="(min-width: 640px)">
  <source src="large.jpg" media="(min-width: 980px)">
  <img src="fallback.jpg" alt="">
</picture>
					

Imagesprites

Slå sammen bildene, f.eks. med SpritePad, SpriteMe og SpriteGen

						<style>
.icon--user {
	display: inline-block;
	width: 11px; height: 14px;
	background-image: url(img/xing.png);
	background-position: -225px -9px;
}
</style>
<span class="icon--user"></span>
					

Ikon:

Icon fonts

FontAwesome, Glyphicons eller lag din egen (Fontastic.me)

						<span class="fa fa-desktop"></span>
					

Ikon:

Skalerer

						font-size: 10em;
					

CSS

						font-size:10em; color: #bouvet;
					

Spørsmål eller kommentarer?