FAQ |
Kalender |
2016-03-31, 09:17 | #1 | |||
|
||||
Medlem
|
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 |
|||
Svara med citat |
2016-03-31, 11:05 | #2 | ||
|
|||
Nykomling
|
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
|
||
Svara med citat |
2016-03-31, 15:59 | #3 | ||
|
|||
Nykomling
|
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.
|
||
Svara med citat |
2016-03-31, 16:09 | #4 | |||
|
||||
Medlem
|
Citat:
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. |
|||
Svara med citat |
2016-03-31, 16:13 | #5 | |||
|
||||
Medlem
|
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.
|
|||
Svara med citat |
2016-03-31, 16:27 | #6 | ||
|
|||
Klarade millennium-buggen
|
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/ |
||
Svara med citat |
Svara |
|
|