Doriți să încărcați imagini pe site-ul dvs. WordPress, dar nu sunteți sigur ce dimensiuni sau tipuri de fișiere ar trebui să aibă imaginile? Nu sunteți familiarizat cu procesul de redimensionare și comprimare a imaginilor pentru web? În acest articol, voi explica de ce este importantă utilizarea unei dimensiuni adecvate a imaginii pentru site-ul dvs. web, plus vă voi arăta cum să redimensionați și să comprimați imaginile folosind editorul foto gratuit GIMP.
De ce este importantă redimensionarea imaginilor site-ului dvs
Să începem cu de ce este atât de importantă redimensionarea imaginilor site-ului.
În conformitate cu WordPress.org, „dimensiunea fizică” generală a unei imagini joacă un rol important în performanța unei pagini de site web. „Dimensiunea fișierului [a unei imagini] dictează timpul necesar pentru a vă încărca pagina; cu cât dimensiunea fișierului este mai mare... cu atât [o pagină] va dura mai mult pentru încărcare.” Cu alte cuvinte, încărcarea unui fișier de dimensiune mare pe site-ul dvs. web va încetini performanța oricărei pagini la care adăugați conținut, de obicei afișând ca viteze mai mici de încărcare a paginii în datele de analiză ale site-ului dvs.
„Dimensiunea fișierului [a unei imagini] dictează timpul necesar pentru a vă încărca pagina; cu cât dimensiunea fișierului este mai mare... cu atât [o pagină] va dura mai mult pentru încărcare.”
-WordPress.org
Viteza de încărcare a paginii, denumită și simplu „viteza paginii,” este „cât de repede se încarcă conținutul paginii tale”, conform Site SEO Moz. Având pagini mai lente poate avea ca rezultat „rate de respingere”, care este o valoare de lux care reprezintă sesiunile în care un vizitator al site-ului părăsește site-ul dvs. după ce a vizualizat o singură pagină. Paginile mai lente pot reduce, de asemenea, timpul petrecut de vizitatori pe paginile site-ului dvs., deoarece oamenii pot deveni nerăbdători să aștepte ca conținutul unei pagini să se încarce și să părăsească site-ul mai repede.
Aceste valori sunt importante deoarece, de obicei, doriți ca utilizatorii să petreacă mai mult timp pe site-ul dvs. și să se uite la mai multe pagini de pe site.
Ele sunt, de asemenea, importante, deoarece joacă un rol în modul în care site-ul dvs. se clasează în paginile cu rezultate ale motoarelor de căutare sau „SERP-uri”. SERPs sunt pur și simplu paginile de rezultate care se afișează atunci când introduceți un cuvânt sau o expresie în Google și apăsați tasta Enter. Deoarece imaginile mai mari indică practicile proaste de design web și afectează negativ experiența utilizatorului pe site-ul dvs., motoarele de căutare precum Google pot penaliza site-ul dvs. pentru a avea aceste imagini mai mari și Clasează-ți site-ul web sub alte site-uri web care au performanțe mai bune.
Cu cât site-ul dvs. este clasat mai jos pe Google, de exemplu, cu atât site-ul dvs. primește mai puțin trafic și cu atât mai mult trafic va ajunge la concurenții dvs. care se clasează deasupra dvs. în rezultatele căutării.
Prin reducerea dimensiunii fișierului imaginilor dvs. de pe site-ul dvs. web, vă puteți îmbunătăți viteza paginii și astfel îmbunătățiți alte valori precum Rata de respingere și timpul de la page pentru a vă îmbunătăți în cele din urmă clasarea pe motoarele de căutare.
Rețineți că există multe alte variabile importante care intră în clasamentele de căutare, așa că repararea imaginilor dvs. este doar o parte a unui solid SEO (Search Engine Optimization) strategie. Cu toate acestea, este cu siguranță foarte important pentru a ajuta site-ul dvs. să se claseze mai sus în locuri precum Google pentru a ajuta la creșterea traficului site-ului dvs.
Cum să redimensionați imagini pentru WordPress în GIMP
Deci, cum redimensionați corect imaginile pentru WordPress?
Puteți reduce dimensiunea fișierului unei imagini pur și simplu reducând dimensiunea totală a imaginii folosind scalare și trunchiere înainte de a-l încărca pe site-ul dvs. web. În plus, puteți aplica ceea ce se numește „comprimare” la imaginea ta pentru a-i reduce și mai mult dimensiunea.
GIMP, editorul de fotografii gratuit și cu sursă deschisă, poate îndeplini toate aceste sarcini, exportând, de asemenea, în formatele de fișiere recomandate „de nouă generație”, pentru a reduce și mai mult dimensiunea fișierului imaginilor și pentru a îmbunătăți performanța site-ului.
Scalați-vă imaginea
Pentru a începe acest proces, deschideți imaginea pe care doriți să o încărcați pe site-ul dvs. în GIMP. Puteți face acest lucru trăgând și plasând imaginea dvs. de pe computer în fereastra de imagine a GIMP, sau puteți merge pur și simplu la Fișier> Deschide când sunteți în GIMP.
Dacă utilizați metoda Fișier> Deschideți, navigați la locația imaginii pe computer din interiorul casetei de dialog „Deschideți imaginea” care apare și faceți dublu clic pe fișierul imagine odată ce îl găsiți pentru a-l deschide în GIMP (sau faceți clic pe butonul „Deschide” din colțul din dreapta jos al ferestrei de dialog).
În partea de sus a ferestrei GIMP este o caracteristică numită „Bara de titlu” (săgeata roșie din imaginea de mai sus). Aici, veți vedea dimensiunile actuale ale imaginii dvs. (caseta verde mărită în fotografie). Imaginea mea este 1920×1280 – cu primul număr, 1920, reprezentând lățimea imaginii mele (în pixeli), iar al doilea număr, 1280, reprezentând înălțimea imaginii mele. Dimensiunile finale ale imaginii pe care veți dori să le utilizați pentru imaginea dvs. vor depinde de locul în care intenționați să utilizați imaginea în WordPress, precum și de tema pe care o utilizați.
Pentru acest tutorial, îmi voi redimensiona imaginea la dimensiunea standard de 1200×630 pixeli, care este recomandată pentru imaginile postărilor de blog.
Având în vedere acest lucru, primul lucru pe care voi vrea să-l fac este să-mi decupez imaginea, astfel încât raportul de aspect al imaginii mele originale să se potrivească cu raportul de aspect al dimensiunii recomandate. Pentru a face acest lucru, îmi voi lua instrumentul de decupare apăsând shift+c de pe tastatură sau făcând clic pe pictograma instrumentului de decupare din caseta de instrumente GIMP (săgeata roșie din imaginea de mai sus).
Apoi, în Opțiunile instrumentului pentru acest instrument, voi bifa caseta de lângă „Fixed” (săgeată verde) și voi face clic pe meniul drop-down pentru a selecta „Raport de aspect” (săgeată albastră).
Voi tasta „1200:630” pentru a-mi seta raportul de aspect în câmpul de text de sub meniul drop-down (săgeata galbenă). Aceasta se potrivește cu raportul de aspect al dimensiunii recomandate a imaginii pe care vreau să-mi fie imaginea finală.
Folosind instrumentul de decupare, acum voi face clic și voi trage mouse-ul peste imagine pentru a desena zona de decupare. Când eliberez mouse-ul, totul în afara zonei de decupare va fi estompat (săgeata roșie din imaginea de mai sus - presupunând că „Evidențiați” este bifat în Opțiunile instrumentului, ceea ce este de obicei implicit).
În mod implicit, zona mea de decupare are ghidajele setate ca „Linii centrale” (săgeata galbenă din imaginea de mai sus). Pot schimba această setare folosind meniul derulant al ghidurilor din partea de jos a Opțiunilor instrumentului. De exemplu, îmi voi schimba ghidurile în „Regula treimii” (săgeata verde). Diferitele opțiuni de ghid de aici se bazează pe principiile fotografiei, ceea ce facilitează încadrarea compoziției folosind aceste principii.
Puteți trece mouse-ul peste oricare dintre laturile sau colțurile zonei de decupare (adică zona evidențiată indicată de săgeata roșie din imaginea de mai sus), apoi faceți clic și trageți pentru a redimensiona limita zonei de decupare. Rețineți că puteți vedea oricând dimensiunea zonei de decupare în câmpurile „Dimensiune” situate în Opțiunile instrumentului (subliniate cu verde în imaginea de mai sus). Veți dori să păstrați dimensiunea totală a zonei de decupare mai mare decât dimensiunea finală de 1200×630 a imaginii.
De asemenea, puteți face clic și trage mouse-ul în mijlocul zonei de decupare (săgeată roșie) pentru a repoziționa decuparea pe imagine.
După ce sunteți gata să decupați imaginea, faceți clic o dată în interiorul zonei de decupare și imaginea dvs. va fi decupată.
Rețineți că, dacă opțiunea „Ștergeți pixelii tăiați” din Opțiunile instrumentului este debifată (săgeata verde în imaginea de mai sus), limita imaginii inițiale se va afișa în continuare în jurul imaginii printr-o linie punctată galbenă (săgeată roșie). Puteți restabili imaginea originală, anulând astfel decuparea, mergând la Imagine>Fit Canvas to Layers. Doar zona imaginii dvs. din interiorul limitei pânzei va fi exportată.
Imaginea noastră este acum decupată la raportul de aspect pe care îl dorim, dar dacă vă uitați din nou la dimensiunile imaginii noastre în „Bara de titlu”, veți vedea că imaginea este 1532×804 (conturată în verde și mărită în fotografia de mai sus – dimensiunile dvs. vor fi probabil ușor diferite în funcție de cât de mare ați desenat zona de decupare pe imagine). Va trebui acum să ne scalam imaginea pentru a se potrivi cu dimensiunile dorite.
Pentru a face acest lucru, accesați Imagine>Scale Image (săgeată roșie).
În caseta „Scale Image” care apare, sub „Image Size”, asigurați-vă că pictograma lanțului de lângă casetele „lățime” și „înălțime” este legată (săgeata roșie din fotografia de mai sus). Apoi, modificați „Lățimea” imaginii la 1200 (săgeată verde). Apăsați tasta Tab. Înălțimea imaginii se va actualiza automat la „630”. Sub „Calitate”, asigurați-vă că meniul drop-down „Interpolare” (săgeată albastră) este setat fie la „NoHalo”, fie la „LoHalo” pentru cea mai bună calitate a imaginii după scalare. (Pentru mai multe informații despre interpolare, vezi tutorialul meu pe acest subiect).
Apăsați butonul „Scale” pentru a vă scala imaginea (săgeata galbenă).
Odată ce scalarea este completă, verificați dimensiunile imaginii în bara de titlu. Ar trebui să vedeți acum o dimensiune a imaginii de 1200×630 – dimensiunea exactă pe care o dorim! Deci ce facem acum?
Comprimați-vă imaginea exportând pe WebP
Decuparea și scalarea imaginii a redus dimensiunea fișierului prin reducerea înălțimii imaginii de la 1920 la 1200 pixeli și a lățimii de la 1280 la 630 pixeli, dar putem reduce dimensiunea imaginii și mai mult prin aplicarea compresiei atunci când exportăm imaginea.
Deci, acum trebuie să exportăm imaginea într-un format de fișier care va aplica compresie imaginii fără a reduce semnificativ calitatea imaginii. Deși JPEG-urile sunt întotdeauna o opțiune bună, există acum o opțiune și mai bună: WebP.
Formatul WebP aplică mai multă compresie decât JPEG, afectând în același timp calitatea imaginii mai puțin decât o face un JPEG. Cu alte cuvinte, veți obține o imagine mai frumoasă cu o dimensiune mai mică a fișierului. În plus, formatele WebP sunt acceptate de toate cele mai bune 5 browsere web.
Pentru a exporta pe WebP, accesați Fișier>Exportați ca (săgeată roșie).
Faceți clic pe oricare dintre dosarele din secțiunea „Locații” (subliniat în verde) pentru a alege imaginea de pe computer în care doriți să vă salvați imaginea. Puteți pur și simplu să faceți dublu clic pe un dosar pentru a-l introduce și să vedeți în ce folder vă aflați lângă titlul „Salvare în dosar” (săgeată roșie). Apoi, redenumiți imaginea în ceea ce doriți - asigurați-vă că terminați numele imaginii cu extensia „.webp” (săgeată albastră) pentru a exporta imaginea în format WebP. Când sunteți gata, faceți clic pe „Exportați” în colțul din dreapta jos al ferestrei (săgeata galbenă).
Apoi, va apărea dialogul „Exportați imaginea ca WebP”. Asigurați-vă că „Lossless” este debifat (săgeată roșie). De obicei, am setat „Calitatea imaginii” la 80 (săgeata albastră – acesta este un procent, deci cu cât procentul este mai mic, cu atât calitatea imaginii va fi mai mică, dar cu atât dimensiunea fișierului de imagine va fi mai mică). Dacă imaginea dvs. nu conține transparență (adică un logo fără fundal), nu trebuie să vă faceți griji cu privire la glisorul „calitate alfa” (de fapt, într-un experiment pe care l-am efectuat, scăzând calitatea alfa de la 100 la 90 de fapt ușor). a crescut dimensiunea fișierului unei imagini cu fundal transparent de la 8.50 kb la 8.52 kb). Meniul drop-down „Tipul sursă” îl puteți menține setat la „Implicit”.
Dacă doriți sau nu să verificați sau să debifați oricare dintre opțiunile de metadate, inclusiv datele Exif, datele ITPC și datele XMP, depinde de dvs. Datele Exif și XMP sunt metadate atribuite de obicei de camera dvs. care descriu informații despre fotografia dvs., cum ar fi ce model de cameră a fost folosit sau ce tip de obiectiv a fost folosit. ITPC, pe de altă parte, este folosit de membrii presei și atribuie informații imaginii tale, cum ar fi proprietatea, drepturile și licențele. Dacă nu sunteți sigur ce să faceți, lăsați bifate aceste opțiuni.
De asemenea, este bine să lăsați opțiunea „Salvare profil de culoare” nebifată, deoarece majoritatea browserelor vor folosi automat spațiul de culoare sRGB pentru a vă afișa imaginea, ceea ce folosește GIMP. Dacă utilizați un alt profil de culoare, veți dori să lăsați această bifată. De asemenea, dacă vă faceți griji că imaginea nu este afișată corect pentru anumite browsere, dacă o lăsați bifată, adăugați doar câțiva kb la dimensiunea totală a imaginii.
În cele din urmă, opțiunea „Salvare miniatură” poate rămâne nebifată, ceea ce ne va economisi și mai mult câțiva kilobytes.
Faceți clic pe „Export” (săgeata galbenă din imaginea de mai sus) pentru a exporta imaginea în format WebP. Când comparăm fișierul WebP exportat cu un fișier JPEG care are aceeași dimensiune și are calitatea setată la „80”, imaginea WebP are o dimensiune de aproximativ 30 kb sau aproximativ 25%, mai mică decât JPEG.
Acum puteți să vă conectați la site-ul dvs. WordPress și să navigați la pagina sau postarea în care doriți să încărcați imaginea sau pur și simplu să navigați la secțiunea „Media” folosind navigarea principală și să trageți și să plasați imaginea în Biblioteca Media. În cazul meu, voi naviga la „Postează” folosind navigarea principală (săgeata roșie din imaginea de mai sus) și voi face clic pe „Postarea blogului 1” (săgeată albastră) pentru a edita articolul respectiv.
Apoi voi deschide bara laterală Setări postare (săgeată roșie) și voi derula în jos la secțiunea „Imagine recomandată” și voi extinde această secțiune (săgeată albastră). Apoi, voi face clic pe imagine pentru a o înlocui cu noua mea imagine.
Voi naviga la fila „Încărcare fișiere” (săgeată roșie) și îmi pot trage și plasa imaginea de pe computer în WordPress (săgeți albastre).
În cele din urmă, voi face clic pe „Setați imaginea recomandată” pentru a aplica această modificare (săgeată roșie).
Faceți clic pe „Actualizare” (săgeată roșie) pentru a vă actualiza pagina cu noua imagine prezentată.
Dacă dau clic pe „Vizualizați postarea” (săgeată albastră)...
…veți vedea acum noua imagine prezentată afișată în partea de sus a blogului meu.
Asta e pentru acest tutorial! Dacă doriți să aflați mai multe despre proiectarea unui site web WordPress, vă recomand să consultați mine Curs WordPress 6.0 pentru non-codatori! Sau, dacă doriți să aflați mai multe despre GIMP, consultați-mi GIMP 2.10 Masterclass pe Udemy!
