Cum să vă optimizați imaginile pentru web-ul mobil

Când vine vorba de alegerea tipurilor și dimensiunilor de fișiere pentru imaginile dvs., țineți cont de calitatea, timpul de încărcare a paginii, capacitatea de mărire și cerințele pieței, mai ales dacă vindeți pe mai multe platforme. Să aruncăm o privire la optimizarea imaginilor pentru web și la cum să alegeți tipul de fișier, ținând cont de dispozitivul mobil pentru o experiență îmbunătățită a utilizatorului.

Alegerea dimensiunilor corecte ale imaginii

Este vital să găsiți un echilibru între imaginile care sunt suficient de mari pentru ca utilizatorii să poată mări și cele care au o dimensiune optimă, astfel încât să nu ocupe prea mult spațiu și să încetinească timpii de încărcare a paginii. Pe Shopify, puteți încărca imagini de până la 4472 x 4472 pixeli cu o dimensiune a fișierului de până la 20 MB. Dar constructorul de site-uri web recomandă de obicei utilizarea 2048 x 2048 pixeli pentru fotografiile pătrate ale produselor. Acestea sunt imagini de înaltă rezoluție care oferă magazinului dvs. un aspect profesional și bine rotunjit, cu capabilități excelente de zoom. Rețineți că, pentru ca funcționalitatea de zoom să funcționeze, imaginile dvs. trebuie să fie mai mari de 800 x 800 pixeli.

În mod similar, Amazon și Etsy au o cerință de imagine de 1000 x 1000 pixeli pentru a permite zoomul.

Pentru a menține un aspect uniform de-a lungul liniei dvs. de produse și pe paginile dvs. de colecție, ar trebui să păstrați același raport de aspect pentru lățimea și înălțimea tuturor imaginilor dvs. caracteristice, să spunem pătrat. Imaginea dvs. caracteristică este prima imagine a unui produs care va apărea în magazinul dvs. - pe pagina dvs. de pornire, pagina coșului, pagina de finalizare a comenzii și o varietate de pagini de colecție. Păstrați-vă toate miniaturile, de asemenea, de aceeași dimensiune și formă pentru a transmite un aspect elegant de magazin. Rețineți că mulți dintre clienții dvs. vor naviga și pe mobil, iar imaginile pătrate sunt mai ușor de repoziționat pentru ecrane mai mici.

Alegerea formatului de imagine potrivit

Să aruncăm o privire la formatele de fișiere cele mai utilizate în fotografia de produs și la ce aduc fiecare la masă. Acestea sunt enumerate aici după cât de frecvent sunt utilizate în fotografia de produs.

JPG

JPG este cel mai comun format de fișier de imagine digitală de acolo. Este acceptat pe scară largă și se mândrește cu o dimensiune mică a fișierului cu o gamă bună de culori. Compresia acestuia vă permite să găsiți un echilibru între dimensiunea fișierului și calitatea imaginii. Shopify recomandă JPG, în special, deoarece poate livra imagini cu o dimensiune relativ mică și de bună calitate, ceea ce funcționează bine pentru fotografiile produselor.

PNG

PNG a fost creat pentru a îmbunătăți formatul GIF prin eliminarea limitării de 256 de culori. Este larg acceptat, fără pierderi (reduce dimensiunea fișierului fără a reduce calitatea) și acceptă transparență (să zicem pentru fundaluri transparente). Dezavantajele sunt că dimensiunile fișierelor PNG pot fi mari din cauza compresiei fără pierderi, iar formatul nu este la fel de compatibil ca JPG.

GIF

GIF oferă fișiere de dimensiuni mici prin comprimarea și reducerea imaginilor la 256 de culori. Deși a fost înlocuit pe scară largă de PNG, este încă folosit pentru animație, deoarece este singurul format care îl acceptă și este recunoscut universal de browsere.

TIFF

TIFF este un format de compresie fără pierderi, care este acceptat pe scară largă de o serie de aplicații web și de editare. Oferă o rezoluție de înaltă calitate, iar mai multe imagini și pagini pot fi salvate convenabil într-un singur fișier. Cu toate acestea, dimensiunea fișierului tinde să fie mare.

BMP

BMP este folosit în mod obișnuit în ecosistemul Windows. Acceptă compresia datelor, canale alfa (utilizate în Photoshop pentru a stoca informații suplimentare pe care le puteți utiliza pentru a manipula părți ale imaginii, cum ar fi adăugarea de fundaluri transparente) și compatibilitate aproape universală. Necomprimat, oferă imagini perfecte, dar dimensiunile fișierelor pot fi, de asemenea, foarte mari.

În general, JPG este cu siguranță cel mai convenabil când vine vorba de combinarea dimensiunilor mai mici cu o calitate decentă. În timp ce PNG oferă o compresie fără pierderi de calitate superioară, o face cu costul ridicat al unei dimensiuni mai mari a fișierului. GIF este util dacă oferiți fotografii la 360 de grade și doriți fișiere ușoare. BMP și TIFF, prin comparație, pot oferi o calitate excelentă, dar dimensiunile naturale sunt de obicei destul de grele și nepractice.

Dimensionarea imaginilor pentru mobil

Shopify vă redimensionează automat imaginile pentru a se potrivi pe ecrane mai mici, dar anumite imagini pot necesita uneori editare manuală. Rețineți că ecranele desktop și mobile nu au doar dimensiuni diferite, ci au orientare opusă. Și în timp ce Shopify încearcă să găsească acest lucru cu decupări ușoare, cel mai bine va fi dacă imaginile dvs. sunt pătrate și produsul dvs. este centrat vertical și orizontal.

De asemenea, imaginile cu rezoluții prea mari, de exemplu maximul Shopify de 4000 x 4000 pixeli, pot apărea neclare atunci când sunt redimensionate pentru mobil. Prin urmare, reducerea imaginii la o dimensiune și o formă mai ușor de gestionat, care să țină cont de mobil, vă poate ajuta magazinul să arate mai bine pe toate dispozitivele. Rețineți că fișierele mari încetinesc și timpul de încărcare a site-ului dvs. Și în comerțul electronic, și mai ales în mobil, fiecare secundă contează, așa că optimizarea imaginilor ar trebui să fie o prioritate.

Deci, deși compresia fără pierderi vă poate oferi imaginea de cea mai înaltă calitate, deseori creează fișiere mari care durează o veșnicie pentru a încărca (mai ales în vrac) și poate încetini timpul de încărcare a paginii, determinând vizitatorii să abandoneze magazinul. Acest lucru este valabil mai ales pe mobil, unde vitezele internetului pot fi mai lente, iar așteptarea ca o imagine să apară în sfârșit îi frustrează pe cumpărători.

În timp ce design-urile și algoritmii receptivi ai Shopify sunt buni la redimensionarea și afișarea imaginilor dvs. pe dispozitive, oferindu-le o mână de ajutor cu dimensiuni de fișiere atente poate însemna o experiență de cumpărături și mai fluidă.

Despre autor

Holly Cardew este fondatorul Pixc, o platformă care ajută magazinele de comerț electronic să editeze și să-și optimizeze fotografiile produselor, astfel încât să poată crește vânzările. Pixc transformă imaginile medii ale produselor în imagini frumoase prin editarea și eliminarea fundalului în 24 de ore. Începând din adolescență, vânzând pe eBay și creându-și propria piață online, Holly are experiență în comerț electronic, marketing online, design grafic și construirea de echipe distribuite. De asemenea, are experiență în construirea și conducerea magazinelor Shopify și în creșterea numărului mare de urmăritori pe rețelele sociale. În 2016, Holly a fost inclusă în lista Forbes 30 sub 30 de retail și comerț electronic. Holly își împarte timpul între San Francisco, Brisbane și Sydney. Când Holly nu lucrează, îi place să călătorească, să exploreze locuri noi, un design frumos, tipografie și să vină cu noi idei de afaceri.