Share
Atunci când dezvoltați sau actualizați un site web, unele dintre obiectivele dvs. principale ar trebui să fie oferirea unei experiențe optime pentru utilizatorii finali și îmbunătățirea conversiilor site-urilor web, deoarece aceste două aspecte sunt esențiale pentru creșterea veniturilor și îmbunătățirea liniei de bază a companiei dvs. Dar o problemă pe care o descoperiți este că, în timp ce utilizarea în creștere a imaginilor are ca rezultat un design mai atrăgător, ar putea afecta negativ performanța site-ului dvs..
Astăzi, imaginile reprezintă mai mult de 60% din conținutul descărcat dintr-o pagină web, astfel că optimizarea imaginilor poate aduce îmbunătățiri semnificative ale performanței. Totuși, optimizarea imaginii este atât o artă cât și o știință, necesitând o evaluare atentă a diverselor parametri și un echilibru delicat între conținut, format, calitate și dimensiuni.
Indiferent dacă aplicația dvs. web acceptă imagini încărcate de utilizatori, dacă furnizați imagini statice sau dacă afișați imagini de profil din rețelele sociale, probabil că este necesar să le manipulați pentru a se potrivi designului grafic al site-ului dvs. În acest tutorial, vom explora caracteristicile oferite de soluția globală de gestionare a imaginilor și video a Cloudinary. Veți vedea cum vă poate ajuta să optimizați imaginile și, în cele din urmă, să îmbunătățiți performanța site-ului dvs..
Formatele de imagine pot avea un impact semnificativ asupra timpilor de încărcare. Dar determinarea manuală a formatelor optime și setările encoderului pentru conținutul fiecărei imagini poate fi complexă și ineficientă.
Cloudinary determină dinamic și oferă fiecare imagine în cel mai eficient format, pe baza conținutului imaginii și vizualizării browserului. Imaginile pot fi încărcate în Cloudinary în diferite formate și ușor de convertit în alte formate. De exemplu, poate oferi automat imagini ca WebP în Chrome sau JPEG-XR în Internet Explorer. În unele cazuri, PNG poate fi selectat când trebuie să păstrați transparența.
Există multe motive pentru care doriți să modificați formatul imaginii livrate:
Pentru a trimite imagini într-un format diferit, specificați pur și simplu noul format ca extensie de fișier a adresei URL de livrare. Când utilizați seturile SDK Cloudinary, puteți specifica noul format ca extensie a numelui resursei sau utilizați parametrul format.
Exemplu:
Vedeți Demo-ul.
Reglați automat calitatea compresiei
Precizia exactă a calității comprimării și a setărilor de codare poate reduce semnificativ dimensiunile fișierelor fără degradarea vizibilă a calității vizuale. Găsirea setărilor potrivite pentru fiecare imagine, cu toate acestea, este mult mai complicată decât pare.
Cloudinary automatizează dimensiunea fișierului în raport cu decizia de compromis de calitate. Algoritmii inteligenți de calitate și de codificare a lui Cloudinary analizează fiecare imagine pentru a găsi echilibrul optim și a produce o imagine fină perceptuală în timp ce minimizează dimensiunea fișierului. Analizând fiecare imagine individual pentru a găsi nivelul optim de comprimare și setările de codare a imaginii permite ajustarea precisă a nivelului de comprimare completat de reglajul fin al setărilor de codificare și poate reduce semnificativ dimensiunea fișierului fără nici o degradare vizibilă asupra ochiului uman.
Exemplu:
 |  |
Vedeți Demo-ul.
Puteți vedea transformarea imaginii aici.
Furnizarea de imagini la dimensiuni mai mari decât dimensiunea dorită a afișajului utilizează lățime de bandă inutilă și încetinește încărcarea paginii. Dar crearea manuală a mai multor versiuni ale fiecărei imagini pentru a se potrivi diferitelor rezoluții ale ecranului poate fi intensivă. Cloudinary vă permite să dimensionați dinamic rezoluția imaginii pentru a servi versiunea optimă care se potrivește cu dimensiunile rezoluției dispozitivului și a dimensiunilor fiecărui utilizator, fără a furniza pixeli inutili.
În plus, imaginile necesită adesea decuparea pentru a se potrivi aspectului receptiv și dimensiunilor diferite ale dispozitivului. Algoritmul de recoltare în funcție de conținutul Cloudinary folosește o combinație de euristici pentru a detecta automat regiunea de interes în fiecare imagine și apoi a le recolta în zbor.
Aceste capabilități inteligente de recoltare asigură că focalizarea fiecărei imagini este inclusă în imaginea derivată rezultată, nu numai pentru fotografiile cu fețe, ci pentru orice tip de conținut. Fiecare imagine este analizată individual pentru a găsi regiunea optimă pentru a vă concentra.
Imaginea originală:
Exemplu de diferite moduri de cultură:
Vedeți Demo-ul.
Pentru a vedea imaginea prin adresa URL de transformare, vizualizați-o aici.
Cloudinary vă permite să vă transformați cu ușurință imaginile în zbor în orice format, stil și dimensiune necesare și, de asemenea, optimizează imaginile pentru a avea dimensiunea minimă a fișierului pentru o experiență îmbunătățită a utilizatorului și pentru a salva lățimea de bandă.
Soluția Cloudinary este abilitatea de a furniza imagini utilizând adrese URL dinamice printr-o rețea rapidă, de livrare a conținutului la nivel mondial (CDN). Adresa URL conține ID-ul public al imaginii solicitate, plus orice parametri opționali de transformare. ID-ul public este identificatorul unic al imaginii și este specificat fie când încărcați imaginea în contul dvs. Cloudinary, fie este alocat automat de Cloudinary.
Orice instrucțiuni de transformare (manipulare) pot fi adăugate înaintea codului public în adresa URL de livrare. Când adresa URL este accesată pentru prima oară, imaginea derivată este creată în zbor și livrată utilizatorului. Imaginea derivată este de asemenea stocată în cache pe CDN și este disponibilă imediat tuturor utilizatorilor care solicită aceeași imagine.
Aceste sfaturi sunt doar câteva modalități prin care Cloudinary vă poate ajuta să optimizați imaginile pentru site-ul dvs., pentru a îmbunătăți performanța și experiența utilizatorului final.
Site-ul Cloudinary oferă o documentație detaliată cu privire la modul în care funcționează aceste funcții. De asemenea, puteți găsi postări în blog care explică primele 10 greșeli pe care le puteți face în manipularea imaginilor site-ului și modul de rezolvare a acestora, precum și modul în care puteți analiza imaginile site-ului pentru a îmbunătăți viteza și a reduce costurile de lățime de bandă.
Accentsconagua
