Optimizați greutatea și dimensiunea imaginilor pentru WordPress

Postat pe 23 ianuarie 2014

optimizați

Actualizat la 4 ianuarie 2019

rezumat

  • 1 De ce să optimizați imaginile pentru WEB ?

  • 2 Reduceți greutatea și dimensiunea imaginilor cu GIMP
    • 2.1 GIMP
      • 2.1.1 Redimensionați o imagine
      • 2.1.2 Comprimă o imagine
  • 3 Cum funcționează biblioteca WordPress
  • 4 pluginuri Wordpress în plus ... și pentru a procesa imaginile deja trimise
    • 4.1 Nebunie
    • 4.2 WP Smush.it
  • 5. Concluzie

De ce să optimizăm imaginile pentru WEB ?

O imagine prea grea afectează puternic viteza de încărcare a unei pagini WordPress, iar acesta este un criteriu important luat în considerare de motoarele de căutare. O pagină care este prea lungă pentru a fi încărcată nu numai că va descuraja utilizatorii de internet, ci și păianjenii (roboții care vă scanează paginile pentru a le indexa în SERP) și veți fi penalizați în ceea ce privește SEO.

Cele mai utilizate trei formate de imagine pentru web sunt:

- PNG: recomandat de W3C, acest format gestionează transparența. Cu toate acestea un pic greu.

- JPEG: acest format este utilizat pentru a comprima imaginea cu pierderi de calitate. Deci mai ușor, dar în detrimentul calității și transparenței.

- GIF: mai puțin utilizat decât cele două precedente, acest format acceptă totuși animația.

Reduceți greutatea și dimensiunea imaginilor cu GIMP

Acest lucru este extrem de important dacă utilizați o temă de fotograf WordPress care are nevoie de fotografii de fundal mari.

Rezoluția unei imagini destinate webului nu trebuie să fie foarte mare. Lățimea de 1024 px este un maxim pentru a obține o calitate bună pe Internet. Reducerea dimensiunii fotografiilor vă permite, de asemenea, să le protejați, deoarece o imagine de această dimensiune nu este de vânzare. Prin urmare, există o simplă manipulare de efectuat înainte de orice integrare a imaginii pe site-ul dvs. web.

Recomand GIMP să vă proceseze imaginile. Gimp este un instrument open source de editare a imaginilor, deci gratuit, care vă va permite să reduceți dimensiunea, dar și calitatea imaginilor.

Redimensionați o imagine

Odată ce GIMP este instalat, deschideți o imagine, apoi faceți clic pe Imagine în meniul de sus, apoi pe Scara și dimensiunea imaginii.

Modificați doar lățimea imaginii, apoi faceți clic pe șirul care înseamnă să scalați, pentru a menține proporțiile.

Comprimă o imagine

Apoi faceți clic pe Fișier> Export, încă în meniul de sus.

  1. Începeți prin redenumirea imaginii
  2. Faceți clic pe Selectare tip de fișier
  3. De preferință, alegeți JPEG (mai ușor), PNG (esențial pentru transparență, dar mai greu) sau GIF pentru o imagine animată.
  4. Apoi puteți alege să exportați un PNG în JPEG, care este în continuare cel mai bun mod de a reduce greutatea unei imagini PNG dacă nu aveți nevoie de transparență.
  5. Faceți clic pe export
  6. Specificați un nivel maxim de compresie (9)
  7. Faceți clic pe Export
  8. Imaginea dvs. optimizată este salvată, acum o puteți insera în articolul dvs. cu WordPress

NB: Când alegeți să exportați în format JPEG, fereastra de compresie a unui fișier este mai avansată, printre altele, adăugând o opțiune de previzualizare de calitate:

Cum funcționează biblioteca WordPress

Prin urmare, idealul este să trimiteți o imagine la biblioteca WordPress cu dimensiunile dorite. Încă cu ideea de a accelera viteza de încărcare a imaginilor, WordPress va crea automat 4 exemplare: miniatură, dimensiune medie, dimensiune mare și original. Iata de ce:

Tema dvs. poate, în unele cazuri, să aibă nevoie de o miniatură a imaginii trimise, în special pentru imaginea prezentată, miniatura etc. De aceea WordPress generează 4 imagini cu dimensiunile definite în fila Setări> Media din tabloul de bord. Deoarece miniaturile există deja în formatul necesar, acest lucru împiedică Wordpress să le redimensioneze din mers de fiecare dată când pagina este încărcată.

Când inserați o imagine într-un articol, aveți de asemenea posibilitatea de a alege între aceste 4 dimensiuni, deci dacă doriți să inserați aceeași imagine a doua oară la o dimensiune mai mică, puteți utiliza și unul dintre aceste formate predefinite.

NB: Dacă dimensiunea imaginii pe care o încărcați în biblioteca WordPress este mai mică decât formatul „Dimensiune mare” definit în setările WordPress, acest format nu va fi creat. Imaginile pe care le trimiteți nu pot fi mărite de WordPress, calitatea ar fi prea rea. Vor fi generate numai dimensiuni mai mici decât originalul.

În plus, pluginuri WordPress ... și pentru a procesa imaginile deja trimise

Pentru a vă ușura munca, au fost dezvoltate pluginuri pentru a vă optimiza automat imaginile. Avantajul imens este că procesează imaginile deja prezente. Unii dintre voi au deja mii de imagini neoptimizate în biblioteca dvs.

Avertizare ! Este recomandabil să faceți o copie de rezervă a directorului/wp-content/uploads/înainte de a instala următoarele plugin-uri, în cazul în care lucrurile nu merg bine. Unele acțiuni sunt ireversibile fără backup !

Nebunie

Pluginul WordPress Imsanity vă permite să redimensionați imaginile care sunt prea mari până la o lățime de maximum 1024 px. Este posibil să fi încărcat imagini la dimensiuni exagerate, cum ar fi 3000px lățime pentru 2000px înălțime. Trebuie doar să setați o dimensiune maximă, 1024 px maximă în mod implicit, iar toate imaginile mai mari de 1024 px sunt redimensionate automat și să păstreze același nume de fișier.

Imsanity permite, de asemenea, reducerea automată a calității JPG la nivelul dorit și conversia formatelor BMP în JPG.

Toate imaginile viitoare cu o rezoluție care depășește 1024 px în lățime vor fi redimensionate la trimitere.

Cu toate acestea, nu procesează formate PNG în calitate, ci doar în dimensiune. Veți avea nevoie de următorul plugin pentru a procesa formatele PNG:

WP Smush.it

WP Smush.it comprimă toate imaginile deja prezente în biblioteca WordPress, apoi automat orice imagine nouă atunci când este încărcată fără a pierde calitatea. Iată cum o face:

  • Eliminarea metadatelor din fișierele JPEG
  • Optimizare compresie JPEG
  • Conversia unor fișiere GIF în PNG
  • Eliminarea culorilor neutilizate

Aceasta înseamnă că, după procesarea imaginilor dvs. cu GIMP, WP Smush.it va salva în continuare câțiva KB.

Limitele de utilizare a API-ului Yahoo Smush.it:

  1. Imaginea trebuie să fie mai mică de 1 MB, altfel nu va fi procesată. (Nicio problemă pe care ați mai folosit-o GIMP.)
  2. Imaginea trebuie să fie accesibilă printr-o adresă URL non-HTTPS
  3. Acest plugin nu poate comprima imaginile stocate pe un CDN (un alt server decât cel pe care este instalat WordPress)

Concluzie

Și da, funcționează și nu este terminat ... acest articol se ocupă cu optimizarea greutății și dimensiunii imaginilor de dragul performanței, dar rămâne să faceți referire corectă a imaginilor completând etichetele Titlu și alt. Dar acesta va face obiectul unui viitor articol. Și nu uitați, o imagine merită o mie de cuvinte.