BILD - IMAGE - JPG - JPEG - GIF - PNG - TIF - BMP . . .

Images - Bilder (med filändelser som t ex jpg/jpeg, gif, tif, bmp & png)   -   ARBETSMATERIAL

Bildskärmen är uppdelad i ett rutmönster som består av små punkter. Tillsammans bygger dessa punkter upp bilden som visas på skärmen. En sådan här punkt kallas pixel.
En bild visas med det antal pixlar som din skärmupplösning klarar av. Högre upplösning i skärmen innebär flera pixlar. Flera pixlar innebär också självklart att varje pixel blir mindre.
Då upplösningen, detaljrikedomen, ökar så minskar pixlarna i storlek.

Här kan du översiktligt se exempel på vanliga upplösningar relaterade till olika skärmstorlekar:

Du får aldrig glömma att olika användare har olika bildskärmar (monitorer)! Till skillnad från trycksaker som alltid är slutgiltiga fysiska produkter så kan en webbsida komma att ta sig olika ut hos olika användare (betraktare).
Skärmstorlekar varierar och idag är det allt vanligare med både 19",  21" & 23" bildskärmar på/för/tillsammans med/  PC/Desktop, 
lite varstans,
dock icke då det gäller datorer typ  s.k. laptop, notebook & s.k. Smartphones.
Kom ihåg att en bildskärms storlek mäts diagonalt.
Skärmupplösningen varierar också och ju högre upplösning ju mindre blir ju olika föremål på skärmen.
Om en skärmbild flimrar eller inte beror på s.k. vertikal svepfrekvens.
Detta har att göra med hur många gånger per sekund som en bild ritas upp på skärmen.
Ofta är man icke medveten om något flimmer vid en skärmkvalitet över 70Hz (70 ggr/sek).
Dessvärre påverkas dock vår hjärna upp till omkring 90 Hz.
Här kan självklart föreligga skillnader mellan de traditionella, gammaldags, skärmtyperna
och de nya platta skärmarna.

Överföringshastigheten på vanliga modem varierar mellan 14400 bps och 56000 bps (bitar per sekund). 
ISDN-uppkopplingar hanterar upp till 128000 bps.
Hos vissa större företag och myndigheter tillämpas fasta uppkopplingar och där kan överföringshastigheten ligga på mer än 2 Mb per sekund.

Beroende på bl a skärmkvalitet och grafikkort så hittar man olika färgdjup hos olika användare.
Hos vissa användare finns endast 16 färger och hos vissa andra visas upp till 16 miljoner färger...

Arbetsminne (RAM) tillika med grafikkortets kapacitet och kvalitet utgör också viktiga resurser vid hantering av webbaserat material.

GIF/gif-formatet kan endast visa (återge) 256 färger. Detta lämpar sig bra till enklare bilder, knappar, ikoner e.d.
Det finns två (2) olika versioner av GIF, GIF87 & GIF89. I GIF89 kan man göra bilden genomskinlig och "interlaced".
Om du t ex gör om ett foto, som i original var i jpg-format, till GIF så får du en större fil men du får också en randig bild.
En fördel med GIF-formatet är att du enkelt kan göra en bild transparent vilket innebär att den anpassar sig till webbsidans färgbakgrund. En GIF-fil kan också laddas ned (öppnas) "interlaced" vilket innebär att bilden laddas ned (öppnas) i omgångar (successivt) och växer så fram gradvis på skärmen.

JPG/JPEG-formatet kan visa (återge)  cirka 16,7 miljoner färger.
Skall du använda fotografier på din webbsida så faller det sig oftast naturligt att använda detta format. Tänk bara på då du gör en komprimerad kopia för publicering på din webbsida att alltid spara originalet icke-komprimerat lokalt och förslagsvis bland andra original i en särskild mapp i din dator.
Vid kompression (minskning av filformatet) av en bild så tas detaljer och färgnyanser bort som ögat ändå inte skulle ha uppfattat.
Prova gärna i t ex Photoshop att göra några olika kopior av ett original med olika grad av upplösning. Titta sedan i minst en webbläsare på resultatet.

PNG-formatet har alla fördelar GIF-formatet har men kan visa flera färger. Eftersom inte alla webbläsare klarade detta format ännu 2005 fick man tidigare vara lite återhållsam och "ligga lågt" med att använda detta format.  Men, som sagt, nya tider bringar nya möjligheter och öppningar av olika slag.

BMP-Full form: Stands for Bitmap
Extension: .bmp
These large uncompressed files are associated with graphic files inside the Windows OS.
Nackdel/-ar: kan icke komprimeras; ...simplistic structure makes them ideal for Windows programs.

TIF-TIF file extension
Full form: Tagged Image File Format.
Extension: .tif/.tiff
Flexible and easily extensible file format capable of handling device-specific color spaces.
These files have a transparent background. They are perfect for company logos.

Cons/Nackdelar: Not ideal for web browsers. - Inte särskilt lysande för webbsidor!

Application/Användning/Tillämpning: Foto, foto för tryck etc; Photographic file standard in print.
OCR software packages.

Läs mer på https://www.pagecloud.com/blog/web-images-png-vs-jpg-vs-gif-vs-svg    

 eller https://www.photoup.net/differences-between-file-formats-raw-dng-tiff-gif-png-jpeg/  .

 

   ClipArt-bilder som följer med MS Office är ofta i formatet WMF (Windows Meta Files).
 I t ex FrontPage/Microsoft Expression Web  görs dessa filer oftast om till GIF-format.

   Den stora fördelen med jpg-bilder är att du i bildhanteringsprogram som t ex Photoshop kan redigera bildinnehållet
men också komprimera filstorleken väsentligt, därmed också skapa olika versioner av en och samma bild.
Du kan givetvis även beskära bilden och göra förändringar beträffande ljus och färgsättning mm
vilket du också kan göra i mer begränsad omfattning i program som MS Front Page, MS Expression Web,
Dreamweaver och andra liknande program för tillverkning av webbsidor.

 Att komprimera en fotografisk bild (ett fotografi) som skall visas på en bildskärm (monitor/screen) innebär flera fördelar.
Webbsidan ifråga går snabbare att öppna, bilden visas komplett mycket snabbare,
och bildskärmen skulle ändå inte ha klarat av att tillfullo återge alla detaljer och allt innehåll som originalfotografiet innehåller.
Skärmbilden kommer att duga gott för både det mänskliga ögat och de tekniska förutsättningarna som finns i datorn där bilden skall visas.

Ett helt annat förhållande råder ju då du skall göra en papperskopia av ett originalfoto. Då gör det kanske heller ingenting om filstorleken är 8,6 Mb eller mer. Många av våra "digitala bilder" vi tar med våra digitalkameror idag blir lätt cirka 3 Mb om vi har ställt in kameran på hög bildkvalitet, många pixlar etc.
Som du kanske redan uppmärksammat om du använt digitalkamera så kan du exempelvis ställa in kameran för att ta bilder med 3056x2296 pixlar, 2592x1944, 1600x1200, 1024x768 eller 640x480 etc.

Beroende på kamerans kvalitet, minneskortets storlek mm så  kommer du snart att upptäcka att med en viss inställning kan du kanske ta 62 bilder och med en annan inställning kan du ta 226 bilder. Beroende på vilka behov som föreligger, var och hur bilderna skall visas, så väljer man graden av upplösning i bilden. För bilder som man vet endast skall visas på en datorskärm av en webbläsare så räcker det ofta gott om digitalkamerans upplösning (pixlar) har ställts in på t ex  1600x1200.

Vad man alltid måste ha i åtanke vid bildbehandling, t ex komprimering av jpg-bilder, är kampen mellan tid & kvalitet.
Viss försämring av kvalitet märks oftast inte alls medan tidsvinsten vid öppningen (nedladdningen) av en webbsida eller ett bildmaterial alltid står i fokus.

Då du arbetar med bilder och webbsidor så kan du se i skärmens nedre högerkant en tidsangivelse som talar om hur lång tid sidan tar att öppna vid t ex 28,8 kbit/s (långsamt modem). Högerklickar du på denna information så kan du istället ändra informationen till något som relaterar till en  annan överföringshastighet som ISDN eller bredband.

Skoj på hoj i skogen med Kjell...

... img border="0" src="../../images/BEAR.GIF" width="210" height="218"

... img border="0" src="../../images/hottextburning.gif" width="127" height="48"

Här kan du se vilken storlek bilden har men också vilket utrymme (luft/tomt) som finns intill (omkring) bilden.

Image är ju det engelska ordet för bild (förutom picture förstås...) och förkortas i datorsammanhang oftast img.

Border står ju för gräns eller kantzon och src är ju den engelska förkortningen för ordet source som betyder källa (varifrån bilden har hämtats och lagrats).

Width står för bredden och height står ju för höjden och här "snackar vi" pixlar.
Genom attributet ALIGN så kan man tillsammans med taggen IMG placera bilden till höger, vänster eller  centrerat på raden ("CENTER"  eller "MIDDLE" på sidan) eller högst upp på sidan ("TOP") etc.

Ett vanligt förekommande problem för många som nyss har börjat göra webbsidor är att bilder som man vill använda inte har lagts in i rätt mapp/katalog. Man kan ibland se bildreferenser (och även länkar) till material som finns utom räckhåll och därmed inte kan visas.

Grundtips för alla som börjar, eller skall börja, göra s.k. hemsidor (webbsidor) är, fortfarande, att alltid börja med att skapa en ny mapp (katalog) där första sidan alltid är en startsida (index.htm alt default.htm) samt därefter se till att det finns en underordnad mapp för bilder (images).
Se till att de bilder du skall använda importeras till (läggs in i) din bildmapp!

Detta underlättar sedan vid uppladdning av sajten då helst allt material skall kunna levereras som ett enda stort paket till servern för vidare leverans till alla världens potentiella besökare (datoranvändare).

Ok?

Dator/klok/WebkameraProv.mp4 - Denna fil har nu tagits bort.

Här finns nu något av större vikt & betydelse,
även för dig.

... och här vilar ansvaret tungt.