Stängt för kommentarer

Vilken webbläsare använder du?

Av Sören Lindqvist

Jag för­står webb­de­sig­ners fru­stra­tion över de olika webb­lä­sarna och hur de ren­de­rar text och bild olika. Inter­net Explo­rer har ald­rig rik­tigt varit favo­ri­ten hos desig­ners och det finns myc­ket att läsa om det på olika dis­kus­sions­si­dor. Trots det så har de flesta använ­dare just Inter­net Explo­rer, är det mest för att “det kom­mer med i pake­tet” eller ingen har lust—ork eller vet om andra webb­lä­sare… sva­ren lig­ger nog i båda.

Per­son­lig touch

Eftersom jag själv sit­ter just med design av webb­sida med för­sök att få en sida som är både lätt­läst, trev­lig, och prak­tisk med en “per­son­lig touch” går det tim­mar och åter tim­mar. Typ­snitt är en av de vik­ti­gaste pus­sel­bi­tarna och man blir ganska fru­stre­rad när det inte fun­ge­rar över alla webb­lä­sare. Jag spen­de­rade nyli­gen mas­sor av tid att hitta en efter­trä­dare till de bild–anfanger vi använt tidi­gare. När jag väl fick till en “trev­lig” upp­sätt­ning i Apples Safari läsare (som jag använ­der för­u­tom Fire­fox) så blev det hel­to­kigt i Inter­net Explo­rer och Fire­Fox, hur myc­ket jag än för­sökte lyc­ka­des det inte bli bra i alla läsare… till slut var man tvungen att ge upp.

Typ­snitt i olika webbläsare

Det finns ett antal typ­snitt som är “stan­dard — rekom­men­de­rade” för alla webb­lä­sare men man vill för­söka komma utan­för den ramen med andra typ­snitt och ny tek­nik för att få just en liten mer per­son­lig prä­gel. Tek­ni­ken är inte fullt framme än men det bru­kar fun­ge­rar i det flesta webb­lä­sare. Bröd­tex­ten jag använ­der idag (Myriad Pro) ser rik­tigt bra ut (hos mig) och fun­ge­rar även i små stor­le­kar där den är lätt­läst. Men här spö­kar det med Inter­net Explo­rer, tex­ten blir “fet” och tap­par lite den käns­lan man vill få jäm­fört med övriga läsare. Ett annat pro­blem är även alla olika upp­lös­ningar som finns idag på använ­dar­nas bild­skär­mar. Vissa upp­lös­ningar ren­de­rar text sämre än andra och det finns de per­so­ner som bara köper en bild­skärm där upp­lös­ningen kontra skärm­stor­lek ren­de­rar text på bästa sätt. Nu kan man inte göra något åt använ­dar­nas skär­mupp­lös­ning, det finns vis­ser­li­gen tek­nik som kan läsa av skär­mupp­lös­ning men det blir väl­digt avan­ce­rat om man ska ta hän­syn till det när webb­si­dan ska visas och fram­förallt pre­standa kan bli lidande. Det jag kan före­språka är att testa gärna Safari eller Fire­fox som rekom­men­de­ras av många och är den näst största efter Inter­net Explo­rer. Du kan få mer infor­ma­tion om webb­lä­sare på denna sidan från Wiki­pe­dia jäm­fö­relse mel­lan webbläsare

Webb­lä­sare och färghantering

ProPhoto embedded

Om man för muspe­ka­ren över bil­den byts bil­dens inbäd­dade pro­fil. Båda filer har en pro­fil inbäd­dad ProP­ho­toRGB i den ena och sRGB i den andra, det inne­bär att om du har en webb­lä­sare som har färg­han­te­ring akti­ve­rad så ska båda bil­der vara i stort sett iden­tiska. Det kan vari­era något om du har en har en bild­skärm med större färgrymd än sRGB, man ser det bäst i de färg­mät­tade röd–grön–blå. Skif­tar fär­gerna i toner och ljus­het då finns ingen färg­han­te­ring akti­ve­rad. Använ­der du en webb­lä­sare som Safari eller Fire­fox senaste ver­sion så är färg­han­te­ring akti­ve­rad. Det webb­lä­sa­ren gör är att hämta infor­ma­tio­nen från bild­fi­len och “map­par” den till bild­skär­men och dess pro­fil. Som sagt här har vi det igen… den vik­tiga biten när du arbe­tar med bild… kalibrera din bild­skärm. Orsa­ken till att många webb­lä­sare inte har färg­han­te­ring är att det för­säm­rar pre­standa. Alla vill ha den “snab­baste webb­lä­sa­ren” och då åker färg­han­te­ringen på stryk, för­u­tom det så har många använ­dare en fel­ak­tig pro­fil kopp­lat till sin bild­skärm och det kan göra det än värre. Men vi som arbe­tar med bild vill ha den möj­lig­he­ten där det nu är än vik­ti­gare eftersom fler och fler bild­skär­mar bör­jar närma sig den större färgrym­den Adobe RGB98. Angå­ende färg­han­te­ring finns det ett fåtal webb­lä­sare som fixar det… exem­pel­vis Safari och Fire­fox, Inter­net Explo­rer ver­sion 9 när den kom­mer ut kanske gör dem sällskap.

Bil­der utan inbäd­dad pro­fil och fär­ger ska­pade via Html och CSS

Hur tack­lar din webb­lä­sare det problemet?

Bild med sRGB inbäddad

CSS-​​Html objekt mot bild med sRGB inbäddad
Bild utan inbäddad profil

Bild med sRGB inbäddad

Bild utan pro­fil mot bild med sRGB inbäddad

Stan­dard

Alla gra­fiska objekt som inte har inbäd­dad pro­fil ska antas vara sRGB i webb­lä­sa­ren enligt “The World Wide Web Kon­sor­tium” (W3C). Respek­te­rar din webb­lä­sare det ska du inte kunna se en avgrän­sande kant mel­lan den övre och den undre bil­den, med andra ord fär­gerna kom­mer att vara lika.

Färg­han­te­ring en stan­dard på inter­net inom snar framtid?

En webb­lä­sare som inte har färg­han­te­ring igno­re­rar den inbäd­dade pro­fi­len och fel­ak­tigt appli­ce­rar sRGB till alla bil­derna oav­sett om bil­den inne­hål­ler pro­fil A eller B etc som i exemp­let med första bil­den. Nu är det så att webb­si­dor inne­hål­ler inte bara bil­der utan det finns text, bak­grun­der som också borde ha en mer för­ut­sä­gande färg­han­te­ring. Nu kanske man inte ska inbädda 3kb pro­fi­ler i bak­grun­der eller filer som kanske inte är mer än 1kb stora, där­för har W3C kon­sor­tium som regle­rar Webb stan­dards bestämt att alla gra­fiska objekt som inte har en inbäd­dad pro­fil ska antas som sRGB. Med andra ord ska webb­lä­sare ren­dera — mappa alla gra­fiska objekt till sRGB om de inte har en inbäd­dad pro­fil. Tyvärr gör inte alla webb­lä­sare det, exem­pel­vis Safari map­par alla gra­fiska objekt som inte har inbäd­dad pro­fil till skär­mens pro­fil istäl­let. Har man då en bild­skärm med stor färgrymd kan man få sig en stor över­rask­ning när man är ute på inter­netsi­dor där fär­ger kan få en väl­digt hög färg­mätt­nad än vad man varit van med tidi­gare. Safari tar hän­syn till inbäd­dade pro­fi­ler men det kan ”skita” sig när det gäl­ler bil­der som är “untag­ged”. Där­för är det vik­tigt att bil­den först är i sRGB om man nu ska ”skala bort” pro­fi­len innan pub­li­ce­ring, det för att minska even­tu­ella över­rask­ningar för internetbesökaren.


Finns det någon lös­ning på pro­ble­men idag?… Det gör det och den heter Fire­fox, men inte som stan­dard utan man måste gå in och ändra i kon­fi­gu­ra­tions­fi­len för att akti­vera full färg­han­te­ring. Det kom­mer vi berätta om mer i kom­mande inlägg :)

Hur stor är din bild­skärms färgrymd?

Färgskala i ProPhotoRGB

Färgskala i sRGB

Profil ProPhotoRGB

Profil sRGB

Bil­derna är delade på mit­ten med ProP­ho­toRGB (överst) och sRGB (underst) på båda

Ju större skill­nad man kan se mel­lan den övre och undre i båda exemp­len, desto större färgrymd kla­rar bild­skär­men av att visa mot sRGB färgrymd. Ser man ingen skill­nad då kla­rar inte bild­skär­men av att visa en större färgrymd än sRGB. Det här gäl­ler de webb­lä­sare som har färg­han­te­ring och med för­del har en kalibre­rad skärm. Prova med att använda Fire­fox och jäm­för med Inter­net Explo­rer eller annan webb­lä­sare som inte stöd­jer färg­han­te­ring så kom­mer ni se en stor skill­nad på de test­bil­der som finns på denna sida.

Taggat , ,