Utilizarea SRCSET cu Imagini și Imagini Reprezentative

Question

Utilizarea SRCSET cu Imagini și Imagini Reprezentative

27 dec. 2016, 18:19:00

Vizualizări: 944

Voturi: 1

Am încercat să fac să funcționeze SRCSET pentru încărcarea imaginilor pentru diferite dimensiuni de dispozitive.

După cum înțeleg eu, când lățimea dispozitivului sau a ferestrei se schimbă, SRCSET ar trebui să încarce DOAR URL-ul corespunzător dimensiunii.

Pot vedea URL-urile generate pentru fiecare imagine, precum și dimensiunile. Acestea sunt toate imagini reale și se leagă corect la dimensiunile potrivite:

URL-uri SRCSET generate de WordPress

Este minunat! Problema este că nu am reușit să demonstrez, pe niciun dispozitiv, că browserul încarcă altceva decât imaginea originală (cea mare). Cu alte cuvinte, că se întâmplă ceva cu celelalte dimensiuni optimizate pentru mobile. Dacă deschid sau salvez imaginea în cauză, este întotdeauna cea originală. Se pare că dimensiunile mai mici ale imaginii nu sunt utilizate deloc.

Deci: există o componentă Javascript, sau altfel de configurare care îmi scapă? Ceva de care să mă leg în WordPress? Folosesc o temă personalizată dar observ același lucru și cu TwentyFifteen. Trebuie să înregistrez ceva în fișierul functions? Scriu asta după multă cercetare și încă sunt complet încurcat ce pas îmi scapă.

TwoLunch

11

imagini mobil responsive retina

Comentarii

Puteți utiliza instrumentele pentru dezvoltatori din majoritatea browserelor moderne, fila Network, pentru a vedea ce resurse sunt încărcate.

cybmeta

27 dec. 2016 19:54:11

Folosesc instrumentele pentru dezvoltatori, toate arată doar imaginea originală încărcată, indiferent de lățimea dispozitivului, chiar și în Chrome Device Toolbar. În fila Network, singura resursă încărcată în cronologie este tot imaginea originală mare la toate dimensiunile. Am încercat și în Firefox. Nu există niciun moment în care se "schimbă" sau înlocuiește ceva. Aș putea înțelege că se întâmplă pe browserele desktop (care nu înregistrează o fereastră mai mică ca un viewport mai mic real), dar nu știu cum altfel să testez dacă acest lucru funcționează de fapt.

TwoLunch

29 dec. 2016 16:57:41

Toate răspunsurile la întrebare

JHoffmann 1.86K · Answer 1 · 2016-12-27T19:32:10Z

Browserele care înțeleg atributul srcset vor alege automat imaginea care corespunde între dimensiunile definite și spațiul disponibil. Majoritatea browserelor moderne suportă această funcționalitate, iar browserele mai vechi, care încă sunt folosite, vor reveni la varianta implicită și vor folosi pur și simplu imaginea specificată în atributul src. Nu este nevoie de Javascript suplimentar pentru activare, prezența unui srcset corect este suficientă.

Dacă doriți să testați dacă atributele srcset funcționează așa cum vă așteptați, puteți folosi instrumentele de dezvoltare (afișate de obicei prin apăsarea tastei F12) din browser. Faceți fereastra browserului suficient de mică, astfel încât una dintre versiunile mai mici să fie încărcată. Deschideți fila Network din instrumentele de dezvoltare, apoi încărcați pagina. Acum veți vedea toate fișierele încărcate și puteți verifica care versiuni ale imaginilor au fost încărcate. Dacă acum redimensionați fereastra la o dimensiune mai mare, ar trebui să vedeți că imaginile mai mari se încarcă suplimentar.

O altă modalitate de a vizualiza care imagini sunt încărcate este înlocuirea versiunilor de dimensiuni cu imagini de conținut diferit direct prin FTP, astfel încât să puteți identifica cu ușurință care a fost încărcată.