Avatar billede ps76 Forsker
21. oktober 2018 - 10:16 Der er 17 kommentarer

Billedstørrelse

Jeg har en hjemmeside - www.granvista.dk - som efter 10+ år trænger til en update. Den skal gøres "responsive", så den også kan vises på Ipad, smartphones mm også - og billederne skal fornyes.
Mit spørgsmål i første omgang er: Hvor store skal billederne være nu til dag? For 10 år siden måtte de endelig ikke være for store, fordi det ville tage for lang tid at åbne dem for gæsterne - men hvad med i dag..hvad bør være minimum størrelse?
Avatar billede mort1 Ekspert
21. oktober 2018 - 10:47 #1
Det handler i dag, som den gang om at billedfilerne er mindst mulige, faktisk tror jeg, at det i dag måske er endnu vigtigere at billeder loades hurtigt, hvis man vil fastholde kiggeren. Som minimum kan du f.eks. formindske dine billeder med tinnyPNG som  findes i en gratisudgave der klarer op til 20 billeder ad gangen. https://tinypng.com/
Avatar billede keysersoze Guru
21. oktober 2018 - 10:51 #2
De præcis samme ting gælder i dag som den gang - få minimeret alt så meget som muligt, det gælder ikke kun billeder men også scripts, styling og antallet af filer. For billeder gælder det om at finde en balance mellem kvalitet og størrelse - lige nu fylder din forside alene over 16MB hvilket er helt ekstremt, det værste er 4 billeder, der ikke alene i MB er alt alt for store men også i px for vises et billede ikke større end 800px på hjemmesiden er der ingen grund til at lægge et billede på 4470px op.

Når det kommer til scripts og styling er det selvfølgelig udviklerens opgave - når det kommer til billeder og er redaktøren ikke en haj til billedbehandling kan man lade serveren stå for at tilpasse billederne.
Avatar billede claes57 Ekspert
21. oktober 2018 - 10:59 #3
udover billeder, så kig på https://sitemagic.org/
det er lille, responsive, og du kan let overføre dine sider til det.
Så er det gratis, danskudviklet, og klarer sig uden database, hvis du vil det.
Kan fx integrere google maps, så folk kan finde huset ;)
Avatar billede claes57 Ekspert
21. oktober 2018 - 11:07 #4
sider med billeder har typisk en oversigt-side med thumbnails, som hver linker til den store version (minimum 1280×720 px, helst full-hd)
Er man på det store billede, bør man også kunne bladre højre/venstre for at se næste/forrige. Så virker det som på fx boligsider, og folk (altså mig) er vænnet til den form. De store billeder er typisk i et fuldskærm vindue, og der er et kryds, hvor man kan lukke om komme tilbage til siden, man kom fra.
Avatar billede ps76 Forsker
21. oktober 2018 - 14:07 #5
ok, tak for kommentarer og forslag. Vil kigge på de angivne links. Men ok, mindst mulige filstørrelse, forstår jeg, for hurtig visning. Taler vi optimalt omkring f.eks. 50 kb eller mindre - og går det ikke ud over den fysiske størrelse på skærmen, altså længde x bredde? Kan man godt lægge et billede ind i måske 50 kb - og så få det til at fylde (næsten) hele skærmen, hvis det nu er det man ønsker? Det kan selvfølgelig gøres via thumbnails, og det har jeg også noget software som tilbyder, og vil benytte når der er mange billeder - f.eks. "se billeder fra stranden" - men enkelte billeder ønsker jeg også skal fylde hele skærmen, (som eks. hos det foreslåede https://sitemagic.org/)..bare til en start, når folk går ind første gang på hjemmesiden, hvor min nuværende startside jo kun fylder en del af skærmen. Altså et stort "åbningsbillede" som eyeopener, for så at lede folk videre derfra...
Avatar billede claes57 Ekspert
21. oktober 2018 - 14:19 #6
Startbilleder osv skal være i høj opløsning, så det også ser godt ud på skærme. Man skal bare ikke have 10 af dem på en side.
Avatar billede ps76 Forsker
21. oktober 2018 - 14:24 #7
..ok jeg kan se at det foreslåede https://tinypng.com/ laver f.eks. et 5 mb billede om til ca. 750 kb. Det er måske i det nabolag, det bør ligge? Jeg har også noget software, som kan lave dem væsentlig mindre ("Pixresizer"), men det går måske ud over kvaliteten så.
Avatar billede claes57 Ekspert
21. oktober 2018 - 14:43 #8
tinypng er valget, god kvalitet og hurtig load af sider
Avatar billede keysersoze Guru
21. oktober 2018 - 14:48 #9
750 synes jeg stadig lyder af rigtig meget - om ~100 eller ~200 er det rigtige er svært at sige da det afhænger af mange ting i billedet. Det her, soze . dk / slet.jpg (lav det selv om til et link ved at fjerne mellemrum, er dit billede på 7,75MB lavet om til den størrelse du reelt benytter på siden i minimalt ringere kvalitet og det fylder under 90kb. Jeg kan se meget lidt forskel i forhold til det originale - og er kvaliteten super vigtig vil bare resizen kunne få billede ned på 250kb. Endelig kunne man også overveje at servere forskellige billeder afhængig af om man sidder på mobil eller desktop - og benytter man den høje kvalitet kunne man evt overveje noget lazyload.
Avatar billede ps76 Forsker
21. oktober 2018 - 17:19 #10
Man kan jo tilsyneladende ikke vælge størrelse man ønsker, på tinypng. Jeg prøvede lige igen med et foto på 2,3 mb. Det kom ud som 394 kb.
Avatar billede ps76 Forsker
21. oktober 2018 - 17:22 #11
Men det korte af det lange - hvis jeg har forstået det ret - er at vælge de billeder, som har største filstørrelse, og så reducere disse. I modsætning til at vælge nogle, som er taget med et mindre kamera og som udgangspunkt har en mindre filstørrelse (f.eks. fra smartphones). Hellere en stor fil - og så reducere noget mere, korrekt?
Avatar billede keysersoze Guru
21. oktober 2018 - 17:37 #12
Jeg tvivler på at du finder mange bare en smule nutidige kameraer/mobiler med en billedstørrelse, målt i px, der ikke vil kunne fungere på en standard webside i dag - men et stort billede tillader selvfølgelig fx noget beskæring et mindre ikke gør.
Avatar billede wjens Guru
22. oktober 2018 - 10:26 #13
Mit bud: du skal lave billeder, der viser det du vil vise på relativt stor skærm. En responsive hjemmeside tilpasser sig jo - det er hele ideen med det. Store billeder bliver behandlet på serveren, så du får en mindre udgave ud over nettet hvis du tilgår fra en lille enhed. Fonte og opsætning ændres også afhængigt af modtageren.
Avatar billede ps76 Forsker
22. oktober 2018 - 20:45 #14
Ja tak. Jeg har nu uploadet en test af den nye hjemmeside. Skal så bare finde ud af at gøre den responsive. I kan se den her - og gerne kommentarer, hvis noget er helt galt: www.granvista.dk/webtest
De fleste billeder lagt ind er reduceret som foreslået, ved hjælp af "tinypng", bare ikke åbningsbilledet, som jeg gerne vil have så stort og flot som muligt, som en første eye-opener.
Avatar billede ps76 Forsker
22. oktober 2018 - 20:59 #15
Jeg har sat "breakpoints" til 320, 768 og 1280 px. Det synes at virke ok på min mindre bærbar - bortset fra at når man kører billedserien, så tilpasser de sig ikke helt til skærmen, hvorfor teksten nedenunder ikke ses, med mindre man scroller ned...?!
Avatar billede keysersoze Guru
23. oktober 2018 - 17:00 #16
Skyldes det ikke mere alt dit js-animation? Prøv at få det til at se ud som ønsket inden du blandet js ind over.
Avatar billede wjens Guru
23. oktober 2018 - 17:20 #17
Brug Googles testværktøj i Chrome til at teste visningen ved at simulere alle mulige enheder.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester