[Danne Vendel]

Hej!

Ett elände med en enda webbplats om man vill ha bra responsiv design eftersom bl.a. bilder för stora skärmar ofta "väger" mycket, tar tid att ladda ner och kostar onödig bandbredd för mobilsurfare.

Just nu sitter jag med ett bildspel med ett dussin bilder som är 2048px breda för att inte se ut som skit på riktigt breda skärmar. Finns det något sätt att redan på servern skicka iväg mindre bilder när användaren har en skärm som är t.ex. 768px (bred) eller mindre?

Kan givetvis använda css för att VISA andra bilder, men de större laddas ju ner ändå....

Hur gör man?

Mvh
Danne

[Esuk]

Jag har lekt lite med Cloudinary och deras tjänst för att sköta det åt mig, de har en liten artikel i ämnet och även om du inte vill betala för deras tjänst är metoden något att bygga vidare på själv. http://cloudinary.com/blog/how_to_au...ponsive_design

[P.P]

Om du kör display: none; på bilden så laddas den fortfarande in men om du kör det på ett element som bilden ligger i så ska den inte laddas in. Om jag förstått det rätt iaf.

[Danne Vendel]

Ursprungligen postat av Esuk

Jag har lekt lite med Cloudinary och deras tjänst för att sköta det åt mig, de har en liten artikel i ämnet och även om du inte vill betala för deras tjänst är metoden något att bygga vidare på själv. http://cloudinary.com/blog/how_to_au...ponsive_design

Tack för tips!

Cloudinary funkar säkert, men då måste ju bilderna lagras på deras server och en begäran ska skickas från min server till deras som sedan ska skicka tillbaka rätt bild till min server som i sin tur ska leverera bilden till användaren. Eller nåt i den stilen.

Så tekniken är nog bra, men jag vill inte vara beroende av en extern tjänst och jag är rädd att det blir fördröjningar.

Blir nog att jag helt enkelt får göra två versioner av webbplatsen.

[Danne Vendel]

Ursprungligen postat av P.P

Om du kör display: none; på bilden så laddas den fortfarande in men om du kör det på ett element som bilden ligger i så ska den inte laddas in. Om jag förstått det rätt iaf.

Hmmm...låter ju inte helt fel. Om en div med en bild inuti har display:none så kanske inte webbläsaren bryr sig om att hämta bilden. Logiskt, men om det inte finns belägg för att det funkar i webbläsare för mobiler så vill jag inte chansa.

[allstars]

Man ska gärna leverera lämpliga bilder beroende på bandbredd, men det är svårt, så man får istället gå på skärmstorlek.

I .Net finns ImageResizer och till det använda SlimResponse / slimmage som automatiskt skalar om bilder beroende på skärmstorlek:
http://imageresizing.net/blog/2013/e...ponsive-images


Annan aspekt att tänka över vad gäller nedskalning är art direction: http://blog.cloudfour.com/a-framewor...ges-solutions/