Un criteriu important, pentru ca vizitatorii site-ului tau sa intre pe site si sa nu abandoneze prematur pagina, este viteza de incarcare, atat de pe desktop cat si de pe mobil. La fel si motoarele de cautare, vor indexa si plasa mai sus in rezultatele cautarii, paginile care se incarca repede, sub 4 secunde. Viteza de incarcare a paginii sub 2 secunde este un ideal care se poate atinge daca se tine cont de mai multe criterii. In acest articol ma voi referi in special la optimizare imagini.
O pagina din site se incarca mai repede daca nu are multe resurse: imagini, fisiere de stil (css) sau fisiere javascript, font-uri, audio, video, pdf etc. De multe ori nu este posibil sa ai un site fara aceste resurse si atunci este necesar sa se regandeasca distribuirea lor. Divaghez putin si iti spun foarte scurt ce se poate face.
Video si audio sunt resursele care ocupa cel mai mult spatiu pe disc, de aceea este bine ca video sa fie incarcate gratuit pe Youtube sau Vimeo si servite de acolo, iar audio pe Soundcloud sau Yourlisten.
Fisierele css si javascript pot fi minificate, iar daca exista mai multe fisiere de un anumit tip, acestea se pot comasa intr-un singur fisier.
Imaginile pot fi afisate grupat intr-o galerie foto sau singulare in articole. Galeria foto, daca are foarte multe imagini, poate fi creata cu Flickr si incarcata de acolo, iar imaginile pentru articole si pagini pot fi singurele incarcate in site prin libraria media.
WordPress are un folder pe server denumit uploads unde se incarca toate fisierele imagine, pdf sau cele cu extensii acceptate. De multe ori am vazut ca imaginile sunt incarcate la dimensiuni foarte mari, asa cum le scoate aparatul foto. Vezi mai jos o mostra din biblioteca media a unui site:
Este adevarat ca WordPress creeaza, la incarcarea imaginilor, inca 3 imagini, daca nu au fost modificate setarile implicite. Una de 1024px, pe latimea cea mai mare, una de 300px si una patrata de 150x150px. Imaginea cea mare este creata doar daca imaginea originala depaseste 1024px pe latura cea mai mare.
In cazul nostru, cu imaginea de 4410x3301px, se poate incarca in articol imaginea medie de 300px, care va avea si o marime mai mica pe disc, totusi neoptimizata.
Dar de ce sa incarci serverul cu imagini de 6MB sau chiar mai mari, daca nu ai nevoie? Gandeste-te ca la acesti 6MB se mai adauga si dimensiunile celor 3 imagini create de WordPress. Plus ca vor aparea probleme cand se face backup cu ajutorul plugin-urilor, acestea nu vor putea sa creeze rapid arhiva fisierelor si pot aparea erori. Deci ce se poate face? Imaginile se pot redimensiona si comprima.
Formatele universale ale imaginilor web
Cele mai utilizate formate ale imaginilor utilizate pe web sunt: JPG, PNG si GIF.
Imaginile JPEG, format pe care toate aparatele digitale le pot salva, au un algoritm de comprimare cu pierdere de calitate, adica la fiecare redimensionare si comprimare mai pierd putin din calitate. Acestea pot avea pana la 16 milioane de culori si sunt utilizate frecvent pentru ca au o marime mai mica pe disc si calitate buna.
Imaginile de tip PNG sunt de calitate superioara, au 16 milioane de culori pentru 24-biti, nu pierd din calitate, suporta transparenta pe mai multe canale (de exemplu, imaginile rotunde sunt niste patrate cu transparenta pe margini) si au o dimensiune mare pe disc. Acestea se folosesc in cazul cand se doreste calitate superioara sau transparenta. Imaginile PNG cu mai putine culori si fara transparenta au uneori dimensiune mai mica pe disc decat un JPG.
Imaginile de tip GIF au doar 256 de culori, se utilizeaza pentru imagini cu putine culori, cu mult text, suporta transparenta si animatia. Fiind un format vechi este suportat de majoritatea browserelor si aplicatiilor.
Intr-un site pot exista toate aceste 3 formate, in functie de utilizarea lor. De exemplu, bannerele animate pot fi de tip GIF, imaginile de portofoliu de tip PNG, iar cele pentru articole de tip JPG.
De retinut ca nu exista o reteta pentru formatarea imaginilor, poti experimenta cu diferite formate si vezi calitatea si marimea fiecarui format pentru aceeasi imagine.
Redimensionarea imaginilor inainte de incarcare in site
De obicei proprietarii de site-uri mici sunt persoane atehnice, majoritatea stiu doar sa scrie articole, sa incarce o imagine si sa publice articolul si nu sunt constienti de implicatiile resurselor de pe site. De aceea este important de stiut cum se redimensioneaza rapid si usor o imagine.
Exista acum posibilitatea de a redimensiona o imagine online, fara prea multa bataie de cap si fara a utiliza o aplicatie dificil de invatat, cum ar fi Photoshop sau Gimp.
Totusi, Adobe Photoshop are un instrument online cu care se pot edita gratuit imaginile, denumit Photoshop Express Editor. Un inconvenient ar fi ca poate edita doar imagini de tip JPG, JPEG sau JPE de maxim 16Mb. Dar tinand cont ca majoritatea imaginilor utilizate in articole sunt de tip JPG, atunci este un instrument util.
Care sunt pasii pentru redimensionarea unei imagini cu acest instrument:
Pas 1: Da click pe acest link pentru a ajunge pe pagina editorului.
Pas 2: Da click pe link-ul albastru care apare jos in pagina: Start the Editor.
Pas 3: Incarca imaginea pe care doresti sa o redimensionezi sau sa o corectezi, prin click pe butonul Upload Photo. Va aparea un mesaj care te atentioneaza ca se pot edita doar imagini de tip JPG. Da click pe Upload si incarca imaginea de pe calculatorul tau.
Pas 4: Pentru ca ne intereseaza doar redimensionarea, da click pe al doilea link din stanga – Resize.
Pas 5: In partea de sus a imaginii vor aparea mai multe optiuni: pentru profil, mobil, email, site. Da click pe una din marimile care te intereseaza, ca de exemplu website. Marimea implicita este de 800px pe latura cea mai mare. Daca dai click pe Custom poti redimensiona proportional imaginea pe ce marime doresti.
Pas 6: Dupa redimensionare da click pe butonul gri din dreapta-jos: Done.
Pas 7: Se va deschide un ecran in care poti salva noua imagine. Imaginea va fi redenumita de aplicatie prin adaugarea cuvantului edited la sfarsitul denumirii sale. Daca doresti poti sa redenumesti tu imaginea si sa o salvezi pe calculatorul tau. Tot pe acest ecran vei vedea si marimea imaginii pe disc.
Asta este tot! Acum ai o imagine tip JPG redimensionata, buna de utilizat in articolele sau paginile din site.
Hai sa vedem ce mai este necesar de facut pentru optimizare completa.
Comprimarea imaginilor
Photoshop este foarte bun in multe privinte, dar nu comprima foarte mult imaginile. Ce inseamna comprimare? Imaginile pot avea milioane de pixeli colorati (16 milioane pentru un PNG de 24-biti), cu cat variaza mai mult nuantele cu atat imaginea va avea mai multa informatie, va fi foarte clara dar va ocupa mai mult spatiu pe hard disc.
Pe scurt, algoritmul de comprimare consta in comasarea culorilor apropiate ca nuanta, pe care ochiul uman nu le sesizeaza oricum. Astfel, imaginea va avea o dimensiune mai mica pe disc si mai putine culori.
Un instrument online foarte bun pentru comprimarea imaginilor, de tip PNG si JPG, este TinyPNG. Dupa ce deschizi pagina, te va intampina mascota Panda 🙂 si o caseta in care poti incarca imaginea de optimizat. Poti incarca deodata 20 de imagini, de maxim 5MB fiecare.
Dupa ce astepti cateva momente necesare comprimarii, vei putea sa descarci noua versiune a imaginii. Panda iti va spune cat la suta din marimea pe disc a fost salvata. Imaginea poate fi salvata pe calculatorul tau sau in Dropbox.
Cei de la TinyPNG au creat si un plugin WordPress pentru comprimare si redimensionare, cu o limita de 500 imagini pe luna gratuit. NU il recomand incepatorilor, celor care au imagini de vanzare, sau fotografilor care vor sa arate imagini perfecte, comprimarea reduce totusi din calitate daca sunt JPG.
Daca te incumeti sa folosesti acest plugin, salveaza mai intai tot folderul wp-content/uploads de pe server ca sa nu ai surprize si citeste cu atentie instructiunile. Despre acest plugin voi scrie in detaliu intr-un alt articol.
Concluzie pentru optimizare imagini
Daca tot faci un efort pentru a scrie un articol, fa si optimizare pentru imaginile pe care le ai, mai ales daca le descarci din aparatul foto. Optimizarea imaginilor iti va aduce numai beneficii: server mai putin incarcat, pagina servita rapid pe desktop cat si pe mobil, vizitatori care raman pe pagina.
Pentru redimensionare, comprimare si reformatare imagini dintr-un foc poti folosi un alt instrument online pe care il gasesti pe aceasta pagina. Dupa ce faci toate setarile care te intereseaza, poti vizualiza imaginea si daca e ok da click pe Resize image.
Imaginile din galeria de mai sus au fost PNG cu marimi intre 250-400Kb, iar eu le-am redimensionat la 800px, cu formatare JPEG si calitate 70%. Marimea pe disc a celor 6 imagini este acum de 311KB. Am salvat ceva, nu?
Si daca tot editezi imagini, iti mai dau un pont SEO: pune in denumirea lor cuvintele cheie ale articolului, ca de exemplu: optimizare-imagini.jpg.
Lasa un comentariu daca te-a ajutat acest articol sau trimite-l si prietenilor tai.
Lasă un răspuns