[kw_wasabi]

Jag fixar detta i CSS, mest för att få ner laddningstiden i mobiler eftersom det inte finns någon anledning att ha bilder över 1000px för dessa besökare.

HTML

<img src="bild-1200px.jpg" class="desktop">
<img src="bild-600px.jpg" class="mobile">

CSS

img.desktop {visibility: hidden; display: none;}
img.mobile {visibility: visible; display: inline;}

@media only screen and (max-width: 520px) {
img.desktop {visibility: hidden; display: none;}
img.mobile {visibility: visible; display: inline;}
}

[Axel Hansson]

Ursprungligen postat av kw_wasabi

Jag fixar detta i CSS, mest för att få ner laddningstiden i mobiler eftersom det inte finns någon anledning att ha bilder över 1000px för dessa besökare.

HTML


CSS

Hej!

Detta är en dålig idé då alla bilder laddas in även om du "dolt" dem. Använd srcset som CotopaXi rekommenderar för sådant.

[kw_wasabi]

Ursprungligen postat av Axel Hansson

Hej!

Detta är en dålig idé då alla bilder laddas in även om du "dolt" dem. Använd srcset som CotopaXi rekommenderar för sådant.

Miss av mig som trodde att CSS:en gick före och blockade med display:none och visibility:hidden

Stort tack för uppmärksammandet av CotopaXis tips, men det var ju sådär tajmat att jag såg det så här dags. Vill fixa men måste sova! :-)