Billedstørrelse

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/

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.

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 ;)

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.

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...

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.

..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å.

tinypng er valget, god kvalitet og hurtig load af sider

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.

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.

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?

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.

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.

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.

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...?!

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.

Brug Googles testværktøj i Chrome til at teste visningen ved at simulere alle mulige enheder.