Nu-i așa că vă plac imaginile?

Imaginile pot transforma un text într-o experiență captivantă în timp ce citiți. Imaginile îmbunătățesc o postare pe blog, o fac mai ușor de partajat și stabilesc tonul și marca întregului dvs. site.

Și știi ce? Suntem programați să răspundem la imagini. De aceea, încorporarea imaginilor în conținutul tău este un instrument puternic de utilizat atunci când îți promovezi blogul.

Dar, dacă nu sunteți atent, imaginile pot reprezenta peste jumătate (sau mai mult) din dimensiunea totală a paginii dvs. web. Cu doar câțiva ani în urmă, dimensiunea medie a unei pagini web era de 600-700K. Acum, media este de 2MB și crește în fiecare an.

Asta e enorm!

Motivul principal pentru care se întâmplă acest lucru este că imaginile multiple sunt folosite mai des pe paginile web, iar aceste imagini nu sunt dimensionate și optimizate corespunzător, ceea ce înseamnă că nu sunt salvate sau compilate într-un mod prietenos pentru web, ci vă umflă paginile.

Cei mai mulți dintre noi, însă, lăsăm optimizarea imaginilor ca pe un gând secundar și preferăm să ne bucurăm de lucruri distractive, cum ar fi crearea unei postări epice sau crearea de rețele cu alți bloggeri din nișa ta.

Dar, dacă aveți pagini aglomerate, înseamnă că viteza de încărcare a paginii dvs. este afectată. Poate că nu credeți că este o mare problemă dacă aveți o conexiune de mare viteză, dar mulți dintre vizitatorii dvs. nu sunt. De asemenea, Google nu agreează paginile care se încarcă lent, iar acest lucru vă poate afecta negativ SEO.

De ce trebuie să optimizați imaginile

Muncești din greu pentru a crea conținut stelar și petreci nenumărate ore promovându-ți blogul și colaborând cu alți bloggeri, așa că ultimul lucru pe care îl dorești este ca potențialii vizitatori să îți abandoneze site-ul înainte ca acesta să se încarce!

Studiile arată că până la 40% dintre vizitatori fac clic pe butonul de revenire dacă un site durează mai mult de trei secunde pentru a se încărca.

Știu, trei secunde nu înseamnă chiar atât de mult, dar atunci când sunteți pe o conexiune mobilă și așteptați ca un site să se încarce, o secundă poate părea o eternitate.

Și din moment ce mulți dintre vizitatorii dvs. pot avea conexiuni mobile mai lente, devine clar - trebuie să reduceți dimensiunea paginii. Și știm deja care este cel mai mare infractor al dimensiunii paginii - imaginile.

Imaginile inutil de mari ocupă, de asemenea, spațiu pe contul de găzduire. În timp ce unii dintre voi au găzduire cu spațiu de stocare "nelimitat", mulți furnizori de găzduire premium vă limitează la aproximativ 10 GB de stocare pe planurile de nivel inferior. Acest spațiu se poate umple rapid, mai ales dacă găzduiți mai multe site-uri cu multe imagini pe același cont.

Deci, cum vă puteți da seama dacă imaginile vă încetinesc site-ul? Testați viteza site-ului dvs. cu Google PageSpeed Insights.

Dacă Google raportează imagini neoptimizate ca fiind o problemă, iată ce trebuie să știți pentru a o rezolva.

Bazele optimizării imaginilor

Atunci când vine vorba de optimizarea imaginilor pe blogul dumneavoastră, trebuie să țineți cont de câteva aspecte diferite: tipul de fișier, dimensiunea și dimensiunile imaginii, modul în care vă serviți imaginile și compresia imaginilor.

Să aruncăm o privire mai atentă la fiecare dintre aceste domenii.

Tipul de fișier

Imaginile de pe web sunt de obicei salvate în format de fișier PNG sau JPEG - sau GIF pentru animații. Cine nu iubește acele GIF-uri animate hilare care circulă pe web!

Acum este tehnic. Bine. dacă vă salvați imaginile în oricare dintre formate - browserul vizitatorului dvs. nu va avea probleme în a vă afișa pagina web - dar pentru cea mai bună calitate și optimizare, respectați următoarele reguli:

• JPEG - se utilizează pentru fotografii și desene în care sunt prezentate persoane, locuri sau lucruri
• PNG - cel mai bun pentru grafice, logo-uri, desene cu mult text, capturi de ecran și atunci când aveți nevoie de imagini cu fundaluri transparente.
• GIF - dacă aveți nevoie de animație, altfel folosiți PNG

Deci, de ce există formate diferite?

Ei bine, PNG este utilizat în mod tradițional pentru salvarea de logo-uri și grafice, deoarece păstrează calitatea imaginii originale - nimeni nu dorește text neclar și forme pixelate. Dar, dacă încercați să salvați o fotografie ca PNG, aceasta va arăta uimitor, dar dimensiunea fișierului rezultat va fi mai puțin uimitoare.

JPEG este utilizat în mod tradițional pentru salvarea fotografiilor. O parte din datele imaginii sunt aruncate pentru a crea un fișier de dimensiuni drastic mai mici, dar, deoarece fotografiile conțin o mare varietate de culori și variații naturale, pierderea de calitate este de obicei imperceptibilă pentru ochiul uman.

Vom intra mai în detaliu despre compresie mai târziu, dar deocamdată, dacă vă amintiți doar două lucruri, rețineți: JPEG pentru fotografii și PNG pentru text/grafică.

Dimensiunile imaginii

Ați încărcat vreodată o pagină web și ați observat că o imagine micuță (poate o poză de cap, de exemplu) durează f-o-r-e-v-e-r pentru a fi descărcată? Atât de încet încât puteți vedea fiecare linie care intră? Vă gândiți, cum poate o imagine atât de mică să dureze atât de mult pentru a fi descărcată?

Iar atunci când se întâmplă cu o imagine de antet mare, este și mai rău, deoarece poate bloca încărcarea întregii pagini.

Motivul pentru care se întâmplă acest lucru este că bloggerul nu și-a redimensionat și optimizat corect imaginea, iar în cazul exemplului nostru de fotografie de cap, este posibil să fi încărcat un JPEG de rezoluție completă direct din aparatul foto DSLR.

Și acesta este un fișier imens!

Vedeți, un browser web va redimensiona (de obicei) o imagine de la dimensiunile sale originale pentru ca aceasta să se potrivească frumos la locul ei pe o pagină web. Ceea ce pare a fi o imagine mică pe ecran ar putea fi de fapt o fotografie uriașă de 10 megapixeli, redimensionată în timp real de către browser.

Unele platforme de publicare pe internet vor crea automat mai multe variante ale imaginii dvs. la rezoluție maximă în diferite dimensiuni, dar dacă nu, ar trebui să redimensionați imaginile în prealabil într-un editor de imagini precum Photoshop, Lightroom, Pixlr - sau chiar MS Paint. Aceasta poate face diferența între un fișier de 50K și unul de 5MB.

WordPress, de exemplu, va crea automat trei (sau mai multe, în funcție de tema dvs.) copii ale imaginii încărcate - toate cu dimensiuni diferite - pe care le puteți utiliza în postările de pe blog, în loc să folosiți întotdeauna imaginea în mărime naturală.

Dacă aveți obiceiul de a încărca imagini foto uriașe și doriți să economisiți spațiu în contul de găzduire, insertul WordPress Imsanity vă sprijină.

Redimensionează și înlocuiește imaginea originală în ceva mai ușor de gestionat, astfel încât, chiar dacă inserați imaginea în mărime naturală în postarea dvs., nu va fi atât de rău.

Odată activat, Imsanity poate căuta și imaginile existente și le poate redimensiona în consecință.

Servirea imaginilor dvs.

Modul în care le oferiți imaginile vizitatorilor dvs. nu este strict legat de optimizarea lor în sine, dar poate avea un impact dramatic asupra timpului de încărcare a paginii.

Cei mai mulți bloggeri își servesc imaginile direct din contul lor de găzduire și, de obicei, acest lucru este în regulă, dar dacă vreți cu adevărat să stoarceți fiecare pic de performanță de pe site-ul dvs., atunci găzduirea imaginilor pe o rețea de livrare de conținut (CDN) poate face o mare diferență.

Un CDN este format din servere web amplasate strategic în centre de date din întreaga lume. Aceste servere găzduiesc copii duplicate ale imaginilor dvs. și, atunci când browserul unui vizitator solicită o imagine de pe site-ul dvs. web, CDN direcționează automat browserul către un server care este cel mai apropiat din punct de vedere geografic.

Acest lucru înseamnă că vizitatorii din Europa, de exemplu, vor primi imagini de pe un server european local, mai degrabă decât de pe un server din Statele Unite sau din altă parte. Deoarece timpul de răspuns și latența rețelei sunt reduse, imaginile se descarcă mult mai repede, reducând astfel timpul de încărcare a paginii.

Blogging Wizard folosește Sucuri (care include un firewall pentru securitate, precum și un CDN), dar există și alți furnizori de calitate, cum ar fi Amazon's Cloudfront sau KeyCDN. Chiar și popularul CloudFlare, care nu este strict un CDN, oferă un CDN gratuit și este ușor de configurat în majoritatea pachetelor de găzduire partajată.

Compresie de imagine

Atunci când vine vorba de optimizarea imaginilor, nimic nu reduce dimensiunea fișierului mai mult decât compresia avansată a imaginilor cu pierderi.

Cele mai multe instrumente de editare a imaginilor, cum ar fi Visme sau Photoshop, salvează fișierele folosind compresia JPEG cu pierderi, deoarece aceasta are cele mai bune reduceri ale dimensiunii fișierelor. Astfel, deși calitatea imaginii este ușor redusă, folosirea compresiei cu pierderi reduce imaginile uriașe la dimensiuni prietenoase pentru web.

Sunt sigur că mulți dintre cei care folosesc Photoshop ar putea vedea sale Salvați pentru Web ca fiind cea mai bună metodă de optimizare a imaginilor. Și chiar și instrumentele de editare a imaginilor online, precum PicMonkey sau Visme, vă optimizează imaginile.

Dar știați că există instrumente care pot lua imaginea dvs. "optimizată" din Photoshop sau alte instrumente de editare, o pot comprima cu încă 40% (sau mai mult), și încă să apară aproape identic cu ochiul uman?

Iată câteva instrumente gratuite și cu plată care vă pot ajuta să vă reduceți imaginile la o stare prietenoasă pentru web.

Instrumente de birou

ImageAlpha / ImageOptim

Pentru utilizatorii de Mac, ImageOptim este un instrument gratuit pentru desktop pe care îl folosesc în fiecare zi pentru a optimiza imaginile PNG - în principal capturi de ecran - înainte de a le încărca. Aceste instrumente sunt ușor de utilizat, trebuie doar să trageți și să plasați fișierele, dar trebuie să faceți o imagine la un moment dat.

Sfat profesional : Pentru cei mai pricepuți din punct de vedere tehnic există ImageOptim-CLI, unde puteți optimiza un întreg dosar de imagini deodată.

ImageAlpha este un compresor PNG cu pierderi și poate face minuni în ceea ce privește reducerea fișierelor PNG, în timp ce ImageOptim realizează o compresie avansată fără pierderi (cu opțiunea de pierdere) - și elimină metadatele inutile din fișierele PNG, JPEG și GIF.

Pentru imaginile mele PNG, le trec mai întâi prin ImageAlpha:

Aici, a redus imaginea mea de captură de ecran de la 103K la 28K.

Am trecut-o apoi prin ImageOptim și am economisit încă 10%.

JPEGmini

Pentru fișierele mele JPEG, le optimizez cu aplicația JPEGmini, disponibilă atât pentru Mac, cât și pentru Windows.

Versiunea Lite vă permite să optimizați gratuit până la 20 de imagini pe zi și costă 19,99 dolari pentru a elimina această limită.

Sfat profesional : Utilizatorii avansați care doresc să integreze JPEGmini în Photoshop sau Lightroom prin intermediul unui plugin pot cumpăra versiunea Pro pentru 99,99 $.

Instrumente online / Cloud / SaaS

TinyPNG

Dacă sunteți în căutarea unui instrument online de compresie a imaginilor de înaltă calitate, TinyPNG (în ciuda numelui, optimizează și fișierele JPEG) este o aplicație web care vă permite să trageți în browser până la 20 de imagini de 5 MB sau mai mici și să le optimizați pe toate deodată.

De asemenea, au un API pentru dezvoltatori și pun la dispoziție un plugin WordPress care poate optimiza automat imaginile la încărcare.

TinyPNG vă oferă 500 de optimizări gratuite de imagini pe lună, iar după aceea percepe taxe de 0,002-0,009 dolari pe imagine, în funcție de volum.

Acum, 500 de imagini pe lună poate părea mult, dar dacă luați în considerare faptul că WordPress creează adesea trei până la cinci variații ale fiecărei imagini în diferite dimensiuni, 500 de imagini nu pare a fi prea mult. că mulți Din fericire, costul per imagine este accesibil pentru buget.

EWWWW Image Optimizer

Dacă nu sunteți pregătit să cheltuiți bani și nu doriți să vă deranjați cu optimizarea manuală a imaginilor, pluginul gratuit EWWW Image Optimizer pentru WordPress poate optimiza automat imaginile încărcate.

Puteți opta pentru un abonament premium care realizează compresie cu pierderi, dar versiunea gratuită realizează doar compresie fără pierderi, astfel încât economiile nu sunt la fel de substanțiale. Totuși, vă va economisi timp și este mai bine decât nimic.

Notă: Pentru o prezentare completă, consultați articolul nostru despre instrumentele de compresie a imaginilor.

Încheiere

Având în vedere că unii oameni prezic că dimensiunea medie a paginilor web se va apropia de 3 MB până în 2017, acum este momentul să începeți să vă optimizați imaginile.

Nu uitați că nu toți vizitatorii dvs. vor avea conexiuni de mare viteză, iar volumul de pagini și timpii lenți de încărcare a paginilor vă pot afecta potențialul de poziționare în Google. Pentru a vă ajuta să ușurați sarcina, ca să spunem așa, obișnuiți-vă să vă optimizați imaginile astăzi.

Fiți atenți la dimensiunile imaginilor și redimensionați orice fotografii de stoc prea mari sau imagini de la o cameră digitală la o dimensiune adecvată.

În continuare, profitați de compresia modernă a imaginilor cu aplicații desktop precum JPEGmini sau instrumente cloud precum TinyPNG sau Kraken - integrându-le în WordPress cu un plugin, dacă este posibil.

În cele din urmă, dacă platforma dvs. de publicare creează automat variante redimensionate ale imaginii originale, alegeți una dintre acestea pentru postarea dvs. pe blog, în locul imaginii originale, în mărime naturală.

Lecturi conexe: 7 moduri de a reduce dimensiunea fișierelor PDF.