Tutorial: Optimizare imagini pentru blog

Anul trecut mă aflam într-o seară discutând cu Daniela despre blogul ei și de faptul că se mișcă foarte încet. Problema ei a fost imaginile neoptimizate, direct din aparatul ei foto.

Că tot spunea Daniela despre dâng-dâng-dâng, am pățit-o și eu zilele trecute. Am trecut pe alt server, mai performant, mult mai rapid de la Brainhost și evident că am început să fac teste pe blogul meu.

Mare mi-a fost mirarea când am observat că am nota 17/100 la Mobile și 19/100 pentru desktop. Am zis un mare WTF?!?!?!. Folosind indiciile de la PageSpeed Insights by Google, am aflat unde era buba. Imaginile mele erau ei bine, neoptimizate.

Pentru că li se poate întâmpla chiar și celor mai buni dintre noi, am pățit-o fix ca Daniela. Cu toate că am instalat un WPSmush, treaba nu era treabă. Așa că, hai să downloadez folder-ul prin poze și hai să le optimizez.

CONCURS: Câștigă 10 000 de credite ShortPixel pentru optimizarea pozelor tale de pe blog. Află mai multe detalii!

Acum nu știu câte poze a avut Daniela de optimizat, însă eu am avut aproape 10 000 de poze. Ca să reduc din spațiu și să cresc viteza blogului, a trebuit să fac și redimensionarea lor la o limită de 1200 px width.

Photoshop-ul oferă posibilitatea prin Scripts-Image Processor, dar problema a apărut (poate că am fost un total habarnist) când am setat redimensionarea la 1200px. Pozele mici mi le-a făcut la 1200px iar cele mari mi le-a redus la 1200px.

Unelte pentru optimizarea pozelor

De anul trecut și până acum, am tot căutat un soft care să-redimensioneze rapid pozele. Și am găsit o unealtă care îți redimensionează pozele la o rezoluție pe care o setezi, ori păstrând aspect ratio-ul la un width setat de tine.

Plastiliq ImageResizer este un software dezvoltat de Plastiliq Software care face mai mult decât să redimensioneze pozele. Secretul în folosirea acestui instrument este ca înainte de toate să faci setările necesare corespunzătoare.

În cazul meu, am intrat în Options (iconița cu cheia de 32) și am bifat „Do not enlarge smaller images.” și am setat la JPEG Format – Quality „50”.

Următoarea setare pe care trebuie să o faci este să alegi la Mode „Width (Keep proportions) și

mai jos să setezi dimensiunea maximă pentru pozele tale. Nu uita să modifici Destination cu calea către folder-ul unde vrei să pui pozele.

Structura directoarelor din folder-ul tău de uploads din wp-content/uploads este compusă pe ani. Adică toate imaginile folosite în 2008 sunt structurate pe luni 01,02,03 … etc și așa mai departe.

Dacă vei pune tot folder-ul uploads în Plastiliq ImageResizer (așa cum am făcut eu) crezând că va păstra ierarhia subfolderelor, vei comite o mare eroare. Pentru că în directoriul destinatar le va pune pe toate redimensionate fără nici un fel de structură. Și nu faci nimic așa. Vei pierde foarte, foarte mult timp așa cum am făcut eu!

În schimb crează o structură de foldere, asemănătoare cu a ta și apoi ia-le la rând, fiecare an, cu fiecare lună în parte și redimensionează-le.

După redimensionat, optimizarea imaginilor

Daniela spunea ceva despre Optimizilla, cred că atunci i-am recomandat acest site pentru optimizarea lor. Problema este că poți urca doar 20 de poze, pe rând.

Recent am descoperit și TinyPNG. Aceste site-uri fac o treabă foarte bună în a optimiza imaginile tale. Diferența dintre ele două este că TinyPNG nu-ți redenumește fișierele, astfel fiind mai simplu să urci, să descarci și să rescrii peste fișierele vechi.

Ești blogger? Din luna mai Google nu-ți mai permite să faci asta!

Dar dacă ai host de unde am și eu, de la Brainhost, optimizarea imaginilor se pot face în background, astfel încât tu nici nu-ți dai seama și nici nu trebuie să faci ceva.

Rezultatul?

Rezultatul acestor optimizări se poate vedea în poza de mai jos:

O scădere de 256% a spațiului ocupat pe server. Ceea ce nu este rău, așa-i? Ținând cont că am poze din 2008, încă din primul an de când m-am apucat să scriu pe blogul meu.

<div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-103532497-8358-68ffc50c036fd' data-src='https://widgets.wp.com/likes/?ver=13.8.1#blog_id=103532497&post_id=8358&origin=damianirimescu.ro&obj_id=103532497-8358-68ffc50c036fd&n=1' data-name='like-post-frame-103532497-8358-68ffc50c036fd' data-title='Apreciază sau republică'><h3 class="sd-title">Apreciază:</h3><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Apreciază</span></span> <span class="loading">Încarc...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div>