Optimizați imaginile pentru Muwalk Web

imaginilor pentru

Fotografie de John Caroro.

Optimizarea imaginilor pentru web este esențială pentru ca paginile să se încarce rapid în browserele utilizatorilor.

Imaginile, prezente pe 99% din site-urile web, sunt unul dintre elementele care încetinesc cel mai mult timpul de încărcare. Iar viteza de încărcare rapidă este esențială din două motive:

  • Oferă o experiență pozitivă a utilizatorului, mai ales atunci când accesați o pagină web de pe un dispozitiv mobil.
  • Evitați sancțiunile care pot limita poziționarea SEO a site-ului web.

Ce este optimizarea imaginilor pentru web?

La optimizarea imaginilor pentru web, luăm în considerare trei proprietăți ale fișierelor:

  • Rezoluţie - numărul de pixeli pe inch (dpi) sau puncte pe inch (dpi) pe care le conține imaginea.
  • mărimea - dimensiunile imaginii –înălțime după lățime–, exprimate în pixeli (px) pentru web.
  • Greutate - spațiul pe disc pe care îl ocupă un fișier imagine, de obicei în kilobyți (kB).

optimizarea imaginii constă în obținerea unui fișier cu un calitate a imaginii fără pierderi cu cea mai mică greutate posibilă.

Alegeți formatul de imagine potrivit

Mai jos trecem în revistă principalele formate de imagine pentru web și la ce folosește fiecare dintre ele.

Format JPEG

Formatul JPG sau JPEG (Joint Photographic Experts Group) este o metodă de compresie care acceptă modurile de culori CMYK, RGB și în tonuri de gri, dar nu acceptă transparențe.

JPG păstrează toate informațiile de culoare ale unei imagini RGB, dar comprimă dimensiunea fișierului aruncând selectiv datele.

Un nivel ridicat de compresie produce o calitate a imaginii mai scăzută și un nivel scăzut de compresie o calitate a imaginii mai bună.

JPG este o opțiune excelentă pentru afișarea de imagini și fotografii mari comprimate pe web.

Format GIF

Formatul GIF (Graphics Interchange Format) acceptă transparența și până la 256 de culori atât în ​​imagini, cât și în animații.

Exportul de imagini cu mai mult de 256 de culori în format GIF determină pierderea calității.

Formatul GIF este opțiunea obișnuită pentru afișarea imaginilor animate.

Format PNG

Formatul PNG (Portable Network Graphics) este format din două tipuri: PNG - 24 și PNG - 8. Ambele formate acceptă folii transparente și semi-transparente.

PNG - 24 oferă o adâncime de culoare de milioane de culori, iar PNG - 8 acceptă până la 256 de culori.

Formatul PNG este o alegere bună pentru afișarea de imagini mici (cum ar fi pictograme), imagini fără fundal, sigle și imagini care conțin text pe web.

Format WebP

Formatul WebP, dezvoltat în prezent de Google în open source, își propune să fie următorul standard pentru grafica cu milioane de culori.

Acest format acceptă transparențe, compresie fără pierderi și fără pierderi, animații grafice și îmbunătățește semnificativ nivelurile de compresie ale formatelor JPG, GIF și PNG.

Dar nu totul este bun, unele browsere web au probleme cu afișarea fișierelor WebP și este necesar să utilizați o a doua imagine de rezervă pentru a vă asigura că imaginea este afișată pe Web.

Interesul Google pentru standardizarea formatului WebP, cu scopul de a accelera din ce în ce mai mult viteza de încărcare, contrastează cu pasivitatea arătată de companii precum Apple, Microsoft sau Adobe pentru a adopta formatul.

În acest moment Adobe Photoshop nu permite exportul nativ în format WebP, pentru aceasta este necesar să instalați pluginul gratuit WebPShop.

Format SVG

Pentru a finaliza această secțiune dedicată formatelor, trebuie menționat faptul că formatul de grafică vectorială SVG nu este un format de fișier imagine, ci un format de fișier XML (Extensible Markup Language).

Cum se optimizează imaginile pentru web cu Adobe Photoshop

În următoarele trei blocuri, vom analiza – pas cu pas– modul de ajustare și exportare a fișierelor de imagine optimizate pentru site-uri web cu software-ul Adobe Photoshop.

1. Reglați rezoluția imaginii

Prima acțiune pe care trebuie să o luăm este de a reduce rezoluția imaginilor noastre la minimul necesar.

72 dpi este rezoluția minimă a imaginii pentru web fără pierderi de calitate.

Pentru a modifica rezoluția fișierului trebuie să accesăm opțiunea Imagine/Dimensiune imagine din meniul superior Photoshop sau să apăsăm comanda rapidă de la tastatură „Opțiune + Comandă + I”, pe Mac.

Calea către dimensiuni și rezoluția unei imagini în Adobe Photoshop.

Apoi, se deschide o fereastră în care putem ajusta atât rezoluția imaginii - reducând rezoluția la 72 dpi dacă este necesar - cât și dimensiunea fotografiei, pe care o abordăm în secțiunea următoare.