[Matsaki]

Jag har ett dilemma och vet inte vilket ben jag ska stå på. Jag är IT ansvarig för några e-butiker och har lagt in script så vi kan lägga in Retina anpassade högupplösta bilder. Scriptet gör alltså att om besökaren har en högupplöst skärm så visas de högupplösta bilderna. Men har besökaren en "vanlig" skärm så visas den vanliga standarden på bilderna.

Allt fungerar bra förutom att Google och ser bilderna som stora och inte optimerade då de inte tar hänsyn till scriptet och därmed straffar butikerna.

Eftersom en del butiker har så många produkter så vore det bra om vi kunde börja ladda upp de nya produkterna redan nu i det högupplösta formatet.

Men vi vill ju inte bli straffade och frågan är ju om eller när Google kan läsa och acceptera ett sådant script?

[CotopaXi]

Vad är det för script?

Använd https://caniuse.com/#search=srcset

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

[Seoseon]

Sidorna borde inte straffas av Google även om bilderna är stora. Det är dock som sagt "srcset" som ska användas för detta. Det går till så här:

<img src="liten.jpg" srcset="medel.jpg 1000w, stor.jpg 2000w">

Du anger alltså vilken fil som ska laddas beroende på bredden (enhetens upplösning i pixlar).

Se även till att bildernas filstorlek är så liten som möjligt. Komprimera dem med t.ex. https://tinypng.com/

[Kimppa]

Ursprungligen postat av Seoseon

Sidorna borde inte straffas av Google även om bilderna är stora. Det är dock som sagt "srcset" som ska användas för detta. Det går till så här:

<img src="liten.jpg" srcset="medel.jpg 1000w, stor.jpg 2000w">

Du anger alltså vilken fil som ska laddas beroende på bredden (enhetens upplösning i pixlar).

Se även till att bildernas filstorlek är så liten som möjligt. Komprimera dem med t.ex. https://tinypng.com/

Tack för tipset!

[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! :-)