Om bilder og bildekvalitet på blogg.no: Bilder med høy oppløsning

Det er mange som tror at kvaliteten på bildene man laster opp på blogg.no blir dårlig. Det stemmer ikke. Det er lenge siden blogg.no sluttet å komprimere bilder ved opplasting. Derimot er det mange som laster opp bildene "feil", eller selv gjør bildene uskarpe i bloggen sin etter opplastingen.
 

LES OGSÅ: BLIR BILDENE DINE DRATT I HØYDEN ELLER BREDDEN?
 

Her ser du to bilder. Det er akkurat det samme originalbildet lastet opp på to forskjellige steder. Det ene er lastet opp via ftp til et eksternt webhotell, og det andre ligger i bildearkivet mitt i blogsoft. Oppløsningen er på 2000x1339px. Ser du noen forskjell på kvaliteten? Hvilket av disse to bildene tror du ligger på blogg.no og hvilket tror du ligger på den eksterne webserveren?

Bilde 1

Bilde1 //Crestock


Bilde 2

Bilde2 //Crestock
 

 

Her er de samme to bildene skalert ned til 480 pixler og satt ved siden av hverandre

Bilde3 //Crestock Bilde4 //Crestock

 

 

Ser du forskjell på kvaliteten på bildene? Hvilket av disse to bildene tror du ligger på blogg.no og hvilket bilde tror du ligger på en ekstern server? Du kan sjekke svaret ved å høyreklikke på bildet og finne bildeadressen...

Nederst i innlegget kan du se sammenligning mellom flere oppløsninger.

 

 

Her får du en enkel forklaring på hvordan du bevarer bildekvaliteten når du laster opp bilder til bloggen din

  • Velg bildet du vil bruke. Pass på at det er riktig størrelse eller større enn det du vil at det skal vises som i bloggen. Man skal aldri skalere opp bilder, da blir de uskarpe. Opplasteren på blogg.no vil heller aldri skalere et bilde oppover.
  • Når du laster opp bilder velger du den størrelsen som er lik eller minst ett hakk over bredden på bloggen din. For eksempel, dersom plassen du har til rådighet i innlegget er 750 pixler velger du 800 pixler eller større når du laster opp bildet. Vil du være sikker på at bildene er store nok også dersom du senere bytter design kan du velge max størrelse på alle bildene, 2000px.



     
  • Ikke last bildene rett inn i innlegget. Last dem først opp til arkivet og sett dem inn derfra i stedet. Da kan du velge størrelse pr. bilde.



     
  • Ikke justér størrelsen på et bilde manuelt ved å dra det større eller mindre. Gjør du det vil det bli satt en fast bredde og høyde på bildet, og det vil se strukket/klemt ut i mobilvisning der bredden (men ikke høyden) tilpasses automatisk. Vil du at et bilde skal ha en annen størrelse i bloggen enn den størrelsen du lastet opp bildet i kan du sette det inn i riktig størrelse fra arkivet etterpå.

 

 

Retinaskjermer - kort forklart

Retina display er Apples benevnelse på "skjermoppløsninger med så høy pikseltetthet at det menneskelige øye ikke greier å skjelne pikslene fra hverandre på det som anses som ordinær betraktningsavstand for den aktuelle enheten". Eller for å si det på en annen måte, retinaskjermer er en egen Apple-greie som pakker flere pixler inn på samme område.

Vil du at dine bilder skal se ekstra ekstra bra ut for dem som sitter på en slik skjerm må du altså laste opp ekstra ekstra store bilder selv om du bare har tenkt å vise dem i en fjerdedel av størrelsen i bloggen. Jo større et bilde er jo tyngre er det å laste, så det blir opp til deg selv om du vil poste bilder som blir ekstra fine for de få med retinaskjerm eller om du heller vil ta hensyn til lesere som ikke har retinaskjerm og kanskje interesserer seg mer for hvor lang tid det tar å laste ned innholdet i bloggen din.

Her er et eksempel. De samme to bildene skalert ned til 480 pixler og satt ved siden av hverandre, men det ene er nå 3872px × 2592px originalt, altså nesten dobbelt så stort som det andre, og det er også dobbelt så stort, 5,56MB i filstørrelse.

Bilde5 //Crestock Bilde6 //Crestock

 

Kan du se hvilket som er "tilpasset" retina og hvilket som er det samme bildet som i teksten lengre opp?

 

 

Ha følgende regnestykke i bakhodet:

Et bilde på ca 2000x1400 pixler vil ha en filstørrelse på ca. 2MB. Jo større bilder du bruker jo mer må leserne dine laste ned. Laster du opp et bilde på 2000px og nettleseren skalerer det ned til f.eks. 800px for å passe bredden i bloggen din er det likevel den samme filen.

Har du gjennomsnittlig 2 slike bilder pr innlegg, og 20 innlegg på forsiden av bloggen din, må leserene dine laste ned 80MB hver gang hun eller han besøker forsiden din. NB! Har du "Vis flere"-funksjon som henter fram for eksempel 300 innlegg må leseren laste ned alle 300 innleggene, også de som er skjult til å begynne med.

1024MB = 1GB

Grovt regnet og teoretisk sett betyr det at med et mobilabonnement med 1GB/mnd i datatrafikk kan man besøke 10-15 slike bloggforsider (det er vel sånn ca. en busstur...) og så har man brukt opp kvoten... og med et abonnement som har 5GB/mnd kan man da besøke 50-70 slike bloggforsider, og så har man brukt opp kvoten.

Nå er det riktignok ikke så ofte man bruker så store bilder til vanlig. Innlegget du leser nå er hele 11,7MB helt alene fordi de store bildene tilsammen gir 10,4MB.
Jeg testet også tre random blogger fra Topp20 og de viste henholdsvis 30MB, 55MB og 70MB på sine bloggforsider.

WiFi FTW!

 

 

Brede bilder

Dersom du sliter med at bildene du legger i bloggen er for brede for innlegget, og kuttes i bredden kan du prøve å legge denne kodesnutten inn i stilsettet ditt. Den gjør at nettleseren til den som besøker bloggen automatisk skalerer bildet ned til den faktiske bredden på innlegget.

.entry * img {
max-width:100%;
}
 

 

Her kan du sammenligne bildekvaliteter og størrelser. Hold musa over bildet for å se hva som er hva.

Dette er de samme 6 bildene vist to ganger. Først skalert ned til 480px og deretter i full innleggsbredde (unntatt det siste som bare er 500px og som jeg sa tidligerere skalerer man aldri et bilde oppover)

//Crestock //Crestock

 

 

//Crestock //Crestock

 

 

//Crestock //Crestock

 

 

//Crestock

//Crestock

//Crestock

//Crestock

//Crestock

//Crestock

 

 

Om du ikke ser noen som helst forskjell på bildene over... fortvil ikke. Det betyr bare at du har en helt vanlig skjerm, med en helt vanlig oppløsning og at du sitter akkurat passe langt fra skjermen når du leser. Den viktigste forskjellen på bildene over er filstørrelsen.

 

13

Takk for gode tips! :-)

Kanon bra'e tips😙

Nyttig, takk. Skulle følgt deg, men fant ikke følge "knappen"

Elise Bye: Følgeknappen ligger i profilen, som du kommer til om du trykker på profilbildet eller "Følg bloggen" i venstre sidemeny. :)

Jeg får ikke rotert bildene mine til rett vinkel sånn som jeg ønsker de. hvordan gjør jeg dette ? bilde mitt blir sånn at man må bikke på hodet for å se hva som er hva. Any help ? :)

Du kan rotere bildene på mobil eller PC før du laster dem opp. Opplasteren for flere bilder om gangen har egen roteringsfunksjon også.

Takk for tipsene. Var greit å vite

Hovdehurven

Spørsmål fra en skikkelig fersking....når jeg prøver å laste opp flere bilder får jeg beskjed om at det kan ikke gjøres uten "flash" når jeg prøver å laste ned flash får jeg beskjed om at jeg har det. Noen tips?

Hovdehurven: Sjekk at du har nyeste versjon, og at du installerer i riktig nettleser dersom du har flere.

Det er også slik at søkemotorer registrer hvor lang tid det tar for dine sider å laste. Hvis det går fort å laste, vil den få bedre søkescore og legges lengre fram i køen.

tusen takk kjekt å vite =)

Når jeg publiserer og legger ut nytt innlegg så forsvinner bildene mine vekk. Hjelp?.

Mathias Folke Nordby: Kontakt support.

Skriv en ny kommentar