Micsorare Imagini (Resize) Fara A Pierde Calitativ

Micsorare Imagini (Resize): Cum le facem corect si fara a pierde din calitate dpdv SEO si al clientului

Pun pariu ca multi micsoreaza, maresc si optimizeaza gresit imaginiile, poate corect din punct de vedere SEO dar incorect pentru client. Noi ne-am dat seama cand am inceput sa facem optimizare pentru motoarele de cautare(SEO) unui client ce are un site de filmari nunti.

Inainte sa incepem, pentru ca ne folosim de poza lor in acest tutorial (daca vreti ii putem zice asa), doresc sa le multumesc echipei Pif Media, si tocmai pentru ca le-am facut optimizare si stim ce este pe piata, in caz ca aveti nevoie de cineva sa va filmeze nunta/botezul sau alt eveniment special puteti apela cu incredere la ei(va rog nu considerati asta reclama deoarece contractul nostru cu ei s-a incheiat inainte de aceasta postare, e o parere sincera).

Nu intram in detalii aici despre alt taguri, descrierea pozei etc, ne referim strict la 2 lucruri(1 google pagespeed + 1 de bun simt):
-Afisarea pozei la dimensiunile reale, fara a o scala din CSS sau HTML.
-Pastrarea cu exactitate a fiecarui pixel din poza fara a modifica in nici un fel compozitia culorii(in orice caz nu vizibil..)

Vom invata cum sa micsoram corect o poza(sa ii reducem din dimensiuni fara a altera compozitia, astfel incat google pagespeed sa nu dea eroare(sau warning). Acelasi principiu se poate aplica si pentru marirea pozei, atata timp cat se doreste marirea pozei cu cativa pixeli. Normal calitatea ar trebui sa ramana la fel, scopul nostru deocamdata este sa micsoram poza)

Micsorare Imagini (Resize) Erori Pagespeed
Micsorare Imagini (Resize) Erori Pagespeed: reducerea marimii si afisarea la dimensiuni reale

Micsorare Imagini (Resize): Poza ce trebuie optimizata, calitatea,dimensiuniile si marimea ei:

Micsorare Imagini (Resize) poza ce urmeaza a fi micsorata
Micsorare Imagini (Resize) poza ce urmeaza a fi micsorata dimensiuni actuale 600×900

Marimea ei este de 163,840 bytes (Marime reala: size on disk), dimensiuniile sunt 600x900px.

Scopul nostru este de a o aduce la 596x894px, sa reducem cat mai mult din marime(bytes) si sa pastram calitatea pozei(dat fiind faptul ca este un site de fotografie, trebuie sa nu alteram in nici un fel poza).

Micsorare Imagini (Resize) cu ajutorul lui Adobe Photoshop

Procedura simpla, din photoshop, image, image size am ales 594×894, ca algoritm am folosit bicubic sharpner (cel mai bun pentru reducere, bicubic automatic avand acelasi rezultat).

– Am salvat poza(.jpg) cu o calitate de 100% (maximum)(ca algoritm am ales optimized, pt ca progresive ar fi rezultat o marime mult mai mare). Rezulatul a fost de 307,200 bytes cu mult peste cei 163,840 bytes cat avea poza noastra in original. Dat fiind faptul ca am redus din latimea si lungimea pozei, imaginea rezultata ar trebui sa aibe mai putini bytes decat originalul.

– Am mai incercat pana am ajuns la o calitate de 84%(acelasi algoritm), ca sa ajungem la o marime de exact 163,840 bytes egala cu marimea noastra originala. Ne-am multumit si cu atat ca sa pastram calitatea imaginii. Acesta este rezulatul (Pentru a va da seama de diferenta, dati click aici si alternati intre taburi. )(daca browser-ul nu deschide 2 tab-uri: Tab 1 si Tab 2)

Optimizare Imagini, Resize in Adobe Photoshop, caltitate 84
Resize in Adobe Photoshop, caltitate 84%, pentru a nu rezulta o imagine mai mare ca originalul

-Acelasi rezultate si cu Perfect Resize, pluginul pentru adobe photoshop.

Concluzie: Culoriile au iesit mai aprinse din pacate, fapt ce ne strica poza. Nu putem noi sa alteram in nici un fel poza fotografului. Alte versiuni de photoshop, cu alte plugin-uri si setari pot da rezulate diferite.

Micsorare Imagini (Resize) cu serviciul gratuit pus la dispozitie de imageoptimizer.net

Ca setari am folosit best quality, pentru a nu strica compozitia pozei. Fisierul rezultat are exact 270,336 bytes la 596×894, mult mai mare decat originalul. Poza este asta (Pt diferenta click aici si alternati tab-urile)(daca browser-ul nu deschide 2 tab-uri: Tab 1 si Tab 2):

Optimizare Poza cu imageoptimizer net
Micsorare Poza cu imageoptimizer.net dimensiuni 596×894

Concluzie: Aceeasi problema s-a umblat la culori chiar cu setariile maxime. Nu avea sens sa reducem din calitate pentru a avea o poza mai mica, deoarece nici la calitate maxima nu iese imaginea cum vrem noi. Asta nu inseamna ca serviciul pus la dispozitie de ei nu este bun(mai ales ca este gratis), pur si simplu noi nu l-am putut folosi in acest caz.

Micsorare Imagini (Resize) cu ajutorul picresize.com (serviciu disponibil gratuit)

Am ales la optiuni custom size: 596×894, best jpg quality, iar maximum file size 158 kb. Rezultatul este ok, dimensiunea pozei find 151,552 bytes. Asa arata poza(Nu sunt diferente, testati aici )(daca browser-ul nu deschide 2 tab-uri: Tab 1 si Tab 2):

picresize.com micsorarea imaginii
picresize.com micsorarea imaginii

Concluzie: Serviciu ok, numai ca trebuie specificata dimensiunea pe care o vreti daca nu introduceti nimic se creaza o poza mai mare decat originalul. Ne place ca au si un API.

Micsorare Imagini: simpleimageresizer.com (gratuit)

Am ales optiunea dimensiuni nu procent, dar din pacate poza este mai mare decat originalul ea avand 180,224 bytes, in schimb calitatea pozei a ramas ok(Nu sunt diferente dar testati dand click aici si alternati intre taburi)(daca browser-ul nu deschide 2 tab-uri: Tab 1 si Tab 2).

Micsorare poza cu Simple Image Resizer
Resize cu Simple Image Resizer

Concluzie: Din moment ce poza rezultata este mai mare decat poza initiala noi am decis sa nu il folosim. Asta nu inseamna ca serviciul lor nu poate fi folosit. Cu un serviciu de optimizare bun, se pot ajunge la rezultate multumitoare.

Micsorare Imagini (Resize): resizemypicture.com (serviciu on-line disponibil gratuit)

Am dat la mai multe optiuni, si am specificat latimea si inaltimea, la calitate am ales 97%, la 98% deja poza rezultata era mai mare ca originalul. Am obtinut o poza de 159,744 bytes(diferenta aici, alternati intre taburi. )(daca browser-ul nu deschide 2 tab-uri: Tab 1 si Tab 2):

resizemypicture.com rezultate micsorare poza
resizemypicture.com rezultatele micsorarii pozei

Concluzie: Din pacate serviciul modifica calitatea pozei si in acest caz clientul fiind un fotograf nu il putem recomanda.

Micsorare Imagini (Resize) cu ajutorul site’ului webresizer.com (gratuit)

Am uploadat poza, si am ales new size 596(width) de restul nu ne-am atins. Ca idee setarile sunt quality: 80 si sharpen: 40. Poza rezultata are o dimensiune de 98,304 bytes(si nu s-a umblat la calitatea imaginii puteti testa aici )(daca browser-ul nu deschide 2 tab-uri: Tab 1 si Tab 2)

Poza cu resize
Poza Rezultata Folosind Serviciul Celor De la webresizer com

Concluzie: Un rezultat foarte bun, am micsorat imaginea cu peste 40% si calitatea pozei este identica. Un site pe care il putem folosi cu incredere, au API dar din pacate nu au o versiune pentru mai multe poze odata(batch resizing)

Micsorare Imagini (Resize) cu ajutorul site’urilor shrinkpictures.com si pixizer.com (servicii disponibile gratuit)

La Shrinkpictures am ales la custom 894 si calitate best, in rest default iar imaginea rezultata are 102,400 bytes , iar la pixizer am ales la advanced 596, am bifat keep aspect ratio si calitate 100 iar imaginea rezultata are 286,720 bytes
Pe primul il putem compara aici(daca browser-ul nu deschide 2 tab-uri: Tab 1 si Tab 2) iar pe al doilea aici(daca browser-ul nu deschide 2 tab-uri: Tab 1 si Tab 2)

Concluzie: Ambele site-uri distorsioneaza poza la calitate maxima, deci nu a avut sens o micsoram. Asta nu inseamna ca serviciile lor nu pot fi folosite pentru alte tipuri de poze.

Micsorare Imagini (Resize) cu ajutorul lui Irfan View (aplicatie offline gratuita)

Dam pe Resize/Resample, alegem 596×894,la filter ne-am asigurat ca Lanczos este selectat si am dat ok. Dupa care file, save as(am dat calitatea 100) si am mai bifat try to save with original JPG quality(estimation). Poza rezultata are 155,648 bytes(dar din pacate aceeasi problema, calitatea pozei nu este la fel. Puteti testa aici(daca browser-ul nu deschide 2 tab-uri: Tab 1 si Tab 2)

irfan view resize
Micsorare imagini (resize) cu irfan view

– La fel si cu RIOT(Radical Image Optimization Tool) un plugin pt irfan veiw.

Concluzie: Irfan View este un program cu multi ani experienta in manipularea pozelor si foarte bun. Este posibil ca rezultatele sa fie mult mai bune dupa ce umblam la setari. In scopul acestui tutorial noi l-am lasat cu setarile default.

Micsorare Imagini (Resize) cu ajutorul lui GIMP (GNU Image Manipulation Program – offline gratuit)

Image,scale image,596×894 algoritm Lanczos 3 dupa care file, export as si la calitate 93(default). La advanced options nu am umblat. Am obtinut o imagine de 155,648 bytes iar calitatea nu difera de original( puteti verifica aici.(daca browser-ul nu deschide 2 tab-uri: Tab 1 si Tab 2))

micsorare imagine (resize) cu gimp
micsorare imagine (resize) cu gimp

Concluzie: Gimp este un program forte bun ce poate fi folosit offline, nu modifica compozitia pozei, imaginea rezultata fiind mai mica(ca marime).


Am testat primele cateva servicii on-line pe care le-am gasit, conform cautarii asteia, nu suntem afiliati cu nici unul dintre site-urile sau programele testate. Dupa testele noastre va recomadam cu incredere pentru micsorarea,marirea(resize) imaginiilor urmatoarele:
1. GIMP – Merge offline
2. webresizer.com
3. picresize.com


Problema devine putin mai dificila cand avem de micsorat multiple poze(Batch Resizing). Solutia noastra:


Pentru cei ce nu au timp sa citeasca tot, am facut si un videoclip:

Trebuie sa vedeti si partea a 2’ua a acestui tutorial despre cum sa optimizezi imaginiile odata micsorate

Suntem curiosi ce programe folositi voi si cum? Spuneti-va parerea in comentarii.

Ultima Modificare: 28 august, 2017