HTML II: basiskunnskap | evaluering | illustrasjoner | lyd&levende bilder | skjema | tabell | andre webteknologier
Bilder og illustrasjoner på nettet
Innhold: Generelt, Redigering og visning, Thumbnails, Plassering av bilder, Imagemaps, Tips, Oppgaver
Generelt om bilder på nett
Et bilde kan forklare mer enn 1000 ord, er det sagt. Brukt på riktig måte er det iallefall mye hjelp i en illustrasjon når noe skal forklares. Heldigvis er det lett å montere bilder på en webside, men det er noen grunnleggende kunnskaper som må læres om dette slik at man slipper å gå i alle fellene.
Et elektronisk bilde består av mange punkter som ligger ved siden av hverandre. Det er først når øynene og hjernen tolker informasjonen (analyserer form og farge) at det blir mening i det vi ser. Den minste enheten i et digitalt bilde kalles et pixsel ("picture cells" - "pic cells" - "pixel"). Hvert enkelt piksel er alltid firkantet. Hvis du forstørrer opp et bilde uten å øke antall piksler vil du se at bildet blir "kornete". Det som, for øyet, så ut som jevne overganger når pixlene var små blir til hakkete og ujevne kanter. Originalfilene til bildene under har begge en oppløsning på 72 piksler per tomme. Forskjellen mellom dem er at bildet til høyre er forstørret, og da kommer pixlene fort tilsyne. Forminskede bilder virker skarpere, men dette er fordi øynene våre ikke klarer å plukke ut enkeltkornene i bildet.
Bildeformat
Illustrasjoner finnes på en rekke formater, avhengig av hvilket program som har laget dem og hva du velger når du lagrer dem. Av alle disse formatene er det bare tre som brukes på nettet, .jpg (jpeg), .gif eller .png.
- .jpg er et komprimeringsformat for bilder, som forminsker filstørrelsen. Per idag det vanligste bildeformatet. Les mer om jpg
- .gif - bruker 8-biters farge og komprimerer effektivt ensfargede felt mens skarpe detaljer bevares, som i strektegninger, logoer, eller illustrasjoner med skrift. Du bruker også GIF-formatet til å opprette animerte bilder. GIF støttes av de fleste Web-leserne.
- .png - formatet støtter 24-biters farge. I likhet med JPEG-formatet, bevarer PNG-24 det brede utvalget og de små variasjonene i lysstyrke og kulør som finnes på fotografier. Som GIF- og PNG-8-formatene bevarer PNG-24 skarpe detaljer, for eksempel i strektegninger, logoer og illustrasjoner med skrift. Les mer om png
Redigering og visning av bilder på nettet
For at ikke htmlfilene skal ta for lang tid å laste ned bestreber vi å lage bildene små (ca. 72 punkter pr. tomme). I tillegg bør vi, etter at bildene er montert på websiden skalere de til en hensiktsmessig visningsstørrelse, for at skjermbildet skal se riktig ut på flest mulig skjermer
Det er tre tidspunkter i prosessen du kan rette på bildene. Du kan...
- forandre egenskapene FØR BILDET BLIR TATT. De fleste digitale kameraer kan forandre oppløsningen (her er en klokke fotografert på tre forskjellige modus: 1, 2, 3)
- redigere bildets STØRRELSESVISNING i HoTMetaL Pro. Du kan la bildet beholde sin originale størrelse, men minske visningen på skjermen/i browseren. HUSK: Du sparer ikke nevneverdig tid på nedlastning siden bildet er like stort, men bildet ser mindre ut på skjermen, se thumbnails lenger ned
- REDIGERE BILDET i et bildebehandlingsprogram (dvs. forandre bildets elektroniske egenskaper)
I dette eksempelet skal vi late som om det skal holdes en avstemning om hvilket bilde som er best i en fotokonkurranse. Vi skal en nettside der brukeren skal stemme over hvilket av fire bilder som er best. Vi har fått originalene fra innsendere. Størrelsene er derfor veldig forskjellig, og vi vil vise de på en og samme nettside. Hva gjør vi?
- Hvis vi limer inne bildene i sin originale størrelse det lett bli uventede resultater (skrekkeksempel).
- Hvis man forandrer visningsstørrelsen i HoTMetaL Pro kan selve visningen bli OK, men belastningen av nettet og brukervennligheten er ikke god (mellombra løsning).
- Kvalitativt og smidigst løsning: les videre
Thumbnails/bildesnarveier
Vi kan lage thumbnails eller bildesnarveier. Når man klikker på bildet kan den store versjonen komme opp i et eget vindu (bra løsning). Etterhvert som maskinparken blir bedre/raskere vil bilder komme raskere og raskere frem på skjermen. Men det hjelper lite når det lages mer og mer avanserte sider i like stort tempo. Videosnutter/animasjon dukker også oftere opp (etterhvert som folk er på kurs og lærer dette :-). Vi opplever at "surfingen" ikke går fortere enn før, den bare inneholder mer komplisert informasjon.
OBS: Nettlesere er istand til å lese bilder direkte (hvis de er på riktig format, se over). Linken i thumbnails peker derfor gjerne direkte til bildet. Nettlesere viser, når linken peker direkte, kun bildet mot en grå eller hvit bakgrunn. Har vi (som produsent av informasjon) strengere krav til hvordan dette skal se ut må du inkluderer du en egen html-fil som vi legger bildet på, hvor du bestemmer hvilken farge bakgrunnen skal ha.
Hvordan plassere bildene på en nettside?
Hvert enkelt bilde kan plasseres på til venstre, høyre eller midt på innenfor det htmlattributtet den er plassert inn i. Hvis bildet står alene på en linje som ikke har en definert høyreside vil bildet fortsatt stå på venstre side i nettleseren. For å midtstille et bilde må man derfor heller montere bildet inn i en midtstilt paragraf. (Opprett et avsnitt (en enkel <p></p>) og gi avsnittet egenskapen "midtstilt" (egen knapp i verktøylinjen). Flytt bildet inn i denne paragrafen).
Men det finnes alternative måter å jobbe med bilder på. Det blir ikke mye spennende design når vi kun har tre mulige horisontale plasseringer. HTML er, som vi nevnte på grunnkurset, ikke utviklet med tanke på komplisert design. Putter vi bildet inn i en tabell kan vi få mer kontroll over plasseringen.
Image Map, flere linker i et bilde
Det er noen ganger du vil at det skal være mulig å klikke på bilder for å kommer til et annet sted på nettet. Og noen ganger er det også ønskelig at det skal være mulig å ha flere linker avhengig av hvor på bildet brukeren klikker. Image Map vil si å dele opp et bilde i soner, der hver sone f.eks. har en . Pek på bildet under og følg med på linkene som forandrer seg i oppgavelinjen (nede til venstre i nettleseren. Klarer du å finne alle linkene?
Tips til slutt
- Verdt å vite om digitale kameraer
- Det er viktig å gi gode og riktige navn på bilder. Se hva som skjedde når Dagbladet navnet bildene på en litt uheldig måte.
- Les mer om digitale bilder på "Einars digitale hjørne"Oppløsningen på bilder bør tilpasses hva de skal brukes til. "dpi" betyr "dot per inch" (punkter per tomme). For huskeregel kan du pugge følgende oveiweb 72 dpi, for foldere og enkel reklameplakater 150, for kvalitetstrykk 300 dpi og oppover.
- Husk også at 72 punkter pr. cm ikke er nok til å lage et godt trykket bilde, så det lønner seg at du beholder originalen på et eget sted slik at du har en bedre original til trykking
- Et bilde som skal vises alene på skjermen bør ikke overstige 570 piksler i bredden. Det vil da kunne vises på de aller fleste skjermer i skjermmodus 640x480.
- Hvordan kan jeg optimalisere grafikken?
Oppgaver om bilder til de som vil prøve litt selv
- Hvordan ville du sette inn figurtekst ved siden av et bilde på webben? (tips: les listen over mulige htmlkoder)
- Sett et vilkårlig bilde inn i en tabell, og benytt tabellen til å plassere figurteksten forskjellige steder omkring bildet.
- Lag din egen fotokonkurranse. (Tips: Bruk egne bilder eller hent noen fra siden http://www.usit.uio.no/it/kurs/html/oppgaveillustrasjoner.html)
- Lag din egen bildepresentasjon på nettet. (Tips: Benytt tabell der forklaringen av bildene er til venstre og bildene i den høyre kolonnen)
- Lag en presentasjon av en nybygd bro på nettet (Noen tips: Kopier det store bildet av broen fra fotokonkurransen, finn på din egen tekst, benytt imagemaps slik at brukeren kan klikke fra et lite bilde av broen til et stort.
Redaksjon: sas-oi@usit.uio.no, sas-oi@usit.uio.no
Forfatter: 2002-09-06
Dokument opprettet: 08.08.2000, endret: 06.09.2002