Kom ihåg mig?

Högupplösta Retinaanpassade bilder som straffas av Google

Ämnesverktyg Visningsalternativ
Oläst 2018-06-24, 08:34 #1
Matsaki Matsaki är inte uppkopplad
Medlem
 
Reg.datum: Apr 2004
Inlägg: 240
Matsaki Matsaki är inte uppkopplad
Medlem
 
Reg.datum: Apr 2004
Inlägg: 240
Standard Högupplösta Retinaanpassade bilder som straffas av Google

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?
Matsaki är inte uppkopplad   Svara med citatSvara med citat
Oläst 2018-06-24, 14:46 #2
CotopaXi CotopaXi är inte uppkopplad
Flitig postare
 
Reg.datum: Nov 2004
Inlägg: 321
CotopaXi CotopaXi är inte uppkopplad
Flitig postare
 
Reg.datum: Nov 2004
Inlägg: 321
Vad är det för script?

Använd https://caniuse.com/#search=srcset
CotopaXi är inte uppkopplad   Svara med citatSvara med citat
Oläst 2018-10-04, 22:57 #3
kw_wasabis avatar
kw_wasabi kw_wasabi är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Feb 2008
Inlägg: 2 134
kw_wasabi kw_wasabi är inte uppkopplad
Klarade millennium-buggen
kw_wasabis avatar
 
Reg.datum: Feb 2008
Inlägg: 2 134
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
Citat:
<img src="bild-1200px.jpg" class="desktop">
<img src="bild-600px.jpg" class="mobile">
CSS
Citat:
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;}
}
kw_wasabi är inte uppkopplad   Svara med citatSvara med citat
Oläst 2018-10-05, 04:30 #4
Axel Hanssons avatar
Axel Hansson Axel Hansson är inte uppkopplad
Medlem
 
Reg.datum: Jan 2016
Inlägg: 72
Axel Hansson Axel Hansson är inte uppkopplad
Medlem
Axel Hanssons avatar
 
Reg.datum: Jan 2016
Inlägg: 72
Citat:
Ursprungligen postat av kw_wasabi Visa inlägg
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.
Axel Hansson är inte uppkopplad   Svara med citatSvara med citat
Oläst 2018-10-05, 19:35 #5
Seoseon Seoseon är inte uppkopplad
Nykomling
 
Reg.datum: Nov 2015
Inlägg: 33
Seoseon Seoseon är inte uppkopplad
Nykomling
 
Reg.datum: Nov 2015
Inlägg: 33
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/
Seoseon är inte uppkopplad   Svara med citatSvara med citat
Oläst 2018-10-05, 21:19 #6
Kimppas avatar
Kimppa Kimppa är inte uppkopplad
Mycket flitig postare
 
Reg.datum: Jul 2010
Inlägg: 793
Kimppa Kimppa är inte uppkopplad
Mycket flitig postare
Kimppas avatar
 
Reg.datum: Jul 2010
Inlägg: 793
Citat:
Ursprungligen postat av Seoseon Visa inlägg
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!
Kimppa är inte uppkopplad   Svara med citatSvara med citat
Oläst 2018-10-06, 04:17 #7
kw_wasabis avatar
kw_wasabi kw_wasabi är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Feb 2008
Inlägg: 2 134
kw_wasabi kw_wasabi är inte uppkopplad
Klarade millennium-buggen
kw_wasabis avatar
 
Reg.datum: Feb 2008
Inlägg: 2 134
Citat:
Ursprungligen postat av Axel Hansson Visa inlägg
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! :-)
kw_wasabi är inte uppkopplad   Svara med citatSvara med citat
Svara


Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)
 
Ämnesverktyg
Visningsalternativ

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


Alla tider är GMT +2. Klockan är nu 13:14.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson
 
Copyright © 2017