Optimizarea imaginilor și videoclipurilor: formate, pluginuri, Squoosh

Tipărire

Când un site se deschide greu, cauza este de multe ori banală: fotografii puse exact cum au ieșit din telefon sau un videoclip de fundal încărcat direct în pagină. La fiecare vizită, browserul descarcă tot ce conține pagina, iar pe o conexiune mobilă câțiva zeci de megabytes înseamnă o așteptare lungă și vizitatori care pleacă.

Pe scurt: o pagină obișnuită ar trebui să aibă în total sub 2-3 MB, iar o imagine are rareori nevoie de mai mult de 1600-2000 px lățime și 200-300 KB. Pentru câteva imagini folosiți Squoosh în browser, pentru toată biblioteca Media un plugin (pe WordPress Hosting și Business Hosting îl aveți deja: LiteSpeed Cache), iar videoclipurile găzduiți-le pe YouTube sau Vimeo, nu pe site.

Mai întâi: aflați ce cântărește

Testați pagina în PageSpeed Insights. La recomandări veți vedea imaginile prea mari sau în format vechi și cât s-ar câștiga.
Sau, în Chrome ori Firefox, deschideți instrumentele pentru dezvoltatori (F12), fila Network, reîncărcați pagina și sortați după mărime. Primele fișiere din listă sunt, de regulă, câteva imagini sau un videoclip.

Valori de reper

Element	Lățime recomandată	Mărime fișier
Banner pe toată lățimea ecranului	1600-2000 px	sub 500 KB
Imagine în articol sau fotografie de produs	800-1200 px	sub 200-300 KB
Miniatură	300-400 px	-
Videoclip păstrat în pagină	1280 px	sub 2-3 MB
Pagina întreagă	-	sub 2-3 MB

Pentru comparație, o fotografie din telefon sau din aparat are de obicei 4000-8000 px lățime și 3-10 MB, adică de câteva ori mai mult decât este nevoie.

Formatul și compresia

WebP se potrivește aproape oricărei imagini. La aceeași calitate, fișierul iese de obicei cu 25-35% mai mic decât un JPG.
JPG rămâne pentru fotografii atunci când nu puteți folosi WebP.
PNG este pentru logo-uri și grafică cu fundal transparent. O fotografie salvată ca PNG poate fi de câteva ori mai mare.
SVG este pentru siglele și iconițele desenate vectorial.

Pentru compresie, o calitate de 75-80 reduce mult fișierul, iar diferența nu se vede cu ochiul liber.

Ce cale să alegeți

Situația dvs.	Calea potrivită
Pregătiți un banner sau câteva fotografii noi	Squoosh sau programul de imagini din calculator, manual
Site existent, cu sute de imagini deja încărcate	Plugin de optimizare în WordPress
Zeci de fotografii noi pe calculator, de pus deodată	Program de prelucrare în lot, de exemplu XnConvert (gratuit)

Manual, înainte de încărcare

Cu Squoosh

Squoosh este creat de Google, e gratuit și rulează direct în browser. Imaginea nu este trimisă nicăieri: totul se face pe calculatorul dvs.

Deschideți squoosh.app și trageți imaginea în fereastră sau faceți clic în zona din mijloc ca să alegeți fișierul.
În panoul din dreapta activați Resize și scrieți la Width lățimea dorită, de exemplu 1600 pentru un banner sau 1000 pentru un articol. Înălțimea se ajustează singură.
La Compress alegeți WebP (sau MozJPEG, dacă aveți nevoie de JPG) și setați Quality la 75-80.
Mutați bara verticală din mijloc ca să comparați originalul cu rezultatul. Jos, în dreapta, apar mărimea nouă și procentul economisit.
Descărcați fișierul cu butonul din colțul din dreapta jos și încărcați-l în WordPress în locul originalului.

Squoosh lucrează cu o singură imagine o dată, deci pentru volume mari alegeți un plugin sau un program de prelucrare în lot.

Fără alt program

Pe Windows: deschideți fotografia în aplicația Photos și alegeți redimensionarea din meniul cu trei puncte.
Pe Mac: în Preview, meniul Tools, apoi Adjust Size.

Automat, cu un plugin WordPress

Un plugin de optimizare comprimă și convertește fiecare imagine nouă la încărcare și, la cerere, le prelucrează o dată și pe cele deja existente în Media. Țineți activ unul singur: două pluginuri de acest fel pot prelucra aceeași imagine de două ori sau pot intra în conflict.

LiteSpeed Cache (WordPress Hosting și Business Hosting)

Pe aceste pachete serverul web este LiteSpeed, iar pluginul LiteSpeed Cache are și optimizare de imagini.

În WordPress deschideți LiteSpeed Cache, apoi Image Optimization. Optimizarea se face prin serviciul QUIC.cloud al LiteSpeed, așa că pluginul vă poate cere întâi să conectați site-ul la acest serviciu.
În setările Image Optimization porniți Optimize Original Images, Auto Request Cron, Auto Pull Cron și opțiunile pentru versiuni WebP (Create WebP Versions și Image WebP Replacement). Numele pot diferi puțin de la o versiune a pluginului la alta.
Pe pagina de rezumat apăsați Send Optimization Request. Pentru un site mare, procesul poate dura de la câteva minute la câteva ore.

Restul configurării pluginului: Cum activați și configurați LiteSpeed Cache.

Alte pluginuri (potrivite și pe Web Hosting SSD, cu Nginx și Apache)

Plugin	Unde se face optimizarea	De reținut
ShortPixel Image Optimizer	Pe serverele ShortPixel	Calitate foarte bună; gratuit până la o limită lunară; are optimizare în masă pentru biblioteca existentă
EWWW Image Optimizer	Pe găzduirea dvs.	Gratuit, WebP inclus; la biblioteci mari consumă resursele contului, deci rulați-l pe porțiuni
Smush	Pe serverele WPMU DEV	Poate redimensiona automat imaginile mari la încărcare; verificați ce funcții, de exemplu WebP, sunt incluse gratuit
Imagify	Pe serverele Imagify	Simplu de folosit; gratuit până la o limită lunară

Limitele versiunilor gratuite se schimbă des, așa că verificați-le pe pagina pluginului de pe wordpress.org.

Încărcarea întârziată (lazy load) este inclusă în WordPress: imaginile de mai jos în pagină se descarcă doar când vizitatorul ajunge la ele. Lăsați-o activă; pluginurile de cache o pot extinde.

Videoclipurile

Un clip de prezentare sau de fundal pus direct în pagină are frecvent între 3 și 30 MB și se descarcă la fiecare vizită, chiar dacă nimeni nu apasă Play. Soluția simplă este să îl publicați pe YouTube sau Vimeo și să îl inserați în pagină de acolo: se încarcă doar la pornire și la o calitate potrivită ecranului.

Dacă trebuie neapărat să rămână pe site:

Tăiați-l la secvența de care aveți nevoie.
Exportați-l la 1280 px lățime, sub 2-3 MB, fără sunet dacă este fundal.
Adăugați o imagine de previzualizare (poster), ca pagina să arate bine până pornește clipul.
Verificați că tema nu îl include de două ori, o dată pentru desktop și o dată pentru mobil.

Verificați rezultatul

Goliți cache-ul (în LiteSpeed Cache: Toolbox, apoi Purge All, sau butonul echivalent din pluginul dvs.) și repetați testul din PageSpeed Insights. Țintă: pagina întreagă sub 2-3 MB și nicio imagine peste 300-500 KB. Dacă pagina rămâne grea din cauza temei sau a unui constructor de pagini, deschideți un tichet cu adresa paginii și ne uităm împreună.

Întrebări frecvente

WordPress nu micșorează singur imaginile?

Creează copii mai mici ale fiecărei imagini, dar păstrează și originalul. O galerie de fotografii de 8 MB ocupă deci spațiu pe disc și în backupuri chiar dacă vizitatorii văd variantele reduse. Micșorarea înainte de încărcare rezolvă ambele probleme. Cum vedeți ce ocupă spațiul: spațiul pe disc în cPanel.

De ce nu pot încărca un logo SVG în WordPress?

WordPress nu permite implicit încărcarea fișierelor SVG, din motive de securitate. Folosiți un PNG cu fundal transparent sau activați SVG doar printr-un plugin de încredere, care curăță fișierul la încărcare.

Pot folosi două pluginuri de optimizare, ca să comprim mai mult?

Nu. Al doilea plugin nu aduce un câștig real și poate strica imaginile sau poate intra în conflict cu primul. Alegeți unul și dezactivați funcția de imagini din celelalte.