Un dels primers reptes a què em vaig enfrontar com a webmaster d'aquest bloc, va ser el relacionat amb les imatges. Necessitava comprimir imatges (JPG, PNG, GIF) amb un nivell d'exigència molt alt si volia optimitzar els recursos del servidor i que a més carreguessin ràpid.
Avui us explicaré els 2 mètodes que utilitzo per editar i comprimir imatges com un veritable ninja. Durant els darrers 3 anys he provat de tot, però al final, això és el que millor em funciona, així que vull compartir-ho amb vosaltres.
Com comprimir una o diverses imatges de cop de la manera més senzilla possible
El que molta gent recomana per comprimir imatges és fer servir programes com Photoshop o altres editors multimèdia de l'estil. Cosa que està molt bé, però aquest tipus d'aplicacions no solen ser barates precisament ia més porten un munt de funcions pro que a mi personalment em sobren –només vull fer un parell de retocs i comprimir unes fotetes, no crear un curt d'animació de 8 minuts-.
Com editar i comprimir una imatge sense instal·lar cap aplicació
Quan l'únic que necessito és comprimir una imatge i ajustar-ne els marges i la mida utilitzo una eina web anomenada Pixlr Express. És una aplicació en línia que va veure la llum de la mà d'Autodesk fa anys –els mateixos de l'Autocad-, i que ara ha adquirit una altra companyia (123RF). Però anem al gra…
La cosa és que continua sent gratuïta i funciona igual de bé. No només això, sinó que no requereix registre i ens permet editar imatges, afegir filtres, tipografies i un bon grapat d'efectes. Jo fa temps que la tinc a la carpeta “favorits” del meu navegador.
Per comprimir una imatge amb Pixlr Express només hem de carregar la imatge a l'editor i donar-lo a “Save”. A l'hora de desar-la, l'eina ens permetrà aplicar el nivell de compressió desitjat (des del 0% al 100%).
A l'hora de desar és quan ens permet comprimir la imatgePer descomptat, la qualitat de la imatge anirà d'acord amb el nivell de compressió que apliquem. Com a recomanació personal, us aconsellaria que apliquéssiu un nivell de compressió del 65% respecte a l'original. És aquest punt on la imatge encara es veu bé i el seu pes es redueix dràsticament.
Com comprimir diverses imatges de cop i en cascada
Si tenim diverses imatges treballar amb Pixlr es pot fer una mica pesat. Per a aquests casos, utilitzo un programa gratuït anomenat RIOT (Radical Image Optimization Tool), especialment dissenyat per comprimir imatges JPG, GIF i PNG.
RIOT ens permet carregar una imatge, ajustar el nivell de compressió i veure una previsualització de com quedaria un cop aplicada la compressió. Això ens ve genial per ajustar-la al màxim possible i que encara es vegi bé.
Però la veritable màgia de RIOT està en la seva funció Batch. Des d'aquí podem carregar diverses imatges de cop (per exemple, totes les imatges contingudes a una carpeta o subcarpetes) i comprimir-les en cascada. Per això només hem de prémer sobre la icona de “Batch”, seleccionar la carpeta de destinació (Output folder) i la carpeta d'origen (Add images -> Add all images from folder). Un cop ho tenim tot al nostre gust, només cal prémer sobre “Start” per fer la compressió en massa per a totes les imatges seleccionades.
Així dóna gust, sents…La diferència entre comprimir imatges una per una i fer-ho així és senzillament abismal. Imagineu-vos que heu d'optimitzar totes les imatges d'un treball de la universitat, o pitjor, totes les imatges de la vostra pàgina web.
El nivell de compressió perfecte per a les imatges dun bloc o pàgina web
Com us comentava una mica més amunt, el nivell de compressió perfecte és del 65% per a pàgines web. Però això només és una recomanació personal…
Però si tenim una pàgina web i volem el nivell de compressió “perfecte” segur que voldrem alguna cosa més que la recomanació personal d'un xalat que es fa dir “l'androide feliç”.
Per a aquests casos, Google compta amb la coneguda pàgina per a administradors web Pagespeed Insights. Aquesta eina, a més de dir-nos la velocitat de càrrega de la nostra web i donar-nos algun consell, també ens permet descarregar-nos una còpia de totes les imatges que conté una URL concreta. Aquestes còpies de les imatges estaran 100% optimitzades.
Per descarregar les imatges hem d'introduir la URL on pengen les mateixes, i prémer sobre el botó de “Analitzar”. Un cop completat l'anàlisi, des de la pestanya “Ordinador” ens desplacem gairebé fins al final, i polsem sobre el link “Descarrega els recursos d'imatge, JavaScript i CSS optimitzats per a aquesta pàgina”. Automàticament obtindrem un fitxer ZIP amb aquests recursos ja optimitzats.
Està una mica amagat, però és una funció amb una utilitat brutalEspero que aquest tutorial us sigui d'ajuda. Si hagués pogut llegir una cosa així quan vaig començar amb aquest projecte, segurament m'hauria estalviat molts maldecaps.
P.D: Post dedicat al meu “jo” del passat. A veure si aprens, xaval!
Tens Telegram instal·lat? Rep el millor post de cada dia a el nostre canal. O si ho prefereixes, assabenta't de tot des de la nostra pàgina de Facebook.
