Gjøre bilde raskere å laste ned

[Tonny Kluften]

Jeg klarer ikke å få dette bildet mindre enn 150kb samtidig som kvaliteten ikke skal forringes i forhold til slik det er nå. Hadde satt pris på tips om hvordan gjøre det mindre. http://www.mineoppskrifter.no/wp-content/themes/Food-Pro-1/images/header-oppskrifter.jpg

 

[Dag Frogner]

Når jeg laster det ned er det 52kB.

 

[Tonny Kluften]

Beklager, så feil på størrelse. Men spørsmålet er det samme. Går det an å gjøre mindre enn 52kb uten å miste kvalitet?

 

[TorsteinO]

en mulighet når du skal ha både fotorealistisk innhold og "tegnet" grafikk på samme område (f.ex. tomatene og salaten/grønnkålen, og stripene + logoen) på en nettside, og sliter med at det enten blir uskarpe detaljer på det tegnede, eller alt for tung fil, er å bruke to bilder oppå hverandre. Legg en jpg med det fotorealistiske i bakgrunnen, også legger du en delvis gjennomsiktig png med det "tegnede" innholdet oppå. Vips, så har du ja takk begge deler

 

[Dag Frogner]

Men går størrelsen ned pga det?

 

[TorsteinO]

kommer an på innholdet egentlig, noen ganger kan det hjelpe veldig, andre ganger ikke, men det er en mulighet

 

[allegretto]

Enig med Atomet, ville ikke ha lagt logo(png) og bakgrunn(fotorealistisk bilde) sammen. Bedre å splitt de opp i to grafikkfiler.

 

[hansson]

En gjennomsiktig 24-bits png av logoen blir sikkert ca. 50 k i seg selv, vil jeg tippe, så det er lite å spare. Jpg-en din er litt uskarp i utgangspunktet, så jeg ville tatt en unsharp mask/sharpen, redusert det filteret med f.eks. 50% (ctrl + shift + f) og deretter eksportert som jpg for web igjen. Ingen problemer å få den ned i 25-30k uten noe synlig lavere kvalitet. Når du skarper den opp først oppveier det kompresjonen.

 

[TorsteinO]

50kb for logoen? Tviler jeg på. En såpass enkel logo som 24-bits png med alpha pleier ikke å bli noe i nærheten av så mye.

(Derimot tror jeg villa ha droppa det stripegreiene helt i headeren...)

 

[enotodden]

Tror du burde kjøre audits i inspector (webkit.. Jeg brukte Chrome)..
Jeg kjørte det på rotdomenet og fikk opp mange optimaliseringsmuligheter.
Kommer nok noen tips der du kan benytte deg av i forhold til lastetid.

Utenom det er jo denne artikkel ofte et mini-oppslagsverk for meg. Som en liten handleliste.
Minimize payload size

 

[selbekk]

Et tips for å få siden din til å laste raskere generelt er å legge noen elementer (gjerne de "tyngre") på en egen server / annet (sub)domene. Såvidt jeg husker kan en gitt server bare svare på et visst antall http request av gangen, så det lages en slags kø. Om du har en egen server den kan hente bannerbildet ditt fra, går det fortere =)

Dessuten, med litt triksing i Photoshop, var det enkelt nok å få ned størrelsen. Her har du tre forskjellige alternativer:

Quality 30 - 25kb:

Quality 40 - 29kb:

Quality 50 - 37kb:

Original (Quality 60):

 

[Tonny Kluften]

Takk for det selbekk. Bruker din nye fil nå samt laster fra subdomene nå så får vi se om det har effekt over litt tid.

 

[Pong]

Cloud Tonny, cloud!
Jeg regner med at subdomenet ikke peker til samme server? Altså... da mener jeg metall og silikon og sånt..

 

[Tonny Kluften]

Cloud Tonny, cloud!
Jeg regner med at subdomenet ikke peker til samme server? Altså... da mener jeg metall og silikon og sånt..

Ehh... neida.. kremt...

 

[Tonny Kluften]

Men hva er poeng med å hente filene fra subdomene? Hvis filene ligger på en annen server er det vel bare å legge dem i et annets domenets undermappe?