[:es]Optimizar imágenes: el gran drama del diseño web[:ca]Optimitzar imatges: el gran drama del disseny web[:]

[:es]

¿Qué haría una web sin imágenes? Probablemente, sería ignorada por la mayoría. O quizá se convertiría en paradigma de la lectura en diagonal.

Las imágenes son necesarias, ya sea para dar color a un artículo o aumentar el tiempo que los visitantes pasan en nuestra web.

Pero las imágenes también son problemáticas. En parte, porque requieren de cierta optimización y esa optimización no está al alcance de todo el mundo. Ya sea por tiempo o recursos, un buen número de empresas comparten sus fotografías, gráficos, etc. tal y como les llegan. Y si ese archivo original es enorme o pesa un quintal, las consecuencias se pagarán tarde o temprano.

Consecuencias de la imagen sin optimizar

La imagen sin optimizar se caracteriza por sus dimensiones y su peso.

¿Qué necesidad hay de publicar una imagen del tamaño de un póster cuando las estadísticas de tu sitio indican que el grueso de las visitas llegan de resoluciones estándar?

A más grande la fotografía, más pesará esta. A más peso, más recursos consumirá, a más recursos, menor la velocidad de carga. Así, hasta que Google dice: paso de vosotros por lentos.

Un ejemplo de drama vivido por no optimizar las imágenes

Un cliente basó parte de su proyecto en la publicación de amplias galerías de fotos.

Hasta ahí, perfecto.

Ocurrió que, en una ocasión, desatendiendo mis consejos, publicó una galería que, sumado el peso de todas las imágenes, rondaba los 500 megas.

Una barbaridad.

¿Qué ocurrió? Que a la que la galería comenzó a circular por Internet, la web se cayó a las pocas horas. Había agotado los recursos contratados a su proveedor de hosting.

¿Qué hizo? Aumentó considerablemente los recursos del hosting para que este soportara la carga. Al día siguiente, la web volvió a caerse.

La solución, muy a su pesar, fue optimizar las imágenes. Se tarda poco y, en la mayoría de casos, es un proceso que aplicaciones como Photoshop automatizan. Así que solo tienes que introducir ciertos parámetros a tu gusto y sentarte a ver cómo se procesan las fotos.

optimizar imágenes
Ejemplo de imagen pixelada... de los ochenta.

Formatos recomendados a nuestros clientes

Existen muchos formatos que pueden dar juego en una web pero, sinceramente, solo os interesan unos pocos. Algunos conocidos, como los archivos .jpg. La mayoría de las fotos que haces en tus vacaciones terminan en este formato.

Lo ideal en estos casos es aplicar una calidad media, ya que los .jpg evidencian las optimizaciones. Nadie quiere ver un producto pixelado, ya que faltaría a la realidad, en especial, si deseas vender esa realidad.

Los archivos .png son fieles al original pero, a la que te descuidas, se vuelven pesados e inútiles en una estrategia de posicionamiento. Puedes jugar con la cantidad de colores que muestren y así adelgazarlos un poco, pero volvemos al tema de la fidelidad. Al hacerlo, notarás que los degradados se malogran y la calidad general disminuye.

Los archivos .png funcionan bien en tiendas online que ofrecen imágenes de sus productos con fondo blanco o transparente. Una silla en solitario puede rondar los 50kb, pero a la que muestras esa silla en un ambiente, lo que sería una foto de estudio, el peso del archivo resultante puede oscilar entre los 150-250kb. Una locura.

¿Cómo optimizar tus imágenes?

Internet está llena de aplicaciones online que te permiten reducir las imágenes a formatos populares.

Si empleas WordPress, también existen plugins que te permiten manipularlas y reducirlas considerablemente. Aunque no lo recomiendo, ya que cargar la web de herramientas que tú mismo puedes gestionar offline es lo mismo que dirigirte al bar de la esquina a que te muelan el café que has comprado en el supermercado.

También puedes contratar a Discursiva o cualquier otro profesional que trabaje regularmente con imágenes, fotógrafos y diseñadores gráficos, principalmente.

¿Qué tamaños deberían tener mis imágenes?

Tendrían que ser lo más pequeñas posibles.

Las fotos de artículos y productos no deberían superar los 100kb. Si pasan esta cifra, que sea por poco. Más de 150kb es una carga innecesaria y cualquier test de velocidad te tumbará la web por lenta.

Existen excepciones que sí o sí requieren imágenes grandes y de calidad. Hablo de las cabeceras de post y las diapositivas de los carruseles. Acostumbran a requerir resoluciones que pasan de los 1300px. Inevitablemente ascenderán a los 200kb.

Lo importante es que evites la tentación de subir imágenes que superan los 200kb. Y ni mucho menos publiques imágenes en el formato y tamaño que salieron de la cámara.

Piensa que si tu galería pesa 100 megas, cualquier usuario vía móvil gastará 100Mb de sus datos para visualizarla. No le hará maldita la gracia. Olvídate de esa creencia que ciertos sectores solo consultan webs en ordenadores de sobremesa. Dímelo con las estadísticas de tu sitio en la mano.

Nombres de las imágenes: la optimización silenciosa

El nombre que les des a tus imágenes es uno de los muchos factores que Google tiene en cuenta cuando posiciona tu página.

Mucha gente no lo tiene en cuenta y apartan, sin quererlo, a sus imágenes de las primeras páginas de busca. La numeración de cámara o el fatídico unnamed de las imágenes enviadas por correo son dos de los errores más comunes cuando publicamos imágenes.

Es muy sencillo darles un título propio. Y si ese título incluye la palabra clave por la que estás posicionando, mejor. ¿Qué trabajas con muchas fotos? Añádeles numeración, así de sencillo. Herramientas como Adobe Bridge disponen de un renombrador en masa que va de perlas en estas situaciones.

Algunas conclusiones al optimizar las imágenes

Dedícales algo de tiempo. Impide que la desidia o el desconocimiento publiquen en Internet imágenes de dimensiones innecesarias (a no ser que lo tuyo sean los wallpapers). Controla el peso, como te diría un dietista, y, sobre todo, que muestren cierta calidad, que van a representarte ante muchas personas.

[ssba-buttons]

[:ca]

Què faria una web sense imatges? Probablement, ser ignorada per la majoria. O potser es convertiria en paradigma de la lectura en diagonal.

Les imatges són necessàries, ja sigui per donar color a un article o augmentar el temps que els visitants passen a la nostra web.

Però les imatges també són problemàtiques. En part, perquè requereixen certa optimització i aquesta optimització no es troba a l’abast de tothom. Sigui per temps o recursos, les empreses comparteixen les seves fotografies, gràfics, etc. tal com els arriben. I si aquest arxiu original és enorme o pesa una barbaritat, tard o d’hora, les conseqüències es paguen.

Conseqüències de la imatge sense optimitzar

La imatge sense optimitzar es caracteritza per les seves dimensions i el seu pes.

Quina necessitat hi ha de publicar una imatge de la grandària d’un pòster quan les estadístiques del teu lloc indiquen que el gruix de les visites arriben de resolucions estàndard?

A més gran la fotografia, més pesa aquesta. A més pes, més recursos es consumeixen, a més recursos, menys velocitat de càrrega. Així, fins que Google diu: us ignoro, sou uns lents.

Un exemple de drama viscut per no optimitzar les imatges

Un client va basar part del seu projecte en la publicació d’àmplies galeries de fotos.

Fins aquí, perfecte.

En una ocasió, desatenent els meus consells, va publicar una galeria on el pes de totes les imatges rondava els 500 megues.

Una barbaritat.

Què va ocórrer? Que a la que la galeria va començar a circular per Internet, la web es va caure al cap de poques hores. Havia esgotat els recursos contractats al seu proveïdor d’hosting.

Què va fer? Va augmentar considerablement els recursos de l’hosting perquè aquest suportés la càrrega. L’endemà, la web va tornar a caure.

La solució va ser optimitzar les imatges. Es triga poc i, en la majoria de casos, és un procés que aplicacions com Photoshop automatitzen. Així que només has d’introduir certs paràmetres al teu gust i asseure’t i mirar com es processen les fotos.

optimizar imágenes

Formats recomanats als nostres clients

Existeixen molts formats que poden donar joc en una web però, a l’hora de la veritat, solament us interessen uns pocs. Alguns coneguts, com els arxius .jpg. La majoria de les fotos que fas en les teves vacances surten en aquest format.

L’ideal en aquests casos és aplicar una qualitat mitjana, ja que els .jpg evidencien les optimitzacions. Ningú vol veure un producte pixelat, ja que faltaria a la realitat, especialment, si desitges vendre aquesta realitat.

Els arxius .png són fidels a l’original però, a la que et refies, es tornen pesats i inútils en una estratègia de posicionament. Pots jugar amb la quantitat de colors que mostrin i així aprimar-los una mica, però tornem al tema de la fidelitat. En fer-ho, notaràs que els degradats es malmeten i la qualitat general disminueix.

Els arxius .png funcionen bé en tendes online que ofereixen imatges dels seus productes amb fons blanc o transparent. Una cadira en solitari pot rondar els 50kb, però al mostrar aquesta mateixa cadira en un ambient, una foto d’estudi plena de matisos, el pes de l’arxiu resultant pot oscil·lar entre els 150-250kb. Una bogeria.

Com optimitzar les teves imatges?

Internet està plena d’aplicacions online que et permeten reduir les imatges a formats populars.

Si empres WordPress, també existeixen plugins que et permeten manipular-les i reduir-les considerablement. Encara que no ho recomano, ja que carregar la web d’eines que tu mateix pots gestionar offline és el mateix que dirigir-te al bar de la cantonada perquè et molguin el cafè que has comprat al supermercat.

També pots contractar a Discursiva o qualsevol altre professional que treballi regularment amb imatges; fotògrafs i dissenyadors gràfics, principalment.

Quina grandària haurien de tenir les meves imatges?

Haurien de ser el més petites possibles.

Les fotos d’articles i productes no haurien de superar els 100kb. Si passen d’aquesta xifra, que sigui per poc. Més de 150kb és una càrrega innecessària i qualsevol test de velocitat et tombarà el web per lent.

Existeixen excepcions que sí que requereixen imatges grans i de qualitat. Parlo de les capçaleres de post i les diapositives dels carrusels. Acostumen a requerir resolucions que passen dels 1300px. Inevitablement ascendiran als 200kb.

L’important és que evitis la temptació de pujar imatges que superin els 200kb. I ni molt menys publiquis imatges en el format i grandària que van sortir de la càmera.

Pensa que si la teva galeria pesa 100 megues, qualsevol usuari via mòbil gastarà 100Mb de les seves dades per visualitzar-la. No li farà maleïda la gràcia. Oblida’t d’aquesta creença que certs sectors solament consulten els webs en ordinadors de sobretaula. Digues-m’ho amb les estadístiques del teu lloc a la mà.

Noms de les imatges: l’optimització silenciosa

El nom que els donis a les teves imatges és un dels molts factors que Google té en compte quan posiciona la teva pàgina.

Molta gent no ho té en compte i aparten, sense voler-ho, a les seves imatges de les primeres pàgines de cerca. La numeració de càmera o el fatídic unnamed de les imatges enviades per correu són dos dels errors més comuns quan publiquem imatges.

És molt senzill donar-los un títol propi. I si aquest títol inclou la paraula clau per la qual estàs posicionant, millor. Què treballes amb moltes fotos? Afegeix-los numeració, així de senzill. Eines com Adobe Bridge disposen d’un renombrador en massa que va de perles en aquestes situacions.

Algunes conclusions en optimitzar les imatges

Dedica’ls una mica de temps. Impedeix que la desídia o el desconeixement publiquin en Internet imatges de dimensions innecessàries (tret que el teu negoci sigui vendre wallpapers). Controla el pes, com et diria un dietista, i, sobretot, que mostrin certa qualitat, que moltes persones les han de veure.

[ssba-buttons]

[:]