Optimizați imaginile de pe web

LPgenerator - Pagina profesională de aterizare este o platformă pentru creșterea vânzărilor afacerii dvs.

COMERCIALIZAREA CURSULUI DE ACȚIUNI DIN PARTENERI

Optimizați imaginile de pe web

Începeți să utilizați SVG

SVG (din Scalable Vector Graphics) este un limbaj de marcare XML pentru stocarea imaginilor vectoriale. În loc de a folosi pixeli pentru a reprezenta datele de imagine (familiare mai mult ca un format JPEG, GIF și PNG), SVG utilizează un număr de elemente numite „vectori“, care sunt marcate pe grila de coordonare bidimensional. Majoritatea profesioniștilor creează grafice vectoriale în programul de desen vectorial Adobe Illustrator, dar instrumente de rețea gratuite precum Metoda Draw și Mondrian pot crea imagini SVG.

Optimizați imaginile de pe web

SVG sunt ideale pentru o rețea, deci au o rezoluție nelimitată și dimensiuni foarte mici ale fișierelor. Cu alte cuvinte, puteți crește la SVG orice doriți și va arăta mereu clar. Prin urmare, fișierele SVG reprezintă imagini ca o serie de coordonate care formează forme, nu date pixel. Aceste forme, la rândul lor, sunt proiectate automat într-o rețea fizică de pixeli, indiferent de rezoluția sa. Dacă optimizați imaginile cu instrumentul ca SVGO-GUI, dimensiunile fișierelor pot fi și mai mici.

Mai mult, SVG este bun pentru reprezentarea imaginilor grafice, dar asta nu înseamnă că SVG este bun la tot. Pentru imagini cum ar fi fotografii sau o lucrare de artă, trebuie să utilizați un format de fișier bazat pe un raster care utilizează pixeli. Cu toate acestea, mai întâi ar trebui să încercați să utilizați SVG pentru toate imaginile dvs. și numai în cazuri precum fotografii sau opere de artă puteți utiliza un format diferit.

După atâția ani de nepotrivire a browserului, a apărut în cele din urmă era SVG. Toate browserele moderne împreună cu IE9 + au suport pentru SVG. (sursa: caniuse.com). Cu toate acestea, trebuie să veniți cu o strategie de îmbunătățire progresivă dacă credeți că paginile dvs. nu vor funcționa pentru utilizatorii IE8.

Scalarea unei imagini bitmap

SVG - nu depinde de rezoluție, deci nu este nevoie să scalați imaginile. Cu toate acestea, formatele de fișiere bazate pe raster, cum ar fi JPEG și PNG, au rezoluție absolută în pixeli. Toți acești factori arată că, cu cât mai mulți pixeli, cu atât încărcarea paginii este mai mare.

Oricare ar fi rețeaua, nu se ocupă cu pixeli; este un fel de mediu fluid care arată diferit pe diferite ecrane. Uneori este necesar ca browserul să re-zoom, astfel încât să funcționeze într-un design receptiv. Cu toate acestea, dacă trimiteți mai multe date pixel decât există pe dispozitiv și imaginea se modifică proporțional, în cele din urmă se dovedește că rețeaua pierde în mod inutilizabil lățimea de bandă.

Trebuie să optimizați imaginile astfel încât acestea să nu fie mai mari decât cea mai mare rezoluție pe care pot fi afișate. Acesta este motivul principal pentru care SVG este atât de mare. Cu toate acestea, cel mai adesea considerăm monitoarele de aproximativ 27 '- 2560 × 1440 și mai jos.

Dar totuși avem modalități de indentare. Cel mai bine este să trimiteți pixeli numai la dispozitivele care le pot primi. Eforturile Grupului Comunitar de Imagini Responsive și Zurb Interchange ajută la promovarea în acest domeniu.

SVG este ideal pentru imagini realizate din părți mari și linii ascuțite, în timp ce JPEG este potrivit pentru fotografii și picturi. Dar, uneori, un obiect grafic poate să nu aibă o versiune SVG disponibilă și obiectele JPEG comprimate pot părea îngrozitoare în zonele de culoare plată și cu linii ascuțite. Puteți avea, de asemenea, o imagine bitmap cu unele zone transparente care trebuie să treacă strălucirea de fundal. În aceste cazuri, cel mai bun format este fișierul PNG, care poate fi în două versiuni - PNG-8 și PNG-24.

PNG-8 utilizează o paletă de culori adaptivă, în care sunt 256 de culori. Una dintre aceste culori poate fi pentru transparență, dar această transparență este dublă (pixelul este 100% transparent sau 100% opac). Aceasta înseamnă că orice tranziție între zone opace și transparente va fi extrem de ascuțită și fără gradare parțială. Dacă PNG-8 are pixeli externi care sunt în cea mai mare parte ușori și sunt plasați într-un fundal închis, marginile vor părea zgâriate. Marele plus este că dimensiunile fișierului tind să fie destul de rezonabile.

PNG-24 este capabil să funcționeze în transparență completă a cromului și alfa complet (pixelii pot fi parțial transparenți), rezultând o frumoasă transparență fină. Adesea, aceasta este singura modalitate de a oferi forme fotografice parțial transparente, cum ar fi, de exemplu, părul sau marginile neclară. Dezavantajul este că aceste imagini produc cele mai mari dimensiuni de fișiere ale oricărui format de imagine.

Utilizați animația GIF foarte puțin

Atunci când creați grafice raster pentru dispozitivele DPI cu ecrane ca "retina" Apple, de obicei, trebuie să furnizați imagini în dimensiuni de 2x sau 3x de dimensiuni normale. Acestea sunt dispozitive care au un număr mai mare de pixeli fizici pe ecran, comparativ cu "pixeli virtuali". Pe un iPhone modern, dacă se presupune că imaginea umple 200 px pe 200 px pe pagina de Internet, atunci ar trebui să puneți fișierul 400 px la 400 px. În caz contrar, imaginile vor părea neclare.

Descărcați corect JPEG

Imaginile JPEG sunt descărcate de obicei în partea de sus a imaginii și sunt vizualizate în jos. Cu toate acestea, ele pot fi descărcate într-o manieră "progresivă", atunci când o imagine neclară este încărcată pentru prima oară și apoi, treptat devine mai clară. Acest lucru nu va crește timpul de încărcare al paginii, dar va crește timpul de percepție de către ochi și va apărea că pagina web se încarcă mai repede. Ochiul uman se poate concentra pe o mică parte a ecranului o dată, completând astfel zonele cu picături mari de culoare și apoi o creștere treptată în definiția lor, de obicei, arata mai repede decât atunci când ne uităm la modul în care imaginea este încărcată de sus în jos.

ATENȚIE! Utilizați un browser Internet Explorer învechit

Acest site este construit pe tehnologii avansate și moderne și nu suportă versiunile 6 și 7 ale Internet Explorer.

Optimizați imaginile de pe web

Optimizați imaginile de pe web

Optimizați imaginile de pe web

Optimizați imaginile de pe web

Optimizați imaginile de pe web

Articole similare