Salvarea imaginilor pentru web a fost întotdeauna un mister pentru mulți. Încărcarea imaginilor grele (dimensionarea originală a imaginii la lățimea de 5000px, imagini neoptimizate) nu numai că va crea probleme cu experiența utilizatorului pe site-ul dvs., dar va afecta și strategia dvs. SEO (viteza de încărcare, rata de respingere, clasamentul etc.).,acest articol este împărțit în mai multe părți care acoperă tot ce trebuie să știți despre cum să vă pregătiți imaginile pentru web. În prima parte a postării vom enumera dimensiunile de imagine recomandate pentru site-ul dvs. În continuare, articolul va acoperi modul de inspectare a diferitelor secțiuni de pe site-ul dvs. web pentru a identifica dimensiunile corecte pentru imaginile dvs. înainte de a le încărca pe web. De asemenea, vă vom explica cum să exportați / salvați corect imaginile, astfel încât acestea să fie optimizate pentru viteză.,
În cele din urmă, vom oferi câteva sfaturi SEO pentru imagini despre cum să vă titlați corect imaginile atunci când le salvați și de ce utilizarea etichetelor ALT vă va îmbunătăți SEO. Pentru imaginile deja încărcate pe site-ul dvs., vă vom arăta cum să identificați imaginile care sunt prea mari și încetinesc site-ul dvs. Să începem!
de ce sunt importante dimensiunile imaginilor și performanța site-ului? imaginile neoptimizate încetinesc site-urile web. Site-uri web lente = experiență proastă a utilizatorilor, șanse mai mici de a se clasifica în căutările Google și, în cele din urmă, mai puține întrebări și clienți., Salvarea imaginilor cu dimensiuni adecvate și optimizarea imaginilor pentru web vă poate ajuta cu câteva lucruri:
viteză-conform unei cercetări efectuate de Google, dacă o pagină web se încarcă în mai mult de 5 secunde, probabilitatea ca un utilizator mobil să părăsească acea pagină crește cu 90%. Prin redimensionarea și reducerea dimensiunilor imaginii, faceți paginile site-ului dvs. mai rapide.
experiența utilizatorului-imagini de bună calitate, de impact, ajută vizitatorii să aibă o experiență mai captivantă în timp ce navighează pe site-ul dvs. web., Prin menținerea acestor imagini optimizate și încărcarea rapidă-Asigurați o experiență perfectă și lină pentru vizitatorii dvs., ceea ce îi motivează să petreacă mai mult timp pe site-ul dvs. și să vă exploreze conținutul.
SEO ranking – viteza site-ului este un factor de clasare. Cu cât este mai rapid site-ul dvs., cu atât mai bine puteți rang potențial. Paginile web cu imagini optimizate se vor încărca mult mai repede atât pe desktop, cât și pe dispozitivele mobile.
vânzări-timpii de încărcare mai rapizi și un SEO mai bun vă pot ajuta să aduceți mai mulți utilizatori pe site-ul dvs., ceea ce crește șansele de a fi întrebat și rezervat.,Notă: Când vorbim despre dimensiunea imaginii ne referim la dimensiunea imaginii în pixeli.
care sunt cele mai bune imagini de dimensiuni pentru web și Flothemes?
când încărcați imagini pe web, există o serie de lucruri de luat în considerare, cum ar fi pentru ce este utilizată imaginea, cât de mare ar trebui să fie fișierul și ce tip de imagine ar trebui să fie utilizată pentru diferite zone de pe site-ul dvs.,există diferite cazuri în care veți dori să utilizați diferite dimensiuni de imagine pentru diferite zone ale site-ului dvs., mai jos voi acoperi zonele cele mai comune și opțiunile de dimensionare pe care le puteți utiliza pentru fiecare. Rețineți că acestea sunt recomandate, retina friendly, dimensionarea opțiuni având în vedere că majoritatea utilizatorilor vizualiza site-ul pe un dispozitiv care este mobil sau 13-15 inch dimensiune medie. Cu toate acestea, dacă doriți să faceți site-ul să arate excelent pentru monitorul dvs. de 27 inch (care are o rezoluție foarte mare), rețineți că este posibil să nu fie ceea ce utilizează potențialii dvs. clienți.,
Dacă vrei să fii mai precis modul în care utilizatorii vizualizează site-ul și de portofoliu, puteți verifica dispozitive folosite pentru a accesa site-ul prin Google Analytics (du-te la Publicul – Tehnologie – Browser-ul & OS – rezoluție a Ecranului), și ajusta dimensiunea recomandată pentru a se potrivi proporția necesară de utilizator mediu.
imagini Full Width
2400x1600px, jpeg, salvate pentru web și optimizate
pe site este posibil să aveți secțiuni în care trebuie să utilizați imagini full width care acoperă întregul ecran de la stânga la dreapta., Aceste zone pot fi imagini erou, slideshow-uri pe ecran complet, imagini banner. Pentru a vă asigura că imaginile dvs. cu lățime completă arată bine pe orice dispozitiv mare sau mic, dimensiunea recomandată este de 2400x1600px. Rețineți că dispozitivele au un raport diferit de cel pe care îl fotografiați și este posibil ca imaginile dvs. să fie decupate atunci când sunt vizualizate pe web. Ca recomandare, încercați să fotografiați fotografii mai largi decât de obicei pentru conținutul dvs. web, pentru a evita decuparea conținutului important al imaginii.,
în Interiorul Imagini de Conținut
Orizontal – latime max 1500px, jpeg, salvate pentru web, și optimizat Vertical – latime max 1000px, jpeg, salvate pentru web, și optimizat
Pe paginile site-ului, nu va fi secțiuni compuse din imagini, zone de text, apel la butoane de acțiune, etc. Practic, acestea sunt secțiunile în care imaginile fac parte din conținutul interior (citit ca „nu full—width”)., În aceste cazuri, cu excepția cazului în care dimensionarea recomandată este specificată ca unele dintre blocurile noastre Flothemes, puteți urma recomandările de mai sus pentru imagini orizontale și verticale. Pe baza raportului dvs., înălțimea se va ajusta corespunzător atunci când salvați imaginile.,show galerii: asigurați-vă că acestea sunt toate de aceeași înălțime recomandat 1500px, indiferent dacă acestea sunt orizontale sau verticale
Blog Imagini
dacă vă pregătiți imagini pentru a încărca în interiorul un blogpost, asigurați-vă că acestea sunt toate de aceeași lățime, recomandat 1500px, indiferent dacă acestea sunt orizontale sau verticale
Imagini
Exista 3 tipuri de imagini prezentate: portret, peisaj și imagini erou., Dimensionarea imaginii portret și peisaj urmează aceeași recomandare ca și în interiorul imagini de conținut, în timp ce dimensiunea recomandată pentru imagini erou este acoperit sub imagini lățime completă. Cheia pentru a avea imagini bune recomandate este coerența. Dacă doriți să utilizați toate Portret asigurați-vă că acestea sunt de aceeași dimensiune, același lucru este valabil pentru peisaj și imagini erou. Dacă utilizați o grilă de zidărie, dimensionarea de mai sus nu este atât de relevantă, asigurați-vă că imaginile au o lățime de cel puțin 1000px.,
Dacă aveți probleme cu dimensionarea imaginii, asigurați-vă că aruncați o privire la opțiunile de dimensionare a imaginii din setările Flothemes pentru a vă asigura că sunt configurate corect.
moduri de a afla dimensiunile corecte ale imaginii pentru web-ul dvs.
este posibil ca dimensiunile recomandate de mai sus să nu corespundă nevoilor dvs. din cauza unui aspect specific. Dacă nu sunteți sigur de dimensiunea corectă a imaginii, din fericire, există câteva modalități care vă pot ajuta să inspectați cu ușurință imaginile site-ului dvs. web și să identificați dimensionarea corectă necesară pentru fiecare element de pe site-ul dvs.,un lucru important de reținut este că pentru dispozitivele retina, trebuie să dublați densitatea pixelilor imaginii. Asta înseamnă că aveți nevoie de imagini de două ori mai mari pentru dispozitivele retina, astfel încât acestea să arate frumos și clare. Deci, odată ce ați găsit dimensiunile corecte ale imaginii pentru fiecare secțiune de pe site-ul dvs., veți dori să dublați aceste dimensiuni și abia apoi să le exportați și să le încărcați pe site-ul dvs.
a., Utilizarea extensiei Info Dimensiune imagine
prima metodă de a găsi dimensiunile imaginii pentru site-ul dvs. este utilizarea extensiei Info Dimensiune imagine pentru Chrome (dacă nu utilizați Chrome pe computer, vă recomandăm să îl utilizați în timp ce creați site-ul dvs.). După ce ați instalat extensia, acest instrument vă va permite apoi să aflați dimensiunile imaginii fiecărui element de imagine de pe site-ul dvs.verificați imaginile de pe site-ul dvs., faceți note și apoi, cu aceste cunoștințe, veți putea să vă adaptați fotografiile exact pentru a se potrivi spațiilor așa cum sunt destinate în designul temei., Doar amintiți-vă, cu ecrane retina aveți nevoie de imagini pentru a fi de două ori mai mare decât spațiul destinat. Deci, dacă aveți un spațiu de imagine de 750x500px, pentru retina ar trebui să fie 1500x1000px atunci când încărcați pe WordPress (sau orice altă platformă).
De exemplu: când vom inspecta o imagine cu această extensie, acesta fiind afișat la 780x520px, dar este dimensiunea reală este 1560x1040px. Acest lucru se datorează faptului că folosim un ecran retina atunci când inspectăm imaginea. În acest caz, puteți utiliza dimensiunile dimensiuni pentru a alege dimensiunea imaginii.,pe un dispozitiv non-retina dimensiunile afișate și dimensiunile vor rămâne aceleași. În acest caz, dublați numerele și încărcați imagini la acea dimensiune.principala limitare a acestui instrument este că nu poate inspecta imaginile de fundal pentru dimensionare. Pe multe teme, imaginile de fundal sunt utilizate în locul elementelor HTML de imagine, deoarece sunt mai flexibile atunci când afișează imagini. Dacă nu puteți inspecta imaginile deoarece sunt imagini de fundal, puteți utiliza următoarea metodă pentru a examina dimensiunile imaginilor de pe site-ul dvs.
b., Folosind instrumentul Inspector
cu Chrome și Safari puteți utiliza, de asemenea, instrumentul developers inspector pentru a găsi dimensiuni de imagine pe site. Principiul va fi același ca înainte, inspectați diferitele elemente de pe site și notați dimensiunile. Dublați dimensiunile imaginii pentru dispozitivele retina și apoi încărcați-le în WordPress, odată ce au fost optimizate pentru web și intitulate corect pentru SEO.limitările acestei metode vor fi că, dacă site-ul utilizează unele elemente receptive setate în valori REM, imaginile pot fi reduse atunci când se utilizează inspectorul în aceeași fereastră., Dacă site-ul folosește și elemente responsive, acestea vor fi mai mari pe ecrane mai mari și mai mici pe altele. Cel mai bine este să utilizați un ecran mai mare atunci când verificați site-ul, astfel încât să puteți obține cea mai precisă dimensionare a imaginii. În orice caz, utilizarea acestei metode vă va oferi o indicație bună a dimensiunilor site-ului dvs. și vă va permite să abordați adăugarea de imagini pe site-ul dvs. web cu mai multă grijă.Chrome a încorporat instrumente pentru dezvoltatori, motiv pentru care este cel mai popular browser de pe web pentru dezvoltatori și designeri., Următoarele video explică modul în care puteți verifica imaginile de pe site-ul dvs. pentru a afla dimensiunile lor:
Firefox
Cu Firefox, la fel ca chrome, ei au construit un inspector instrument care vă permite să verificați imagini pentru site-ul tău.
Safari
Dacă utilizați Safari, puteți utiliza inspector instrument pentru a vedea dimensiunile de imagini. Verificați următorul ghid despre cum să activați Instrumentele pentru dezvoltatori.,
acum Puteți accesa diferite secțiuni din site-ul dvs. și puteți pregăti dimensiunile imaginii.
pentru galerii veți dori să vă uitați la înălțimea imaginilor, deoarece acestea sunt în general constrânse de înălțime (deci lățimea poate fi setată la auto).
pentru postările pe blog, veți dori să notați lățimea imaginilor dvs., deoarece acestea sunt constrânse de lățime (înălțimea poate fi automată).,pentru restul elementelor de pe site-ul dvs., ar trebui să utilizați metoda descrisă mai sus pentru a obține dimensiunile corecte și să le încărcați la dimensiuni optime pentru site-ul dvs.acum că știți ce dimensiuni aveți nevoie pentru toate elementele de pe site-ul dvs., vă vom explica cum să optimizați toate imaginile pentru dimensiune, adică în ceea ce privește dimensionarea datelor. Dimensiunea fișierului imaginilor dvs. este, de asemenea, foarte importantă pentru web. Încărcarea imaginilor umflate și grele pe site-ul dvs. web va afecta resursele serverului dvs., va încetini site-ul dvs. și, de fapt, va crea o experiență negativă a utilizatorului.,
optimizarea și salvarea imaginilor pentru web
există o serie de lucruri de luat în considerare la optimizarea și salvarea imaginilor pentru web. Ar trebui să luați în considerare ce tip de fișier să utilizați, JPG, PNG sau GIF în funcție de scop. Veți dori să etichetați imaginile corect în scopuri SEO și veți dori să le salvați în formatul de culoare Potrivit (sRGB pentru web).în funcție de scop, trebuie să salvați imagini într-unul din următoarele formate .jpg, .gif, sau .png. JPG va fi cel mai comun format atunci când salvați imagini pentru site-ul dvs. de portofoliu, acestea vor fi, de asemenea, cele mai ușoare Dimensiuni.,
pentru numele fișierelor, asigurați-vă că acestea sunt potrivite pentru fiecare imagine sau postare pe blog. Utilizați numai litere, numere, sublinieri și cratime. Încercați să utilizați numai litere în limba engleză. Caracterele din alte limbi, semne de întrebare, spații, semne de procente se pot încărca incorect sau pot provoca un comportament neașteptat în galeriile sau postările dvs. de blog.de exemplu, dacă tocmai ați făcut o nuntă boho în Biltmore Santa Barbara, etichetați imaginile, boho-wedding-biltmore-santa-barbara_0001.jpg acest lucru va fi mult mai prietenos cu SEO și ar putea oferi o clasare mai bună pentru site-ul dvs.,
optimizarea imaginilor în Lightroom
să recunoaștem, există o mulțime de setări diferite de ales și combinații nesfârșite de numere de introdus. Cu toate acestea, dacă știți deja formatul imaginii și dimensiunile necesare ale imaginii fișierului, este mult mai ușor.în Lightroom, puteți accesa dialogul de Export în 3 moduri:
evidențiați și exportați
Puteți evidenția / selecta orice fotografie din biblioteca Lightroom și faceți clic dreapta pe fotografie. Din meniul pop-up selectați opțiunea Export.,
Fișier și Export
Cea de-a doua cale este să mergeți la Fișier -> Export
Folosind comanda rapidă de la tastatură
Cel de-al treilea, și cel mai rapid mod este de a utiliza o comandă rapidă de la tastatură:
shift + command + E (⇧+⌘+E)
nu conteaza cum ajungi acolo. Oricare dintre acestea va funcționa, deci alegeți cea mai ușoară pentru a vă aminti.,
dialog Export Lightroom
acum că știți cum să exportați imaginile pentru web, vom acoperi cele 4 secțiuni și diferitele opțiuni de ales din dialogul Export Lightroom pentru a vă permite să exportați imagini optimizate pentru web.
1. Denumirea fișierului
fiecare export poate avea propriile setări de redenumire. Dacă respectați opțiunea implicită, imaginile dvs. vor avea același nume ca fișierele originale și vor fi salvate ca imagine JPEG., Cu toate acestea, vă recomandăm să bifați caseta „redenumiți în” și să alegeți unul dintre numeroasele șabloane de redenumire pe care Lightroom le oferă pentru a personaliza imaginile exportate. În denumirea fișierului, am redenumit numele fișierelor de imagine în „Custom Name – Sequence”, unde textul personalizat este strâns legat de titlul postării pe blog sau de cuvintele cheie ale postării pe blog.
2. În setările fișierului
asigură-te că formatul imaginii este setat la JPEG. Aceasta este opțiunea cea mai web-friendly. Calitatea dvs. nu trebuie să fie mai mică de 65., În mod normal, l-am setat la 75. Spațiul dvs. de culoare trebuie să fie sRGB. Acesta este spațiul de culoare utilizat de web, astfel încât acesta va face cele mai bune. Nu bifați caseta ” limitați Dimensiunea fișierului la:”. Bifarea acestei casete ar reduce semnificativ calitatea fișierului.pentru a rezuma, când salvați imagini, utilizați aceste setări:
75% calitate
.format jpeg (.png pentru logo-uri și icoane)
sRGB culori
3. Dimensionarea imaginii
bifați caseta redimensionați pentru a se potrivi și selectați Width & Height., În caseta W: H: specificați W (lățime în pixeli) la valoarea necesară (1500px pentru postări pe blog și 2880 pentru prezentări de diapozitive). Lăsând valoarea în h (înălțime) necompletată, va fi setată la dimensionarea automată.pentru galerii, puteți lăsa W ca gol, și setați H (înălțime) la 1500px, acest lucru ar trebui să fie optimă pentru cele mai multe teme.dimensiunile de mai sus sunt deja optimizate pentru dispozitivele retina.
4. Ascuțirea ieșirii
bifați caseta de lângă „ascuțiți pentru”și selectați suma la „mare”.acum Puteți exporta imaginile și puteți urma acest proces oricând exportați imagini.,
Setări de calitate a imaginii
în lumea de vis a unui fotograf, am exporta întotdeauna imagini la o calitate maximă. În realitate, aflăm că exporturile de calitate maximă nu sunt necesare. La dimensiunile web, diferențele de calitate sunt adesea greu de perceput, ceea ce înseamnă că putem reduce ușor calitatea, reducând semnificativ dimensiunea fișierului.
atâta timp cât imaginile nu sunt moi, clienții dvs. nu vor ști diferența dintre Ce fotografie ați făcut și imaginea afișată pe site-ul dvs.acest lucru este valabil și pentru culorile imaginilor., Ecranul tuturor este calibrat diferit, așa că îngrijorarea cu privire la mici variații de culoare între o imagine dintr-un browser și în instrumentul de editare ales este o pierdere de timp, cu excepția cazului în care strică calitatea imaginii.
la capătul superior al scalei de calitate, există randamente în scădere. Diferența de calitate percepută între o setare de calitate de 75% și 100% este greu de văzut, dar crește semnificativ dimensiunea fișierului.
Având în vedere rezultatele de mai sus, selectarea exportul de 65-75 de calitate., Se lovește echilibrul corect de calitate și dimensiunea optimă a fișierului imagine.acum este rândul tău să redenumești fișierele, să le exporți pentru web, să le salvezi pentru web și vei avea niște imagini foarte bine optimizate pentru web.
Bonus pas: optimizarea imaginilor înainte de a le încărca pe site-ul
acesta este ultimul pas care vă pot ajuta să drastic elimina excesul de date de imagini, și de a reduce dimensiunea fișierului – vorbim de instrumente, cum ar fi JPEGmini sau TinyJPG.aceste instrumente vă pot ajuta să vă optimizați în continuare imaginile., Alege una și imagini prin ea:
JPEGmini – această aplicație vă permite să comprimați imaginile și de a reduce dimensiunea de fișier fără nici un efect vizibil asupra calității imaginii. Dacă aveți versiunea Pro, există o extensie pentru Lightroom care va face acest lucru automat la export – un instrument foarte recomandat pentru orice fotograf.
TinyJPG sau TinyPNG – puteți rula imagini prin tinyJPG sau tinyPNG pentru a comprima imaginile continuare. Există 2 limitări, deși., Cu versiunea gratuită a acestui instrument, puteți comprima doar 20 de imagini simultan, iar Dimensiunea fișierului pe imagini ar trebui să fie sub 5 MB.acesta va fi ultimul pas în crearea de imagini web optimizate rapid pentru a menține viteza site-ului dvs. rapid, iar imaginile arată excelent!
Aflați mai multe citind acest ghid cuprinzător despre cum să optimizați imaginile pentru site-ul dvs.
Image SEO
acum, că aveți imaginile dimensionate, optimizate și încărcate pe site – ul dvs.-acum veți dori să adăugați etichete ALT! Acesta este ultimul pas în crearea de imagini optimizate în scopuri SEO., Eticheta ALT este ceea ce motoarele de căutare folosesc pentru a citi imagini. Fără ele, imaginile sunt destul de mult inexistente pe web.din fericire, cu WordPress poți intra în biblioteca ta media după încărcare și poți eticheta fiecare imagine., O mare plugin care vă va permite să faceți acest lucru rapid este WP Meta SEO, atunci când este adăugată puteți merge la WP Meta SEO > Imagine de Informare și adăuga Tag-uri ALT pentru imagini în cazul în care acesta nu este prezent, odată finalizat plugin-ul poate fi dezactivat:
de asemenea, Există mai multe plugin-uri care se va adăuga tag-uri alt automat. Rank Math este o soluție bună plugin pentru acest lucru, pur și simplu instalați-l și se va adăuga în mod automat tag-uri ALT la încărcare din descrierea imaginii, sau titlul.,citiți acest ghid SEO pentru a descoperi mai multe sfaturi și trucuri și asigurați-vă că beneficiați la maxim de imaginile dvs. în rezultatele căutării.
deci asta e oameni buni. Cei 3 pași pentru a avea imagini optimizate pentru site-ul dvs. web.începeți prin a afla dimensiunile imaginii, apoi salvați-le corect pentru web, Adăugați titluri corespunzătoare și optimizați dimensiunea acestora. În cele din urmă, adăugați etichete alt pentru a îmbunătăți SEO prin WordPress (ar trebui să fie posibil să adăugați etichete ALT în toate sistemele de gestionare a conținutului, să consultați documentația pentru a afla cum sau să contactați asistența).,dacă ați încărcat deja imagini pe site-ul dvs. și doriți să știți cum să le găsiți pe cele care încetinesc pagina dvs., consultați următorul videoclip. Instrumente precum GTMetrix sau Pingdom sau utilizarea consolei browserului vă vor permite cu ușurință să găsiți imagini prea mari pentru web.
Dacă doriți să aflați mai multe despre optimizarea site-ului pentru viteza, a verifica afară acest ghid util.
Leave a Reply