3 metode simple pentru optimizarea eficienta a imaginilor web

20 septembrie 2016

40% dintre persoane abandoneaza un site care se incarca mai greu de 3 secunde, iar fiecare secunda castigata determina cresterea cu 7% a ratei de conversie si o experienta mai buna.

Lipsa optimizarii imaginilor reprezinta principalul factor pentru care un site se incarca greu. Afla cum sa optimizezi eficient pozele pentru a le publica pe site-ul tau folosind compresia, redimensionarea si optimizarea SEO. In plus, poti salva cu pana la 70% mai mult spatiu pe server.

#1. Compresia imaginilor - obtine cu pana la 40-70% o incarcare mai rapida a site-ului


Este cel mai important proces pentru optimizarea imaginilor avand valoare mai mare chiar decat redimensionarea imaginilor. In plus daca site-ul tau este preponderent vizual poti salva cu 50% spatiul de pe server cat si banda consumata in fiecare luna.

Ce este comprimarea/compresia imaginilor
Compresia imaginilor are in vedere eliminarea informatiilor legate de tipul de aparat folosit, lentila, focus, autor si alte multe detalii. Totodata are loc si un proces de comprimare si de optimizare a calitatii imaginii fara pierderi vizibile de calitate.
Comprimarea imaginilor web Dupa ce datele de care nu avem nevoie au fost eliminate, comprimarea imaginilor are in vedere si scaderea optima a calitatii imaginii fara pierderi semnificative de calitate.

De ce este este utila compresia imaginilor
Comprimarea pozelor scade cu pana la 40% din marimea pozelor deja prelucrate. De exemplu daca utilizezi pixabay.com sau alte 12 site-uri cu imagini gratuite pentru blogul tau poti salva in medie 30-40% din fiecare poza.

In cazul pozelor din camera foto, comprimarea salveaza chiar pana la 70%. Astfel comprimarea scade dimensiunea pozelor fiind utila atat la incarcarea mai rapida a site-ului cat si la salvarea spatiului pe server si te poate interesa in mod deosebit daca site-ul tau este de turism, culinar, design sau preponderent vizual.
Reducere dimensiuni imaginilor web

Metode de compresie
Sunt doua variante principale: atunci cand utilizezi platforma WordPress poti instala plugin-ul TinyJPG, orice imagine pe care o vei incarca va fi comprimata automat. Daca ai un site realizat intregral de la zero sau doresti doar sa comprimi imagini, poti utiliza varianta online tinyjpg.com.

Metoda 1: comprimarea imaginilor folosind site-ul tinyjpg.com Comprimare si optimizare imagini online Este o modalitate foarte rapida si eficienta daca nu ai un blog pe WordPress. Chiar si atunci cand folosesti poze deja prelucrate, poti obtine reduceri semnificative. Iata un exemplu diferente in functie de fotografii:
39% comprimare, pentru 5 poze de pe pixabay.com.
79% comprimare, pentru 5 poze din camera foto.
Poti urca cu drag and drop pana la 20 de imagini simultan, iar in cateva secunde dimensiunea lor este redusa semnificativ.
site online
drag and drop
40-80% reducere a marimii pozei
Testeaza chiar acum o fotografie sa vezi exact procentul pe care il poti salva.

Metoda 2: compresia automata a imaginilor folosind plugin-ul de WordPress TinyJPG Comprimare imagini plugin WordPressInstalarea acestui plugin nu doar ca iti face viata mai usoara dar vei obtine 40-70% reducere in spatiul folosit pe server. Comprimarea se realizeaza automat, economisind un timp semnificativ si din testele realizate comprima chiar mai bine decat varianta online, asa cum se poate vedea mai jos.
plugin de WordPress
proces integral automat
40-80% reducere a marimii pozei

Date comparative plugin VS varianta online
Plugin-ul WordPress se dovedeste mai eficient, atat prin comprimare mai buna, salvand cativa KB in plus fata de varianta online, cat si prin economisirea timpului, procesul fiind automat la incarcarea imaginilor pe site:
325.5KB original: 142,2KB - tinyjpg.com, 125KB - WordPress
208 KB original: 86,6KB - tinyjpg.com, 85KB - WordPress
133.7KB original: 100,1KB - tinyjpg.com, 98KB - WordPress
162.4KB original: 128,5KB - tinyjpg.com, 119KB - WordPress
256.2KB original: 208,4KB - tinyjpg.com, 203KB - WordPress


#2.Redimensionarea imaginilor


Redimensionarea imaginilor face referire la miscsorarea dimensiunilor exprimate in pixeli, latime si inaltime. Aceasta atrage dupa sine si scaderea marimii pozei in KB(kilo baiti). Dupa redimensionare este necesara si comprimarea, care duce la scaderea semnificativa a fotografiei.

Redimensionarea pozelor online
Poti redimensiunea fotografiile tale asa cum sunt luate din aparatul foto folosind picresize.com. Redimensionarea pozelor onlineDispune de majoritatea functiilor de care ai nevoie si totul decurge rapid.

Redimensionarea pozelor offline
Pentru redimensionarea pozelor offline poti utiliza un programel gratuit PIXresizer
Redimensionarea pozelor onlinePIXresizer este extrem de eficient si rapid asa cum ai nevoie in 2016, avand diverse optiuni utile. Poate redimensiona un singur fisier insa il poti utiliza pentru foldere intregi cu fotografii, fiind extrem de util in acest sens.

Care este dimensiunea optima pentru blogul meu?
Dimensiunea optima difera de la tema la tema si de la site la site.
Pentru a gasi exact dimensiunea potrivita de WordPress acceseaza pagina unde este postata imaginea si apasa Edit imagine > Image Details > Size > Large.
dimensiunea optima imagini pentru blogul meu
Aici vei gasi specificata dimensiunea, aceasta este corespunzatoare temei alese de tine si poate varia de la 600 la 1024pixeli. Accesand datele de analytics poti vedea specificul vizitatorilor tai, inclusiv rezolutiile de pe care acceseaza site-ul tau. Cel mai probabil peste 55% folosesc telefonul mobil.

Dimensinea ideala: 768 pixeli
Majoritatea temelor de WordPress folosesc framework-ul Bootstrap. La fel si site-urile de prezentare realizate dupa 2015. Bootstrap ajuta la crearea site-urilor responsive si are punctul de trecere de la mobil la tableta la 768 pixeli latime.

Acesta dimensiune este suficienta pentru afisarea imaginilor atat pentru blogul cu structura pe doua coloane cat si pe una, atat pe mobil cat si pe tableta, laptop, desktop. Daca tema ta nu are imagini pe toata latimea desktopului sau alte cerinte speciale, atunci 768px latime este dimensiunea care te va ajuta sa obtii maximul de optimizare.

#3. Optimizare imagini pentru SEO


Pentru fiecare imagine pe care o publici poti contribui la optimizarea paginii cat si la afisarea in Google images. Optimizare SEO imagini Sunt 3 aspecte in ceea ce priveste SEO si imaginile, fata de cele discutate mai sus:
Semnificatia pozelor
Fotografiile trebuie sa sustina ceea ce ai spus in titlul si continutul site-ului. Atat pentru cititori cat si pentru Google, care la ora actuala intuieste destul de bine despre ce este fotografia.

Redenumirea pozelor
Dupa ce ai gasit imaginea potrivita, este util sa ii schimbi denumirea. In locul 38732145_IMG poti pune cuvintele pentru care doresti sa fii optimizat, de exemplu optimizare_imagini_web.jpg in cazul acestui articol.

Atributul ALT
Este un atribut pe care Google il apreciaza, atunci cand imaginea nu este disponibila este afisat acest text. In plus persoanele cu deficienta de vedere vor afla mai multe informatii despre imagine.
Atributul ALT - optimizare SEO pentru imagini
Atributele Title, Captation, Description Daca utilizezi platforma WordPress poti completa usor si aceste atribute pentru a oferi mai multe detalii despre poza ta.
Optimizare atribute ALT, Title, Captation in WordPress

Concluzie


Cresterea vitezei de incarcare a site-ului atrage dupa sine o experienta mai buna, cresterea ratei de conversie, retentie si reintoarcere pe site. Fiecare secunda castigata determina cresterea cu 7% a ratei de conversie si o experienta mai buna.

Fotografiile adaugate pe site-urile web sunt de cele mai multe ori neprelucrate, constituind principalul factor pentru care un site se incarca greu. Chiar si atunci cand utilizezi fotografii deja prelucrate, poti obtine scaderi semnificative.

Optimizarea eficienta a imaginilor are in vedere 3 aspecte:
1. comprimarea, prin care poti obtine o reducere de 40-70% a marimii pozei in KB.
2. redimensionarea si oferirea imaginilor in pe dimensiunile temei sau site-ului tau, in pixeli.
3. optimizarea SEO prin care poti atrage trafic relevant.

Aplicand aceste lucruri pentru care nu ai nevoie de cunostinte tehnice, poti imbunatati considerabil viteza de incarcare a site-ului tau, poti salva spatiu pe server si poti creste in cautarile Google.In plus o experienta placuta de navigare, atrage dupa sine vizitatori multumiti.

Aboneaza-te la noutati

Aboneaza-te pentru a primi articolele direct in inbox-ul tau

Cursuri web design incepatori: vino sa inveti cum sa realizezi site-uri web, poti lucra de oriunde te simti creativ, pentru persoane din intreaga lume.

Cursuri Web Design Acreditate

870 Lei 1100 Lei

Durata 5 saptamani
Invata cum sa realizezi Landing Page-uri, site-uri de tip One Page, site-uri pentru companii si persoane.
Cursuri web design  

© 2016 DIGITAL SKILLS SRL
Registrul furnizorilor de formare profesionala a adultilor numarul 40/7082/21.10.2016
Bulevardul Unirii, Nr. 14, Sector 4, Bucuresti R.C.: J40/6400/2016, C.U.I.: 36031733, Capital social 200 RON. Telefon: 0730.664.580
Acest site foloseste cookies continuarea navigarii implica acceptarea lor Sunt de acord.

Invata cum poti seta $_COOKIES sau $_SESSION cu PHP si incepe cariera ta in programare web.

Vino la cursul de PHP+MySQL+WordPress