Imaginați-vă: faceți site-ul dvs. să piardă în greutate prin comprimarea imaginilor sale

Știți ce durează cel mai mult timp pentru a încărca pe o pagină ?

Acestea nu sunt nici fișiere CSS, nici fișiere JavaScript.

Acestea sunt imaginile.

De multe ori încercăm să optimizăm viteza site-ului nostru prin optimizarea codului (așa cum am văzut cu fișierul .htaccess), dar este posibil să realizăm acest lucru fără prea multe probleme.

Înainte să vă povestesc despre pluginul WordPress pe care îl folosesc pentru a reduce în mod semnificativ greutatea imaginilor Marmite, aș dori să vă trimit ...

3 obiceiuri bune de adoptat cu imagini

Când gestionați site-uri, este important să vă gândiți întotdeauna la vizitatori. În cazul meu, încerc mereu să fac ceea ce este mai bine pentru tine.

De exemplu, în loc să vă vorbesc direct despre un plugin sau altceva, vreau să vă trimit informații pe care le veți găsi utile în viitor.

Durează puțin mai mult, dar știu că, pe termen lung, asta va face diferența 😉

Haide, nu mai vorbești. Să trecem la aceste 3 sfaturi !

1. Nu trimiteți imagini supradimensionate

Fie că sunteți sau nu fotograf, fișierele create de o cameră digitală sunt foarte mari astăzi.

Pot cântări de la 4 la 8 MB, uneori mai mult! Totul depinde de setările dvs.

Este minunat să le tipăriți sau să le editați pe computer.

Pe de altă parte, pentru a le distribui pe web, este imediat mai enervant.

Într-adevăr, dacă o pagină trebuie să încarce zece imagini de 8 MB, vizitatorii dvs. ar beneficia de conectarea la fibra optică ...

Cel mai bun lucru de făcut este să redimensionați imaginile înainte de a le încărca pe site-ul dvs. Lățimea de 2000 de pixeli este mai mult decât suficientă.

Orice editor de imagini poate face acest lucru, dar pe termen lung poate deveni obositor.

Pe Marmite, imaginile au întotdeauna o lățime de 600 de pixeli în articole (nu este nevoie de o lățime de 2000 de pixeli). Deci, folosesc următorul cod pentru ca WordPress să redimensioneze automat imaginile încărcate:

A doua parte a codului vă permite să adăugați imaginea generată la lista dimensiunilor disponibile:

Această mică bucată de cod nu mănâncă pâine, dar vă va economisi câteva secunde prețioase, cu siguranță 😉

Alegeți formatul de fișier potrivit

Probabil că sunteți familiarizați cu cele două formate principale de imagine disponibile astăzi:

Știi în ce fel diferă? Este un pic tehnic, dar este modul în care sunt codate.

Practic modul în care imaginile sunt salvate în fișier.

Această discrepanță înseamnă că unele vor fi mai ușoare în JPG decât în PNG și invers.

Pentru a vă ajuta să alegeți cel mai bun format, amintiți-vă că:

JPG = Fotografii, imagini cu mii de culori sau nuanțe de gri
PNG = Diagrame, imagini simple, sigle sau imagini cu transparență

Puteți afla mai multe despre formatele de imagine cu acest infografic găsit la Korben.

Pentru a vă convinge, convertiți o fotografie făcută cu telefonul, convertiți-o în PNG și uitați-vă la greutatea acesteia.

Comprimă imaginile înainte de a le trimite

Înainte de a trimite imagini pe un site, am întotdeauna grijă să le comprim.

De exemplu, după ce am retușat unul în Photoshop, folosesc întotdeauna Fișier> Salvare pentru web pentru a găsi cel mai bun compromis între greutate și calitate:

Treceți la modul 2 miniaturi și priviți greutatea finală din partea stângă jos. Puteți juca cu formatele și setările din dreapta sus (și, eventual, cu dimensiunea din dreapta jos).

Este evident că nu trebuie să degradezi calitatea prea mult, altfel redarea va fi oribilă.

Dacă sunteți pe Mac, vă recomand utilitarul ImageOptim pentru a comprima mai mult fără a pierde calitatea.

Atât pentru sfaturile de bază. in orice caz, îmi veți spune că acest lucru poate fi destul de restrictiv pe termen lung.

Și vei avea dreptate !

De asemenea, cum să faceți față fișierelor deja aflate în biblioteca dvs. media ?

Aici intervine ...

Imaginați-vă, serviciul care vă va comprima imaginile ca niciodată

Dacă te-ai săturat să faci manipulări tot timpul, îți va plăcea restul acestui articol. Puteți face chiar și fără cele 3 sfaturi menționate mai sus !

Într-adevăr, echipa din spatele pluginului cache WP Rocket a lansat un nou serviciu numit Imagify.

Când vă gândiți la acest lucru, acest serviciu este continuarea logică a WP Rocket. În loc să integreze compresia imaginii, au preferat să dezvolte un serviciu online (Saas).

Acest lucru are avantajul de a putea fi utilizat de orice tip de site (și chiar manual).

Așa că o să-mi spui că acest lucru există deja. Putem cita TinyPng, WP Smush sau Kraken.

Ai absolut dreptate, dar nu de aceea nu ar trebui să mergi pentru asta. Există întotdeauna lucruri de îmbunătățit.

Cel mai puțin putem spune că s-au descurcat bine, deoarece conform acestui test publicat în decembrie 2015, Imagify este numit cel mai bun serviciu de compresie a imaginii.

Îmi amintește de un anumit plugin cache 😉

Cum funcționează Imagify

V-am spus mai devreme, Imagify este un serviciu. Adică, nu este disponibil doar ca supliment. Deci, oricine îl poate folosi.

Serviciu online

Pentru a-l utiliza, accesați Imagify pentru a începe imediat. Cu toate acestea, vă sfătuiesc să creați un cont gratuit pentru a beneficia de mai multe funcții.

Odată ajuns pe site, nu trebuie decât să alegeți un mod de compresie, apoi să glisați și să fixați imaginile în zona din dreapta.

Pentru testul meu, puteți vedea că câștigul de compresie este:

1,16% în modul normal
18,49% în modul agresiv
33,76% în modul ultra

În urma optimizării, nu mai rămâne decât să le descărcați făcând clic pe butonul „Descărcați” din dreapta. De asemenea, le puteți prelua pe toate într-un fișier .zip făcând clic pe „Descărcați toate fișierele optimizate”.

Rețineți că, cu un cont gratuit, imaginile dvs. vor fi păstrate doar 24 de ore (spre deosebire de 1 oră fără cont).

Pluginul WordPress gratuit

Dacă doriți ca compresia imaginii să fie automatizată, va trebui să optați pentru extensie.

Asa de, toate imaginile trimise pe site-ul dvs. vor fi comprimate din mers, adică de îndată ce sunt puse online.

Aceasta este o economie de timp semnificativă, deoarece nu va mai fi nevoie să ne ocupăm de toate sarcinile plictisitoare despre care am vorbit anterior.

Cu un cont gratuit, veți avea dreptul la 25 MB de comprimare pe lună. Dacă faceți blog din când în când, va fi mai mult decât suficient.

Pentru a avea instalate alte două pluginuri similare, vă pot spune că a începe este mult mai ușor cu Imagify (pluginul este și în franceză).

Ceea ce îmi place la această extensie este că suntem ghidați pas cu pas (ca pe WP Rocket):

Va trebui să creați un cont și să introduceți cheia API (prin meniul API) pentru a conecta pluginul la contul dvs.

Să vedem cum arată setările:

Opțiunile disponibile sunt destul de simple. Tu vei fi capabil:

Alegeți puterea de compresie (Normal, Agresiv sau Ultra)
Activați optimizarea automată (lăsați bifat)
Păstrați imaginile originale (de asemenea, lăsați bifat)
Redimensionați automat imaginile care sunt prea mari (2000 de pixeli vor fi bine, dar puteți pune mai puțin în funcție de site-ul dvs.)
Păstrați datele EXIF, adică data fotografiei, camera utilizată și alte informații (cu excepția cazurilor excepționale, nu bifați această casetă)
Selectați dimensiunile imaginii de comprimat
Ascundeți meniul Imagificați în bara de instrumente

În ceea ce privește dimensiunile imaginii de verificat, selectați miniatură, medie, medie_mărită și mare în plus față de dimensiunile de care aveți nevoie.

Chiar dacă consumă credit de compresie, WordPress va putea încărca aceste imagini pe ecrane mici.

Acum să aruncăm o privire la modul de optimizare în bloc. Această funcționalitate face posibilă procesarea tuturor imaginilor prezente pe site-ul său.

Accesați Media> Optimizare în bloc pentru a vizualiza următoarea pagină:

În cazul WPMarmite, putem vedea că greutatea imaginilor a fost împărțită la 2 !

Cred că rezultatul ar fi putut fi chiar mai bun dacă fișierele mele nu ar fi fost optimizate anterior înainte de trimitere.

În ceea ce privește utilizarea, din nou este destul de simplu. Selectați un mod de compresie și faceți clic pe „Imagif'em all” (adică Imaginați-le pe toate).

Puteți vedea că „a imagina” a devenit chiar un verb !

Dacă vreți vreodată să optimizați imaginile de la caz la caz, accesați biblioteca media pentru a găsi o coloană Imagificați.

Datorită acestuia, veți găsi statisticile de compresie ale fiecărei imagini, le puteți optimiza în alte moduri sau puteți restabili imaginea originală (dacă ați bifat opțiunea din setări, desigur).

Acum, să răspundem la întrebarea pe care probabil ți-o pui.

Cât costă Imagify ?

Până acum v-am spus că 25 MB de compresie vă sunt oferite în fiecare lună.

Acest lucru este minunat atunci când aveți un blog mic, dar dacă aveți nevoie de mai multe resurse, ar trebui să optați pentru una dintre ofertele lor. Iată-le în detaliu:

După cum puteți vedea, acestea sunt abonamente lunare (este posibil să plătiți anual pentru a primi două luni gratuit).

Dacă planul de abonament nu corespunde nevoilor dvs., puteți achiziționa credite de 250 MB (3,49 USD), 500 MB (5,99 USD) sau 1 GB (9,99 USD).

Aceste oferte unice sunt excelente dacă aveți o mulțime de imagini de procesat în biblioteca dvs. media. Pentru a le găsi, accesați această pagină odată ce ați creat contul gratuit.