Upplösning och storlek på bild för webb (var: "helt enkelt?")
- Trådstartare sara gust
- Start datum
l-malmqvist
Aktiv medlem
Re: helt enkelt?
Du ska skicka bilderna i en upplösning så att bilderna blir i rätt storlek beroende på vilken skärmupplösning den som kollar på hemsidan har. (Puh... lång mening). Endast pixlar räknas. Dvs. DPI och cm kan du ignoriera helt, det finns mig veterligen ingen browser som bryr sig om den informationen.
Skickar du en bild i ex. 640x480 pixlar så ser den olika stor ut beroende på vilken upplösning personen som kollar på den kör sin skärm i, det måste man ta hänsyn till när man bygger hemsidor.
Ex. om du kör Firefox och har skärmen på 1024x768 upplösning så syns en bild på cirkus 950x550 pixlar med lite marginal runt. Detta ändras om du byter upplösning på skärmen. Så svaret blir - storleken beror på vilken upplösning man antar att den som kollar på hemsidan har.
JPG för bilder, GIF för illustrationer och ramar etc.
Du ska skicka bilderna i en upplösning så att bilderna blir i rätt storlek beroende på vilken skärmupplösning den som kollar på hemsidan har. (Puh... lång mening). Endast pixlar räknas. Dvs. DPI och cm kan du ignoriera helt, det finns mig veterligen ingen browser som bryr sig om den informationen.
Skickar du en bild i ex. 640x480 pixlar så ser den olika stor ut beroende på vilken upplösning personen som kollar på den kör sin skärm i, det måste man ta hänsyn till när man bygger hemsidor.
Ex. om du kör Firefox och har skärmen på 1024x768 upplösning så syns en bild på cirkus 950x550 pixlar med lite marginal runt. Detta ändras om du byter upplösning på skärmen. Så svaret blir - storleken beror på vilken upplösning man antar att den som kollar på hemsidan har.
JPG för bilder, GIF för illustrationer och ramar etc.
andewid
Aktiv medlem
Re: Re: helt enkelt?
Du kan iof ange storlekar i HTML-koden i cm, mm osv. Du är inte låst till att använda pixlar =) Du kan tom använda % om du vill ha en relativ storlek istället. Eller använda tecken/fontstorlek som mått - dvs ange att en bild ska vara xx tecken hög/bred (em).
l-malmqvist
Aktiv medlem
Re: Re: Re: helt enkelt?
Bra poäng - fungerar det med alla browsers? Och utgår browsern i så fall ifrån 72 PPI om man definierar storleken i cm eller mm? Om man anger storleken i % så skalas väl bilden om och ser kass ut?
Bra poäng - fungerar det med alla browsers? Och utgår browsern i så fall ifrån 72 PPI om man definierar storleken i cm eller mm? Om man anger storleken i % så skalas väl bilden om och ser kass ut?
andewid
Aktiv medlem
Re: Re: Re: Re: helt enkelt?
Och nej, browsern utgår inte från 72 PPI, utan ska utgå från skärmens faktiska upplösning. Med andra ord om du anger <img src="bild.jpg" style="width:10cm; height:10cm"> så blir den 10cm på skärmen, oavsett om du kör 800x600 eller 1600x1200.
Visst, bilden skalas om. Tyvärr så skalar IE om jättefult. Använd istället Opera som använder bikubisk omskalning (som Photoshop). Hur FireFox/Mozilla/Netscape/Safari gör vet jag inte.
Ja, om browsern stöder HTML och CSS så fungerar det. (IE stöder iof inte CSS något vidare bra, men längdmått fungerar iaf).
Och nej, browsern utgår inte från 72 PPI, utan ska utgå från skärmens faktiska upplösning. Med andra ord om du anger <img src="bild.jpg" style="width:10cm; height:10cm"> så blir den 10cm på skärmen, oavsett om du kör 800x600 eller 1600x1200.
Visst, bilden skalas om. Tyvärr så skalar IE om jättefult. Använd istället Opera som använder bikubisk omskalning (som Photoshop). Hur FireFox/Mozilla/Netscape/Safari gör vet jag inte.
ErikGustavsson
Aktiv medlem
Hur vet browsern vilken storlek jag har på skärmen då? för 10cm är ju x pixlar på en 17" skärm med 1024x768 men x+y pixlar på en 15" skärm med samma upplösning.
I photoshops "spara för webb" så skriver den inte i någon information för dpi eftersom den är irrelevant för webdesigners, inte heller följer cmm-data med och bilden görs om till sRGB. Jag antar att save for web tar bort allt vad metadata heter för att minimera filstorleken till minsta lilla (precis som man i regel vill när man använder save for web).
När jag levererar bilder för webbruk så skickar jag dem i den upplösning de är i, alternativt minskar dem till 800x600 eller någonstans däromkring om mängden data som skall skickas måste hållas ner (epost t.ex), sen utgår jag ifrån att den som ska jobba med bilderna själv har photoshop eller liknande.
mvh
Erik G
I photoshops "spara för webb" så skriver den inte i någon information för dpi eftersom den är irrelevant för webdesigners, inte heller följer cmm-data med och bilden görs om till sRGB. Jag antar att save for web tar bort allt vad metadata heter för att minimera filstorleken till minsta lilla (precis som man i regel vill när man använder save for web).
När jag levererar bilder för webbruk så skickar jag dem i den upplösning de är i, alternativt minskar dem till 800x600 eller någonstans däromkring om mängden data som skall skickas måste hållas ner (epost t.ex), sen utgår jag ifrån att den som ska jobba med bilderna själv har photoshop eller liknande.
mvh
Erik G
l-malmqvist
Aktiv medlem
Smart! Man lär sig något varje dag.
joppis
Aktiv medlem
Re: Re: Re: Re: Re: helt enkelt?
Det där lät inte bara lite komiskt.. dessutom är det helt fel i informationen. Visst kan du ändra storlek på en bild med CSS men är absolut inget krav. Och vem använder browsers som inte hanterar HTML? Det är ju programmets huvuduppgift
Att tvinga en bild att visas i olika pixelstorlekar har fungerat minst sedan 1996 då jag började koda HTML. Dock ska man (som någon påpekade) ha i åtanke att det inte ser så snyggt ut rent kvalitetsmässigt.
Och ja det går att, med t ex javascript, ta reda på vilken upplösning surfaren använder men tänk på att surfaren inte nödvändigtvis använder hela skärmen för browsern utan kan ha andra program öppna som MSN eller ICQ.
640 i bredd låter lagom för webb.. även 1024 om man struntar i modemanvändarna.
Det där lät inte bara lite komiskt.. dessutom är det helt fel i informationen. Visst kan du ändra storlek på en bild med CSS men är absolut inget krav. Och vem använder browsers som inte hanterar HTML? Det är ju programmets huvuduppgift
Att tvinga en bild att visas i olika pixelstorlekar har fungerat minst sedan 1996 då jag började koda HTML. Dock ska man (som någon påpekade) ha i åtanke att det inte ser så snyggt ut rent kvalitetsmässigt.
Och ja det går att, med t ex javascript, ta reda på vilken upplösning surfaren använder men tänk på att surfaren inte nödvändigtvis använder hela skärmen för browsern utan kan ha andra program öppna som MSN eller ICQ.
640 i bredd låter lagom för webb.. även 1024 om man struntar i modemanvändarna.
andewid
Aktiv medlem
Re: Re: Re: Re: Re: Re: helt enkelt?
Det stämmer visst att OS använder DDC informationen för att ta reda på skärmens fysiska storlek och kan därför beräkna rätt längder för CM och DPI/PPI.
screen #0:
dimentions: 1152x864 (379x247 millimeters)
resolution: 89x89 dots per inch
HTML tillåter inte längdmått som %, cm eller mm. För det måste du använda CSS eller eventuellt JavaScrip (men varför?!).Joel Höglund skrev:
Det där lät inte bara lite komiskt.. dessutom är det helt fel i informationen. Visst kan du ändra storlek på en bild med CSS men är absolut inget krav. Och vem använder browsers som inte hanterar HTML? Det är ju programmets huvuduppgift
Att tvinga en bild att visas i olika pixelstorlekar har fungerat minst sedan 1996 då jag började koda HTML. Dock ska man (som någon påpekade) ha i åtanke att det inte ser så snyggt ut rent kvalitetsmässigt.
Och ja det går att, med t ex javascript, ta reda på vilken upplösning surfaren använder men tänk på att surfaren inte nödvändigtvis använder hela skärmen för browsern utan kan ha andra program öppna som MSN eller ICQ.
640 i bredd låter lagom för webb.. även 1024 om man struntar i modemanvändarna.
Det stämmer visst att OS använder DDC informationen för att ta reda på skärmens fysiska storlek och kan därför beräkna rätt längder för CM och DPI/PPI.
screen #0:
dimentions: 1152x864 (379x247 millimeters)
resolution: 89x89 dots per inch
ErikGustavsson
Aktiv medlem
Fel av mig.. den konverterar ju inte alls bilden, däremot BÖR man konvertera bilden själv till sRGB innan då det verkar som att MSIE t.ex inte kan visa Adobe RGB.
Iallafall så har jag haft problem med att bilder blivit mörka och "dassiga" efter att ha sparat dem för webben. Med en konvertering till sRGB innan behålls färgmättnaden i bilden i högre utsträckning.
Har nog varit pappaledig för länge nu...
/E
Iallafall så har jag haft problem med att bilder blivit mörka och "dassiga" efter att ha sparat dem för webben. Med en konvertering till sRGB innan behålls färgmättnaden i bilden i högre utsträckning.
Har nog varit pappaledig för länge nu...
/E
joppis
Aktiv medlem
Re: Re: Re: Re: Re: Re: Re: helt enkelt?
Sedan när fungerade det inte att ändra en bilds storlek i % med ren HTML? Hur menar du egentligen? Det där med cm och mm stämmer ju givetvis. Men det känns lite onödigt att hantera bilder för webben på det sättet. Det enklaste är ju att jobba med bildens pixlar och skärmens pixlar. Både dessa går att ta reda på med javascript "on the fly". Vad browsern sedan använder för API mot OS är ointressant på denna nivå.
Vi är redan ute och svävar i en aning för tekniska lösningar om man återgår till själva huvudfrågan.
Sedan när fungerade det inte att ändra en bilds storlek i % med ren HTML? Hur menar du egentligen? Det där med cm och mm stämmer ju givetvis. Men det känns lite onödigt att hantera bilder för webben på det sättet. Det enklaste är ju att jobba med bildens pixlar och skärmens pixlar. Både dessa går att ta reda på med javascript "on the fly". Vad browsern sedan använder för API mot OS är ointressant på denna nivå.
Vi är redan ute och svävar i en aning för tekniska lösningar om man återgår till själva huvudfrågan.
andewid
Aktiv medlem
Re: Re: Re: Re: Re: Re: Re: Re: helt enkelt?
Jo, mitt misstag. Det går i HTML att ange % eller pixlar för width/height för bilder. Men inte cm, mm, em, pt eller liknande.
Det är inte så dumt att kunna ange en bild i relativ storlek till tex texten. Om besökaren vill ändra på typsnittet så kommer bilderna att anpassas efter det. Eller tex hela sidan kan anpassas i storlek.
Med vektorgrafik så påverkas kvaliteten inte heller =). Fast det stöds inte av IE ännu utan plugins.
Jo, mitt misstag. Det går i HTML att ange % eller pixlar för width/height för bilder. Men inte cm, mm, em, pt eller liknande.
Det är inte så dumt att kunna ange en bild i relativ storlek till tex texten. Om besökaren vill ändra på typsnittet så kommer bilderna att anpassas efter det. Eller tex hela sidan kan anpassas i storlek.
Med vektorgrafik så påverkas kvaliteten inte heller =). Fast det stöds inte av IE ännu utan plugins.
Director
Aktiv medlem
Dpi och ppi
Dpi (dots per inch) beskriver upplösningen på en skrivare eller fotosättare, medan ppi (pixels per inch) beskriver hur många pixlar en bild är uppbyggd av.
Dpi beskriver också upplösningen på en bildskärm. Nya bildskärmar har en upplösning på 96 dpi, medan en del gamla bara har 72 dpi. Överskrider man dessa värden så blir bildvisningen onödigt tung, men bilderna ser inte bättre ut på skärmen. Det är däremot stor skillnad med bilder för tryck där upplösningen på bilderna behöver vara väsentligt mycket högre.
En bild med 300 ppi har en mycket större pixeltäthet än en bild med 72-96 ppi och ger enormt mycket större filer.
Dpi (dots per inch) beskriver upplösningen på en skrivare eller fotosättare, medan ppi (pixels per inch) beskriver hur många pixlar en bild är uppbyggd av.
Dpi beskriver också upplösningen på en bildskärm. Nya bildskärmar har en upplösning på 96 dpi, medan en del gamla bara har 72 dpi. Överskrider man dessa värden så blir bildvisningen onödigt tung, men bilderna ser inte bättre ut på skärmen. Det är däremot stor skillnad med bilder för tryck där upplösningen på bilderna behöver vara väsentligt mycket högre.
En bild med 300 ppi har en mycket större pixeltäthet än en bild med 72-96 ppi och ger enormt mycket större filer.
ErikGustavsson
Aktiv medlem
Helt fel faktiskt
En bild med storleken 4x4 pixlar och pixeltätheten 2000 dpi/ppi är ingalunda större i kilobyte räknat, eller dimensionellt på en given skärm visad i 100% än en bild på 4x4 pixlar och 4 ppi. pixeltätheten spelar endast roll när du ska ta ut bilden utanför något elektroniskt medium, som tex på papper via en skrivare eller offsetpress. I datorn är en pixel en pixel, och det är skärmens upplösning som avgör om du ser pixelmosaiken (låg upplösning) eller om bilden upplevs mer som ett fotografi (hög upplösning).
Om jag mailar en jpeg 640x480pixlar, eller lägger ut den på nätet spelar dpi-talet ingen som helst roll så länge slutanvändaren inte tänkt skriva ut den från något program som hanterar "dpi-taggen", där då dpi-talet kommer att styra utskriftsstorleken, dvs hur många cm bred och hög bilden blir..
/E
En bild med storleken 4x4 pixlar och pixeltätheten 2000 dpi/ppi är ingalunda större i kilobyte räknat, eller dimensionellt på en given skärm visad i 100% än en bild på 4x4 pixlar och 4 ppi. pixeltätheten spelar endast roll när du ska ta ut bilden utanför något elektroniskt medium, som tex på papper via en skrivare eller offsetpress. I datorn är en pixel en pixel, och det är skärmens upplösning som avgör om du ser pixelmosaiken (låg upplösning) eller om bilden upplevs mer som ett fotografi (hög upplösning).
Om jag mailar en jpeg 640x480pixlar, eller lägger ut den på nätet spelar dpi-talet ingen som helst roll så länge slutanvändaren inte tänkt skriva ut den från något program som hanterar "dpi-taggen", där då dpi-talet kommer att styra utskriftsstorleken, dvs hur många cm bred och hög bilden blir..
/E
Director
Aktiv medlem
Sorry, men nu är du ute och cyklar. Öppna ett foto i Photoshop. Som exempel har jag en bild som jag nu tog in i Photoshop med formatet 17,99 x 13,02 cm. Om jag spar den i 72 ppi upplösning så får den pixelantalet 510 x 369 och tar upp 111 kb (112 på disk). När jag ökar upplösningen på samma bild (17,99 x 13,02 cm) till 300 ppi så ökar pixelantalet till 2125 x 1538 och den tar upp hela 958 kb (960 på disk). Det är en enorm skillnad! Och det tar längre tid att ladda in en bild i datorns RAM-minne ju fler kb den är på.
ErikGustavsson
Aktiv medlem
Jo, men då har du ju storleksförändrat bilden. När du förstorar bilden lägger du till pixlar som inte fanns från början. Om du förminskar bilden tar du bort pixlar som du aldrig kan få igen sedan.
Däremot kan du ju ändra dpi-talet i photoshop utan att storleken i pixlar förändras, då kommer du se att utskriftsstorleken ändras. Dock kommer bilden vara lika stor i kilobyte räknat.
Själva pixeltätheten har inget med storlek att göra, det är ju antalet pixlar som ger bildens storlek på datorn (skärm och hårddisk) och antalet pixlar kombinerat med pixeltäthet som ger utskriftsstorleken.
/E
Däremot kan du ju ändra dpi-talet i photoshop utan att storleken i pixlar förändras, då kommer du se att utskriftsstorleken ändras. Dock kommer bilden vara lika stor i kilobyte räknat.
Själva pixeltätheten har inget med storlek att göra, det är ju antalet pixlar som ger bildens storlek på datorn (skärm och hårddisk) och antalet pixlar kombinerat med pixeltäthet som ger utskriftsstorleken.
/E
Director
Aktiv medlem
Det har du rätt i, men jämförelsen jag gjorde var mellan bildskärmsvisning och tryck eftersom jag förklarade varför det räcker med att använda 72 eller 96 ppi på bilder för bildskärmsvisning. Det finns ju över huvud taget ingen anledning att öka pixeltätheten i en bild till mer än max 96 ppi om den bara ska visas på bildskärm. Det jag ville visa på är skillnaden mellan ppi och dpi som många blandar ihop och tror är samma sak.
