Optimizarea imaginilor pentru web: un ghid practic

Se spune că o imagine merită o mie de cuvinte, acesta fiind unul dintre motivele pentru care imaginile sunt atât de importante în comerțul electronic. Fără ca clientul să poată prelua, atinge și inspecta un produs, se bazează foarte mult pe imagini pentru a înțelege culoarea, calitatea și povestea produsului.

Deci, este de la sine înțeles că imaginile dvs. trebuie să fie de înaltă rezoluție și clare. Dar, acest lucru are un preț. Imaginile mari, de înaltă definiție, pot avea dimensiuni de fișiere uriașe. Puneți câteva dintre acestea pe site-ul dvs. și acea experiență rapidă de navigare în magazinul dvs. online poate ajunge să vă simțiți mai mult ca să înotați prin melasă. Acest lucru nu numai că va determina vizitatorii să sară, dar, în timp, Google va observa și acest lucru, iar acest lucru vă poate afecta SEO-ul.

În comerțul electronic, este esențial să găsiți un echilibru bun între calitatea imaginii și dimensiunea fișierului de imagine atunci când salvați o imagine pentru site-ul dvs. Vă vom arăta cum să faceți exact acest lucru în această postare.

Dacă ați știut că faceți o fotografie de produs și o încărcați direct în magazinul dvs., acest tutorial este pentru dvs. Dacă nu aveți cunoștințe formale sau proces pentru salvarea imaginilor având în vedere dimensiunea fișierului, acest tutorial este pentru dvs. Dacă site-ul dvs. are o mulțime de imagini și lucrurile se simt lent, acest tutorial este pentru dvs. Dacă nu ați început încă să vă construiți magazinul online, acest tutorial este special pentru dvs.

Sunteți gata să vă optimizați imaginile?

Opțiuni tip fișier imagine

Există trei tipuri principale de fișiere pe care vom dori să ne concentrăm pentru salvarea imaginilor optimizate pentru web: GIF, JPG și PNG. Fiecare tip de fișier are punctele sale forte și punctele sale slabe și este foarte important să le cunoașteți și să le țineți cont atunci când salvați o imagine.

Lucrul cu JPG-uri

JPG-urile (cunoscute și sub numele de JPEG) sunt cel mai popular tip de fișier pentru imagini de pe web. JPG-urile sunt perfecte pentru fotografii sau imagini complexe care conțin o mulțime de culori, umbre, gradiente sau modele complexe. JPG-urile gestionează bine acest tip de imagini, deoarece JPG-urile au o paletă de culori imensă cu care să lucreze.

JPG-urile pot fi, de asemenea, salvate în calitate înaltă, calitate scăzută sau oriunde între ele. Acest lucru vă permite să reglați și să salvați imaginea exact cum doriți, echilibrând calitatea și dimensiunea fișierului.

Lucrul cu PNG-uri

PNG-urile sunt un alt format de fișier popular online. În Adobe Photoshop, veți avea opțiunea de a salva PNG-uri ca PNG-8 sau PNG-24.

• PNG-8 are o paletă de culori foarte limitată de 256 de culori. Deși dimensiunea imaginii este mai mică, aceasta nu va fi o opțiune bună pentru imagini și fotografii complexe.
• PNG-24 oferă o imagine de calitate mult mai înaltă, dar costă o dimensiune mai mare a fișierului.

Cel mai important, PNG-urile pot gestiona transparența. Acesta este unul dintre cele mai mari puncte de diferențiere între PNG și JPEG.

Lucrul cu GIF-uri

GIF-urile erau mai populare cu mulți ani în urmă, dar sunt încă o opțiune pentru dimensiuni mici ale imaginii, unde sunt necesare doar câteva culori. La fel ca PNG-8, fișierele GIF sunt limitate la doar 256 de culori. Din această cauză, GIF-urile nu ar trebui utilizate niciodată pentru fotografiile produselor.

Salvarea corectă a imaginilor

După cum se poate aștepta, imaginile mari durează mai mult timp pentru încărcare. Când spunem mare, ne referim mai degrabă la dimensiunea fișierului decât la dimensiunile unei imagini, adică la valoarea în KB, MB, GB etc. % va abandona o pagină care durează mai mult de 3 secunde pentru încărcare, este important ca imaginile dvs. să fie suficient de mici pentru a asigura un site rapid.

Există trei lucruri pe care le puteți face pentru a vă optimiza corect imaginile pentru magazinul dvs. online:

Salvați dimensiunile potrivite

Trebuie să deschideți imaginea în Photoshop și să o vizualizați la 100%. Acest lucru vă permite să vizualizați imaginea la dimensiunea exactă pe care o va afișa pe un monitor al computerului atunci când salvați imaginea pentru web.

Salvați imagini pentru web

Este posibil să reduceți dimensiunea fișierului fără a reduce semnificativ calitatea imaginilor. Metoda noastră preferată de reducere a dimensiunii fișierului fără a reduce semnificativ calitatea imaginii este utilizarea funcției Photoshop „Salvare pentru web”. Deschideți-vă imaginea în Photoshop și accesați Fișier> Export> Salvare pentru web (moștenire)…. Va apărea o fereastră care vă va permite să alegeți calitatea exportului. Am constatat că o calitate de 60 funcționează cel mai bine, deoarece scade dimensiunea fișierului până sub un megabyte și nu există nicio diferență notabilă în calitate.

Comprimă imagini pentru web

Aplicațiile de comprimare a imaginilor sunt cel mai simplu mod de a reduce dimensiunea fișierului imaginilor. Aceste tipuri de instrumente elimină datele ascunse din fișierul imagine, cum ar fi profiluri de culoare și metadate suplimentare (cum ar fi geolocalizarea locului în care a fost făcută fotografia), care nu sunt necesare. Aceste instrumente oferă un mod rapid și ușor de a reduce dimensiunea fișierelor fără a pierde calitatea imaginii.

Aplicații și servicii de compresie a imaginilor

• ImageOptim
• ShortPixel
• TinyJPG
• TinyPNG
• Compressor.io
• Kraken
• ImageOptimizer
• Crush Pics (aplicația Shopify)
• Minifier (aplicația Shopify)

Salvarea unei imagini pentru web: exemplu de parcurs

Pentru început, să ne prefacem că suntem Stiff Salt (deținută de fapt de un prieten și dezvoltator Shopify) și am vrut să schimbăm imaginea caracteristicii din magazinul nostru online.

Am amenajat o scenă, ne facem să pară absolut incredibilă și facem o fotografie cu o cameră DSLR. Minunat avem fotografia noastră. Ce frumusete!

Dar ... dimensiunea fișierului este IMENS! 14,6 MB pentru a fi exact. Iar dimensiunile fotografiei sunt de 5184 × 3456 pixeli. Acest lucru este complet inutilizabil chiar acum. Este suficient de mare pentru a imprima un poster de dimensiuni de film. La 14,6 MB, această imagine ar necesita un timp semnificativ pentru încărcarea pe computerul unui vizitator. Nu este bine.

Este timpul să începeți să lucrați și să reduceți semnificativ dimensiunea imaginii și dimensiunea fișierului.

Amintiți-vă, vom face trei lucruri imaginii.

• Reduceți dimensiunea imaginii: acestea sunt dimensiunile fotografiei
• Salvați imaginea în mod corespunzător pentru a reduce dimensiunea fișierului: aceasta este dimensiunea fișierului și cât spațiu ocupă pe hard disk-ul computerului și / sau pe serverul dvs. web
• Comprimă fișier imagine: pentru a scăpa de orice date ascunse suplimentare care ocupă spațiu

Reduceți dimensiunea imaginii

În funcție de programul pe care decideți să îl utilizați și de preferințele personale, puteți:

• Reduceți dimensiunea imaginii înainte de a salva
• Reduceți dimensiunea imaginii în timp ce salvați imaginea
• Salvați imaginea, apoi reduceți dimensiunea imaginii

Pentru a simplifica lucrurile, vom reduce mai întâi dimensiunea imaginii. Pentru a face acest lucru, vom deschide imaginea în Photoshop (puteți utiliza orice program de imagine vă simțiți cel mai confortabil).

Pentru a afla ce dimensiune, ne-am uitat la dimensiunea sugerată a imaginii pentru pagina principală a temei. Avea 1600 x 800 pixeli (amintiți-vă că originalul avea 5184 × 3456 pixeli).

În Photoshop, vom selecta Imagine> Dimensiune imagine.

Ok, am redus dimensiunea (dimensiunile) imaginii la ceva mai potrivit și recomandat de dezvoltatorul temei.

Salvați imaginea în mod corespunzător (Salvați pentru web)

În Photoshop, există o comandă specifică numită „Salvare pentru web” care optimizează fișierul imagine pentru afișare online. Acest lucru este important, deoarece comanda obișnuită „Salvare” poate crea dimensiuni de fișiere de 2-3 ori mai mari decât comanda „Salvați pentru web”.

În caseta „Salvare pentru web”, trebuie să facem câteva selecții.

• Tip imagine: Tipul de fișier va afecta calitatea și dimensiunea fișierului de ieșire
• Calitatea imaginii: acest lucru este important și poate afecta puternic dimensiunea finală a fișierului
• Dimensiuni: Am făcut deja acest lucru în primul pas, deci nu este nevoie să o facem din nou, dar dacă nu am făcut acest lucru în primul pas, am putea schimba doar dimensiunile imaginii aici

Pe baza a ceea ce am învățat la începutul acestei postări, știm că JPEG este cel mai bun tip de fișier pentru fotografii sau orice imagine cu o mulțime de culori și complexitate. Vom selecta JPEG.

Pentru calitatea imaginii, aveți o scală pe care o puteți selecta cu 5 presetări care variază de la maxim la scăzut. Să aruncăm o privire la dimensiunea finală a fișierului de ieșire pentru fiecare nivel de calitate (aceste informații sunt afișate în colțul de jos al ferestrei de economisire a imaginii):

• Maxim: 1,38 MB
• Foarte mare: 611 KB
• Înalt: 339 KB
• Mediu: 152 KB
• Minim: 86k

Puteți vedea că pentru fiecare nivel de calitate pe care îl coborâți, dimensiunea imaginii se reduce cu aproape jumătate. În general, am constatat că High este cea mai bună setare pentru majoritatea imaginilor. La acest nivel, este aproape imposibil ca ochiul uman să vadă orice degradare a calității imaginii, iar dimensiunea fișierului este de aproape 4x mai mică decât dacă ar fi să selectăm doar maximul.

Dacă imaginea este o imagine extrem de importantă cu multe detalii, poate doriți să selectați un nivel mai mare și să salvați la Foarte mare.

În esență, economisirea pentru web este un act de echilibrare - trebuie să echilibrați calitatea graficii și dimensiunea fișierului media pentru a se potrivi nevoilor dvs. personale.

Comprimă imagini pentru web

Dacă ați folosit Adobe Photoshop, va fi făcut deja o treabă grozavă la reducerea dimensiunii imaginii, cu toate acestea, puteți rade probabil încă 5-10% din dimensiunea imaginii utilizând o aplicație de compresie precum ImageOptim și / sau ShortPixel.

ImageOptim este, de asemenea, cel mai simplu mod de a reduce rapid dimensiunea fișierului de imagine dacă ați folosit un alt program pentru a vă salva imaginile care nu sunt la fel de bune ca Photoshop.

Lăsând fiecare fișier din pasul anterior în ImageOptim, am reușit să reducem în continuare dimensiunea imaginii cu încă 5%. Nu uriaș, dar din nou, acestea au fost deja optimizate cu Photoshop. Indiferent, fiecare KB contează.

Concluzie

Pentru a recapitula, fotografia noastră a fost extrem de imensă când am început, totuși, cu câțiva pași simpli, am redus dimensiunea fotografiei de la 5184 × 3456 la 1600 x 800, astfel încât să se potrivească perfect pentru pagina noastră de pornire și, în același timp, am luat de la 14,4 MB la computer, până la 336 KB mult mai rezonabil.

Salvarea imaginilor în mod adecvat pentru web este un pas important pentru a învăța devreme și pentru a pune în aplicare religios. Chiar dacă economisiți doar 10-20% pe fiecare imagine, în timp, pe măsură ce magazinul și site-ul dvs. web cresc, fiecare mic KB poate aduce câteva economii semnificative care vor duce la o experiență mult mai plăcută în general pentru vizitatorii dvs., clienții și Google.

Cum să optimizați imaginile pentru web: soluție video