Am destul de multe întrebări, mulți dintre elevii mei întreabă dacă pot folosi noile formate SVG și WebP și unde este mai bine să aplicați aceste imagini. Desigur, puteți utiliza noi formate, doar că trebuie să înțelegeți ce format și ce este mai bine pentru el.
Imaginile ne-optimizate sunt unul dintre factorii care încetinesc site-ul, după cum indică serviciile de verificare.
De aceea, veți fi întotdeauna înainte de a alege ce format să selectați pentru imagine. Acest lucru va determina dimensiunea și calitatea acestuia. Și pentru a utiliza imagini de dimensiuni mai mici și fără a pierde calitatea, trebuie să știți câteva lucruri.
Ce imagini pentru site-urile pe care le folosesc astăzi
Toate imaginile pentru site-uri sunt împărțite în:
- raster (exemplu - JPG, JPEG, GIF, PNG);
- vector (exemplu - SVG).
Adică, pe măsură ce mărimea imaginii crește, există o pierdere de calitate.
Imaginile vectorilor constau din linii și puncte de parcurs. Informațiile despre imagine sunt stocate în instrucțiuni matematice pentru redare, ceea ce vă permite să scalați imaginile cât de mult doriți, fără a pierde calitatea.
Toate aceste imagini pot fi utilizate pe site-uri moderne. Doar trebuie să înțelegeți că înainte de a încărca pe site, imaginea trebuie optimizată!
Din descrierea acestor formate, veți înțelege unde și ce format să utilizați cel mai bine pe site.
JPEG sau JPG este unul dintre cele mai populare formate de imagine pentru site-uri web. Formatul acceptă milioane de culori, ceea ce îi conferă o poziție de lider în prezentarea fotografiilor și fotografiilor de pe site.
Imaginile în acest format sunt suficient de optimizate, fără aproape nici o pierdere de calitate, ceea ce vă permite să obțineți un fișier mai mic fără pierderi vizuale de calitate. Trebuie reținut faptul că fiecare optimizare ulterioară reduce calitatea.
Fișierele acestui format sunt acceptate de toate dispozitivele și browserele, ceea ce confirmă din nou popularitatea și permite să nu vă faceți griji cu privire la problemele legate de afișarea pe site-uri.
Un dezavantaj major al acestui format este lipsa de transparență. Adică nu puteți combina imaginile în acest format. Pentru astfel de sarcini, este mai bine să utilizați următorul format.
Acest format utilizează un algoritm de comprimare fără pierderi de calitate. Prin numărul de culori și nivelul de transparență este disponibil în două tipuri 8 și 24 de biți. Ambele susțin transparența.
8-biți nu este foarte popular, dar 24-bit este utilizat pe scară largă pentru diverse imagini de pe site-ul. Datorită transparenței, este posibilă crearea de imagini combinate. Adesea folosite pentru a crea butoane animate, icoane, sprite de css. unde efectul de transparență este necesar.
Imaginile în format PNG pot fi optimizate de multe ori, editate - vor păstra calitatea originală.
Formatul este, de asemenea, acceptat de toate browserele și dispozitivele, ceea ce garantează afișarea acestuia pe orice ecran.
Calitatea imaginii arată mai bine decât JPG, dar greutatea fișierului va fi mai mare. Acest lucru trebuie luat în considerare la plasarea fișierelor pe site.
Acesta este un format pe 8 biți care suportă 256 de culori, transparență și animație. Datorită suportului unui număr mic de culori, greutatea fișierului este, de asemenea, minimă.
Formatul nu este potrivit pentru fotografii și imagini cu o gamă largă de culori.
Dar este utilizat pe scară largă atunci când creați animații GIF. bannere, butoane, icoane și așa mai departe.
În site-urile moderne acest format este folosit din ce în ce mai puțin.
Apoi, să vorbim despre formatele relativ recente ale SVG și WebP, care nu sunt atât de populare, dar câștigă popularitate și sprijin și nu pot fi mai potrivite vitezei de încărcare și adaptabilității site-urilor.
Acesta este un format de fișier vectorial bazat pe XML. Formatul a început să câștige popularitate abia recent, deoarece anterior a fost slab susținut în browsere. Și din cauza problemelor legate de afișare, nimeni nu se grăbea să o folosească.
Până în prezent, SVG este susținută de toate browserele moderne. Dar problemele cu cartografiere sunt la fel.
Cel mai adesea, acest format este folosit pentru imagini simple, cum ar fi logo-uri, elemente de design și așa mai departe. Nu se aplică fotografiilor.
Formatul SVG este ușor, perfect redimensionat, oferind claritate imaginii pe orice rezoluție a ecranului, acceptă animație, poate fi controlat prin CSS și plasat în HTML, reducând numărul de cereri.
Formatul oferă o compresie excelentă și menține transparența. Acesta combină avantajele formatelor JPG și PNG fără a mări dimensiunea fișierului.
Dar, în ciuda avantajelor formatelor, nu este acceptat de toate browserele, de exemplu, IE, Edge, Firefox și Safari.
Există modalități de a ocoli aceste restricții, însă ele nu permit ca formatul să fie folosit peste tot.
concluzie
Prieteni, sper, au explicat totul în mod clar și acum știți ce formate de imagini este mai bine de utilizat pe site și de ce nu insist asupra utilizării unui format, dar vă recomand o abordare integrată.
Poate că, atunci când WebP va primi un sprijin larg, vom merge la el și vom înlocui jpg și png cu site-urile noastre.
Cu sinceritate, Maxim Zaitsev.
Maxim, acum a verificat site-ul dvs. și vă place, de asemenea, de la data există o redirecționare la pagina generală cu intrările. Din acest motiv, există multe pagini cu 301 redirecționări. Spune-mi că ai de gând să o rezolvi sau să o lași. Tocmai am primit un filtru de la Google și suspiciunile cad pe acest factor. Voi fi recunoscător pentru răspuns
Bună, Maxim. Nu, nu intenționez să fac nimic. În subiectul meu nu există nici o greșeală cu privire la acest lucru. Data duce la arhiva înregistrărilor pentru această zi. Aceasta nu este o redirecționare multiplă.
Max Maxim. A remarcat corect în articolul său că trebuie să acordați atenție vitezei de încărcare a imaginilor.
Cred că este necesar să adere la formatele clasice, astfel încât să existe o viteză decentă de descărcare a site-ului și afișarea "nu lame".
Wan, salut. Da, trebuie să observați echilibrul, astfel încât imaginile să pară frumoase și viteza să nu se limpezească.
Maxim, setați subiectul pentru cursul dvs.: Lightning, dar celălalt computer nu afișează corect textul, cum să îl repare și pe care dintre cele două computere este corect instalată.
Maxim, în plus. Am două site-uri cu o temă. Fulger. deci aici este o imagine incorectă a textului este pe un alt computer de pe ambele site-uri cu acest subiect, iar pe calculatorul care a creat aceste site-uri textul este afișat în mod normal ....
Vitaly, verificați setările browserului de pe aceste două calculatoare, browserul fiind responsabil de afișarea site-urilor. Aparent, pe unul din PC nu aveți fonturi sau alte setări ale browserului. Puteți ghici cât doriți. Trebuie să verificați setările.
Navigare după postări
Articole similare
Trimiteți-le prietenilor: