Cum să optimizați imaginile pentru site-ul WordPress

Optimizarea imaginilor este un subiect complex și un proces care necesită răbdare, dar este foarte, foarte important din mai multe motive.

Toată lumea ar trebui să optimizeze imaginile înainte să le încarce în site-ul WordPress, chiar dacă poate fi enervant uneori, mai ales dacă lucrați cu o grămadă de imagini, ca mine.

De fapt, toți cei care au orice fel de site ar trebui s-o facă. Acest articol se concentrează pe WordPress pentru că are anumite elemente specifice WordPress-ului.

De ce este importantă optimizarea imaginilor pentru site-ul WordPress

Optimizarea imaginilor este foarte importantă pentru site-ul WordPress, din următoarele motive:

  • Îmbunătățește performanța și viteza de încărcare a paginilor – Cu cât mărimea fișierului de imagine este mai mic, cu atât îi va lua mai puțin browser-ului să-l descarce și afișeze;
  • Îmbunătățește SEO-ul (optimizare pentru motorul de căutare) – Cu cât site-ul WordPress este mai optimizat și mai rapid, cu atât îl plac motoarele de căutare (ex.: Google) mai mult;
  • Economisiți bandă și spațiu de stocare – În funcție de găzduirea web și alte instrumente, banda și/sau spațiul de stocare pot fi destul de mici. Dacă nu optimizați imaginile din WordPress, veți consuma aceste resurse mult mai repede și va trebui să plătiți pentru un pachet mai scump.

Alegeți corect formatul imaginii

Este important să salvați imaginile în formatul corespunzător. Altfel, puteți crește mărimea fișierului foarte mult.

Probabil ați observat că imaginile au diferite formaturi/extensii, cele mai importante și folosite pentru site-uri fiind următoarele:

PNG (.png)

Acest format este folosit pentru imagini mai simple care conțin text, ilustrații, icoane, etc.

Este un format care se bazează pe 256 de culori, nu pe milioane de culori, cum ar fi fotografiile.

Să luăm, ca exemplu, ilustrația de mai jos.

Mărimea fișierului PNG vs. JPEG pentru imagini simple
Mărimea fișierului PNG vs. JPEG pentru imagini simple

Dacă salvez imaginea ca și PNG, are doar 32 KB (Kilobytes). Dacă o salvez ca și JPEG, are 90 KB, aproape de 3 ori mai mult!

Calitatea ar fi aceeași, bineînțeles.

A, și PNG-urile pot avea fundal transparent. JPEG-urile, nu.

PNG-8 și PNG-24

În funcție de instrumentul folosit pentru optimizarea imaginilor din WordPress, poate o să aveți de ales între PNG-8 și PNG-24.

PNG-8 se bazează pe o paletă de doar 256 de culori, ceea ce este suficient pentru genurile de imagini menționate mai sus.

PNG-24 este varianta PNG pentru imagini complexe, gen fotografii, și poate fi un substitut (nu bun) pentru JPEG.

Așadar, nu folosiți PNG-24, nici măcar pentru fotografii. Folosiți doar PNG-8 pentru tipurile de imagini menționate mai sus.

Altfel, mărimea fișierului va crește ca la JPEG sau chiar mai mult.

JPEG (.jpeg) sau JPG (.jpg)

JPEG și JPG sunt exact același lucru. Totuși, extensia mai des întâlnită este JPG.

Formatul JPG se folosește pentru imagini complexe, cu foarte multe culori, cum ar fi fotografiile.

Să luăm, ca exemplu, fotografia de mai jos.

Mărimea fișierului PNG vs. JPEG pentru imagini complexe
Mărimea fișierului PNG vs. JPEG pentru imagini complexe necomprimate

Dacă aș salva imaginea ca și PNG, fișierul ar avea mărimea de 164 KB.

Dacă aș salva ca și JPG, ar avea 81 KB, de două ori mai puțin.

Bineînțeles, am folosit versiunea PNG-24, nu PNG-8. Am vorbit despre ele mai sus.

Dacă salvam ca și PNG-8, ar fi avut mărimea mai mică decât a JPG-ului, dar calitatea se pierdea pentru că PNG-8 folosește doar 256 culori.

WebP (.webp)

WebP este un format creat de Google în 2010.

Nu prea îl vedeți des din diverse motive, unul major fiind pentru că cei de la Apple s-au tot încăpățânat să nu-l accepte pentru browser-ul Safari care este destul de folosit, chiar și în România, că-s destui cu iPhone sau Mac.

Așadar, trebuiau folosite tot felul de implementări adiționale, cum ar fi să se folosească două formaturi, iar WebP să fie servit doar dacă este Safari detectat.

Pentru muți, nu a meritat efortul.

Dar situația se va schimba pentru că au anunțat că-l vor accepta în ultima actualizare, Safari 14, care va fi public în toamnă, cred, alături de macOS 11 și iOS 14.

WebP poate fi folosit ca substitut atât pentru PNG, cât și pentru JPG.

Iar mărimea fișierelor este de până la 26% mai mică, în cazul PNG-urilor, și între 25%-34%, în cazul JPG-urilor.

Mărimea fișierului WebP comprimat la nivelul 75 vs. JPEG comprimat la 60%
Mărimea fișierului WebP comprimat la nivelul 75 vs. JPEG comprimat la 60%

Dar nu e totul așa roz cu WebP pentru că nu e implementat în multe soft-uri.

WebP nu este acceptat de WordPress

În WordPress, încă nu puteți încărca fișiere WebP. Vă va da eroare.

Așa că trebuie activat, dar nu recomand un modul pentru că:

  1. Nu este absolut necesar;
  2. Nu am văzut niciunul care să activeze formatul și atât. Unul schimbă PNG-urile în WebP, altu nu știu ce mai face… Bleah.

Așa că recomand să-l activați cu ajutorul unui fragment mic de cod în tema copil (în engl. „child theme”), în fișierul functions.php.

Până scriu un tutorial despre asta în română, puteți să-l citiți pe cel de pe celălalt blog al meu. Puteți traduce postarea în Chrome, dacă este cazul.

Aici aflați cum să accesați și editați fișierele site-ului WordPress.

Dacă n-aveți temă copil, instalați modulul Code Snippets și adăugați codul acolo.

WebP nu este acceptat în Photoshop

Dacă folosiți Photoshop, veți vedea că nu acceptă formatul WebP într-un mod nativ.

Dar există un modul făcut de cei care se ocupă de proiectul WebP. Puteți afla cum să-l instalați din tutorialul meu de pe celălalt blog.

Înainte să începeți să încărcați imagini WebP în WordPress, trebuie să fiți atent(ă) dacă nu cumva fișierele WebP sunt mai mari decât cele PNG sau JPG, așa cum menționează și cei de la Google.

Asta am observat și eu, în cazul meu.

Eu lucrez, în principal, cu PNG-uri și am observat că atunci când le micșorez dimensiunea, mărimea fișierelor WebP devine mai mare decât cea a PNG-urilor.

Deci, eu nu fac nicio ispravă cu ele.

Așa că testați înainte, ca să vedeți dacă mărimea fișierelor scade sau crește cu WebP. Dacă a crescut, folosiți tot PNG sau JPG.

SVG (.svg)

SVG-urile conțin grafică vectorială scalabilă, ceea ce înseamnă că nu-și pierd calitatea și nu se pixelează/blurează atunci când sunt mărite în ecran.

Nu sunt chiar fișiere obișnuite de imagini. Ele conțin cod XML. Practic, sunt imagini create prin cod care apare în sursa paginii web a dvs.

De exemplu, codul din imaginea de mai jos redă logo-ul de la Facebook Messenger.

svg code for facebook messenger
Codul SVG pentru Facebook Messenger

SVG-urile se folosesc pentru imagini simple, cum ar fi ilustrații, icoane, logo-uri.

De obicei, SVG-urile se folosesc pe pagini de destinație (în engl. „landing pages”), paginile „mai de marketing” ale site-ului, unde folosiți icoane sau ilustrații.

Să luăm, ca exemplu, site-ul Kinsta care aparține uneia dintre găzduirile WordPress de top pe care le recomand, dacă aveți un site internațional, nu românesc.

Kinsta site cu imagini SVG
Site-ul Kinsta cu imagini SVG

Tot ce este în chenar roșu este format SVG.

Este de preferat ca în astfel de situații să folosiți SVG în loc de PNG deoarece:

  • Este grafică vectorială, deci nu se pierde calitatea dacă cineva mărește site-ul dvs. în ecran;
  • Mărimea fișierelor este, de obicei, mai mică.
kinsta svg marit
Icoanele SVG mărite cu 400%

După cum vedeți în imagine, am mărit pagina de pe site-ul Kinsta cu 400%, iar icoanele SVG sunt tot de calitate pentru că s-au scalat.

PNG-urile, în schimb, se blurau pentru că sunt imagini cu pixeli cu mărimi fixe. Dacă se mărește imaginea, se măresc doar pixelii, nu se adaugă alții în plus pentru a ține imaginea de calitate.

SVG-urile nu sunt acceptate în WordPress

Pentru că SVG-urile conțin cod, reprezintă o vulnerabilitate de securitate. Anumite fișiere pot conține malware (viruși).

Așa că WordPress nu le acceptă în mod nativ.

În mod normal, dacă aș ști sigur că încărcați doar dvs. imagini SVG în WordPress și că le încărcați din surse sigure, v-aș da un fragment de cod care să activeze formatul SVG în WordPress.

Dar, fiindcă e vorba de securitate, vă recomand un modul numit Safe SVG.

Puteți afla aici cum să instalați un modul în WordPress.

Varianta gratuită nu are setări. Doar îl instalați, iar el activează formatul SVG în WordPress și înlătură potențialele vulnerabilități la încărcarea imaginilor.

„M-ai căpiat și nu mai înțeleg ce format să folosesc”

În caz că v-am pierdut pe drum cu atâtea explicații, vă fac un sumar pentru ce și când să folosiți:

  • PNG (versiunea PNG-8, 256 de culori) pentru imagini simple, cum ar fi ilustrații, text, icoane;
  • JPG pentru imagini complexe cu foarte multe culori, cum ar fi fotografiile;
  • WebP în locul PNG-urilor și JPG-urilor doar dacă mărimea fișierelor nu devine mai mare;
  • SVG în locul PNG-urilor pentru logo, ilustrații, icoane. Folosite, în principal, pe paginile de destinație/marketing. Puteți folosi PNG-uri în articole, pentru screenshot-uri (în rom. „captură de ecran”), cum vedeți la mine, sau imagini prea complexe pentru SVG-uri.

Ideal ar fi să folosiți doar WebP și SVG. Dar nu este posibil mereu, așa că trebuie apelat și la PNG și JPG, după caz.

Aflați dimensiunile corecte pentru imagini

Adăugarea dimensiunii corecte este un alt aspect important al optimizării imaginilor pentru site-ul WordPress.

Dimensiunile diferă de la temă la temă și de la design la design. Nu există mărimi universale.

Unele teme WordPress vă oferă dimensiunile recomandate ale imaginilor în documentație, dar mai mult pentru blog-uri, unde situația e mai bătută-n cuie.

Dacă vă construiți site-ul WordPress cu un page builder (în rom. „constructor de pagini”), situația va diferi, că veți avea tot felul de coloane de toate dimensiunile.

Cum să aflați lățimea containerelor

Când zic „container”, mă refer la un spațiu definit în pagina dvs. web, unde apare conținutul.

Menționez numai „lățime” pentru că înălțimea poate să difere după nevoie. Nu trebuie o înălțime anume decât în cazuri ce țin de design.

De exemplu, lățimea containerului pentru articolele mele este de 685 px (pixeli).

Asta înseamnă că nu ar trebui să adaug imagini mai late fără un motiv bun.

Un motiv bun ar fi cazul în care imaginea este prea mică pentru a se putea vedea clar ce vreau să arăt, iar cititorul este nevoit să dea click pe imagine ca să o mărească. Atunci, adaug una mai mare.

Cea mai rapidă și ușoară metodă de a afla lățimea unui container este să folosiți browser-ul – Chrome, în exemplul meu.

De exemplu, dacă vreți să aflați ce lățime are containerul articolelor de pe blog-ul dvs., urmați acești pași:

Pasul 1 – Folosiți funcționalitatea de „Inspectare”

Ca să vă fie mai ușor, scrieți două rânduri de text în articol înainte.

Apoi, pe acel text, dați click dreapta și selectați Inspectează (în engl. „Inspect”).

inspect chrome

Pasul 2 – Vedeți dimensiunea specificată

Browser-ul va evidenția elementul selectat (paragraful, în cazul nostru) cu albastru. Și va apărea un chenar mic cu diferite informații, printre care și dimensiunea.

dimenisune paragraf chrome isnpect

După cum vedeți, dimensiunea este de 685 x 70 (pixeli), dar în cazul acesta nu ne interesează înălțimea, doar lățimea, care este 685.

Dacă nu apare direct, dați cu mouse-ul (cursorul), jos, peste unul dintre etichetele <p>.

Unele teme, pentru un design mai interesant, pot forța imaginea să apară Wide (în rom. „Lat”), adică mai lată decât restul conținutului.

În cazul acesta, încărcați o imagine și repetați pasul 1 și 2, numai că trebuie să fie selectată eticheta <img>, nu <p>.

dimenisune imagine chrome inspect

Așa trebuie să faceți peste tot pe unde puneți imagini de diferite dimensiuni, ca să nu adăugați unele mai mari fără a fi necesar.

Cel mai bine este să adăugați o imagine mare în ce loc doriți, ca să apară în design, iar apoi îi aflați dimensiunea, o ștergeți și adăugați una corespunzătoare.

Când contează și înălțimea?

Înălțimea contează mai mult când vine vorba de design. De exemplu, pentru imaginea reprezentativă (în engl. „Featured Image”) a articolelor.

Imaginea reprezentativă este prima imagine a articolului, care apare pe pagina de blog, pe site-urile de socializare când este articolul distribuit, etc.

Pentru un design frumos este bine ca toate imaginile reprezentative să aibă aceeași lățime și înălțime, nu harcea-parcea, decât dacă e vreun stil excentric reușit.

imagini reprezentative blog wp alfa
Imaginile reprezentative pe blog-ul WP Alfa

Unele teme WordPress implementează forțat o dimensiune fixă și vă taie imaginile ca să fie conform dimensiunilor prestabilite.

Cel mai bine este să testați adăugând o imagine reprezentativă într-un articol și pe urmă să urmați cei doi pași de sus.

Dacă tema taie din înălțime, vedeți care este și folosiți-o pe aceea.

Dacă tema nu taie din înălțime, alegeți dvs. una pe care să o folosiți când optimizați imaginile pentru WordPress.

De obicei, se folosește un aspect panoramic de 16:9.

Puteți folosi acest calculator ca să aflați ce înălțime ar trebui să folosiți în funcție de lățime. Adăugați lățimea, iar înălțimea va fi calculată automat.

Atenție la design-ul temei

Spre exemplu, unele teme WordPress pot folosi imaginile reprezentative ca să le adauge într-un slider pe prima pagina.

Acel slider poate avea o lățime de 1200 pixeli, să zicem.

Așadar, dacă vreți să folosiți sliderul sau oricare altă funcționalitate asemănătoare, va trebui să adăugați imagini reprezentative cu lățimea de 1200 pixeli, chiar dacă în articol, lățimea lor e mai mică. Altfel, calitatea se strică în slider.

Dimensiunea imaginilor pentru telefoane

Trebuie să ne gândim și la dispozitivele mobile când utilizăm imagini, în special la telefoane pentru că tot design-ul se așază pe o singură coloană.

De exemplu, dacă pentru o pagină folosiți 3 coloane cu 3 imagini, dimensiunile, teoretic, ar trebui să fie mici, ca în exemplul de mai jos.

imagini 3 coloane wordpress

După cum vedeți, în exemplul meu, ar fi necesară o lățime de 220 pixeli pentru fiecare imagine.

Dacă aveți zecimale, rotunjiți mereu în jos.

Dar pe telefon vor arăta așa:

iphone 3 imagini cu pugs

Imagini mici care poate n-or fi nici centrate, ceea ce este vina temei, sau a constructorului de pagini, sau a editorului, sau a vreunui modul. În cazul de față, editorul WordPress nu le centrează.

Acesta este un aspect care, poate, vă deranjează.

Așa că, în cazuri de genul, ca o excepție de la regulă, puteți adăuga imagini cu lățimi mai mari, ca să umple containerul pe telefoane și să nu apară mici și într-o parte.

Fiindcă sunt o droaie de telefoane de diferite mărimi, trebuie să folosiți una care să le acopere pe toate. O lățime de 375 pixeli este o alegere bună.

Iar imaginile vor arăta bine și pe telefon, așa:

iphone 3 imagini cu pugs

Altă viață, nu?

Puteți testa design-ul pe mobil pe Responsinator sau MobileTest.

Cum să optimizați imaginile pentru WordPress

După ce ați aflat dimensiunile corecte, trebuie să „operați” imaginile înainte de a le încărca în WordPress.

Trebuie să le:

  • Scalați după lățime; înălțimea fiind ajustată automat;
  • Decupați, dacă este nevoie;
  • Comprimați, ca să mai scădeți din mărimea fișierului.

Scalarea și decuparea imaginilor

Pentru scalare și decupare recomand să găsiți un soft sau aplicație web care să fie ușor de folosit pentru dvs., ca să nu vă apuce nervii și să renunțați la optimizarea imaginilor sau să dați iama în module.

Fiindcă în România, Windows-ul este la putere, cel mai simplu este să folosiți Paint 3D care este parte din Windows 10.

Dacă se întâmplă să nu-l aveți instalat, îl găsiți, gratuit, în Windows Store.

Dacă aveți macOS, nu Windows, ori folosiți ceva ce oferă mac-ul, ori încercați GIMP.

Eu vă voi arăta cum să folosiți Paint 3D.

Pasul 1 – Scalați imaginea

După ce ați selectat imaginea din calculatorul dvs., selectați Canvas (în rom. „Pânză”), iar la Width (în rom. „Lățime”) adăugați lățimea de care aveți nevoie.

În exemplul meu, am adăugat 685 pentru că asta este lățimea containerului pentru articole.

Înălțimea va fi ajustată automat dacă aveți bifat Lock aspect ratio (în rom. „Blocați raportul de aspect”). În mod normal, e bifat automat.

Pasul 2 – Decupați dacă este nevoie

Dacă mai vreți să tăiați din înălțime, de exemplu, dați click pe Crop (în rom. „Decupare”).

Apoi, selectați unul dintre puncte, țineți apăsat pe click-stânga și trageți în sus sau în jos, în timp ce verificați dimeniunile, în dreapta. Puteți trage și pe diagonală sau lateral.

Când terminați, apăsați tasta Enter.

decupare imagine paint 3d

În cazul acesta, nu mai trebuie să aveți bifat Lock aspect ratio.

Când ați terminat, salvați imaginea cu extensia potrivită, după cum am menționat la începutul ghidului.

Comprimarea imaginilor

Comprimarea imaginilor poate scădea drastic mărimea fișierelor.

Dacă folosiți soft-uri ca Photoshop sau GIMP, ele se pot ocupa și de comprimarea imaginilor, dar câteodată nu o fac așa bine.

Așa că, după ce ați scalat și decupat imaginile, folosiți o aplicație web cum este TinyPNG. Se ocupă și de JPG, chiar dacă are PNG în nume.

tiny png

După cum vedeți în exemplul de mai sus, numai din comprimarea a două imagini am salvat 128 KB.

Și nu, nu scade calitatea vizual, după cum puteți vedea din imaginea de mai jos.

png original versus png comprimat

Vedeți vreo schimbare? Eu, nu.

Dacă vreți mai multă flexibilitate, să alegeți dvs. nivelul de comprimare, puteți folosi Image Compressor, cunoscut și ca Optimizilla.

Puteți comprima JPG-urile mai bine aici pentru că puteți selecta niveluri de comprimare de 60% sau 70%, care merg foarte bine cu imagini de calitate.

optimizilla comprimare jpg

La PNG, puteți lăsa setarea automată sau să alegeți 256 de culori.

Pentru WebP, va trebui să folosiți o altă aplicație web, cum ar fi Ezgif.

Nivelul optim de comprimare pentru WebP este:

  • 98 pentru imagini simple, cum ar fi PNG-urile;
  • 75 pentru fotografii, cum ar fi JPG-urile.

Puteți folosi Ezgif pentru toate formaturile, ca să nu vă plimbați de la un site la altul. Eu am anumite preferințe pentru anumite formaturi, de aceea am menționat diferite aplicații web.

Nu putem folosi module WordPress pentru optimizarea imaginilor?

Nu!

Mint. 🙂 Ba da, dar nu vreau să folosiți module pentru că nu sunt absolut necesare.

Pe lângă faptul că trebuie actualizate constant și reprezintă risc de conflicte și vulnerabilități, vă mai mănâncă și din resursele serverului pentru munca pe care o fac acolo.

Și dacă sunteți și pe un server mai prăpădit, vă puteți trezi cu el căzut sau mai știu eu ce.

Unele module mai folosesc și API-uri, iar API-urile afectează și ele performanța.

Regula de aur pe care o repet de câte ori am ocazia:

Cu cât mai puține module, cu atât mai bine!

În caz de urgență

În caz că vă enervează mult prea rău optimizarea imaginilor, vă recomand un modul WordPress care să vă mai taie din muncă.

Tot e mai bine decât să nu optimizați imaginile sau să alegeți vreun modul nu tocmai minunat.

Smush este un modul WordPress care va comprima imaginile automat când le încărcați în WordPress.

Să nu activați Lazy Loading (în rom. „Încărcare leneșă”) din el.

Folosiți modulul acesta pentru Lazy Loading, menționat în ghidul meu despre module recomandate pentru WordPress.

Asta-i tot

După cum v-am avertizat la început, optimizarea imaginilor pentru site-ul WordPress este un subiect complex.

Dar sper că am explicat destul de bine, că ați avut răbdare să citiți și că ați înțeles cât de importantă este optimizarea imaginilor.

Știu că este enervant, dar este vital dacă doriți să aveți un site WordPress performant la mai multe niveluri.

Dacă aveți ceva de zis sau întrebat, lăsați un comentariu.

Lasă un comentariu