Cómo optimizar imágenes para WordPress

Por en

Introducción

Esta es la primera entrega sobre como optimizar imágenes para WordPress, en respuesta a las optimizaciones sugeridas de GTmetrix. Aunque con pocos artículos, como pueden notar mi costumbre es hacer artículos muy largos y a fondo, en vez de cien articulitos (técnica de algunos sitios para jalar y retener visitas); de esta manera siempre encontrarás en un solo lugar todo lo que quieras sobre optimizar de imágenes para WordPress en un sólo lugar, sin tener que brincar entre cien posts. De ser necesario, actualizaré el artículo con lo que le haga falta.

¿Porqué optimizar imágenes?

La respuesta es fácil: son la mayor parte del total descargado de tu sitio; es decir, consumen la mayor parte del ancho de banda que se usa para ver tu sitio. Por lo tanto, optimizar imágenes debe ser un paso importante en tu estrategia de posicionamiento. Desgraciadamente, lo más fácil es ir a Google, buscar un tema en particular, tomar cualquier imágen que te venga en gana, y empotrarla en tu contenido. Tristemente, terminarás con una página que pesa 10 o más megabytes, un crimen cuando en la actualidad GTmetrix reporta que el tamaño promedio de una página es 2.5 MB, y eso para mi ya es lo suficientemente alto. Y recuerda: mientras más grande sea el tamaño total de tu página, más tiempo de descarga, y mientras más tiempo de descarga…los usuarios se van a otro sitio. Y si ahí tienes tu negocio, adiós dinero.

Gráfica de pie de promedio de bytes por tipo de contenido
Promedio de bytes por tipo de contenido en un sitio (tomado de Kinsta)

Qué aprenderás en esta guía de optimización

A diferencia de otros artículos que se centran en plugins para optimizar imágenes para WordPress, en este la intención es que entiendas desde los conceptos básicos de imágenes y sus términos, hasta pasar por conceptos de optimización y finalmente llegar a tocar temas de como WordPress procesa imágenes, y claro, tocando también el tema de los plugins que nos pueden ayudar a optimizar las imágenes en WordPress. En concreto, atacaremos 3 recomendaciones de GTmetrix: Optimize images, Specify image dimensions, y Serve scaled images.

Conceptos básicos sobre imágenes

Tipos de imagen

Básicamente hay dos tipos de imágenes: raster y vectoriales.

Comparativa de como se ve un acercamiento entre una imagen raster y una vectorial
Acercamiento en una imagen raster (izquierda) y en una imagen vectorial (derecha) (tomado de Google)
  • Raster: las imágenes raster o mapas de bits son aquellas que están compuestas de un arreglo bidimensional, en el que la intersección de líneas con columnas representa un pixel en pantalla, papel o cualquier otro medio. Los JPG o PNG que usas a diario son imágenes de tipo raster. Si te preguntas porqué se llaman raster, bueno, viene de la palabra en latín “rastrum” (rastrillo), y tiene que ver con la forma de barrido que hacían los tubos de rayos catódicos para pintar la imagen en pantalla, haciendo un barrido pintando pixel a pixel, línea a línea, de izquierda a derecha, de arriba hacia abajo. Por último, si se reducen o se amplían, pueden perder detalle significativamente.
  • Vectoriales: las imágenes vectoriales, en vez de representarse con pixeles, éstas se representan con fórmulas matemáticas que describen muchas figuras y otras construcciones gráficas. Por su naturaleza, pueden ampliarse tanto como los recursos de una computadora lo permitan, sin perder detalle.

Profundidad de color de una imagen

Hablando de imágenes raster, un tema importante es en relación a los colores que puede representar. Ya mencionamos que los las imágenes raster están compuestas de pixeles, y estos a su vez codifican la información de color usando el mínimo almacenamiento posible en una computadora, es decir, usan bits para representar los colores disponibles. Si no te queda muy claro esto de los bits no te preocupes, basta con que leas esta sección para que recuerdes que tipos de color se ofrecen en las imágenes raster:

  • Monocromo: las imágenes monocromáticas usan un sólo bit por pixel para representar los colores, y como te podrás imaginar, estos colores son blanco y negro. Son dos colores puesto que el máximo número de valores a representar con un bit es 2^1 = 2. Estas imágenes por lo general son usadas para clipart en blanco y negro, o bien para dibujo de líneas.
  • Color indexado: generalmente usan 8 bits por pixel y permiten un máximo de 256 colores (2^8 = 256); pueden ser en escala de grises o bien en color.
  • Color alto: las imágenes en color verdadero usan 15/16 bits para representar cada pixel, pueden representar hasta 65,536 colores dependiendo de la configuración.
  • Color verdadero: usan 24 bits por pixel, lo cual permite representar 16,777,216 variaciones de color, mucho más que los 10 millones que percibe el ojo humano; en este formato viene la gran variedad de imágenes que ves en los sitios hoy en día.

Hay otros modos de color, pero no son útiles en la web y no serán tratados aquí.

Resolución de una imagen

Cuando se trata de optimizar imágenes este es un tema que generalmente muchos tienen al revés y peor aún, la industria también muchas de las veces. El término resolución de una imagen se refiere a la cantidad de información que se almacena por pulgada de imagen en pantalla (PPI) o impresa (DPI). En menos palabras, PPI se refiere a la densidad de la pantalla (pixeles por pulgada), y DPI se refiere a la densidad de tu impresora (puntos por pulgada). En cualquier caso, ambas medidas tienen que ver con impresión, no con el despliegue de imágenes. No ahondaré más en el tema porque honestamente sólo sirve para confundir a la gente, y como ya dije, tiene que ver con imprimir tus imágenes, lo cual no nos importa ahora. Para los que quieran complicarse la vida pueden leer este artículo de Wikipedia donde se trata a fondo el tema.

Y aquí está la confusión respecto a la resolución en imágenes web: no importa en absoluto que resolución escojas; como mencioné antes, DPI y PPI tienen que ver con impresión: una imagen a 72dpi y otra a 300dpi se ven igual en la web, es decir, en la web lo que cuenta es la dimensión en píxeles de la imagen, y nada más.

Formatos de imagen

En la web se usan básicamente 4 formatos de imagen:

  • JPG: es dos cosas en una: es un algoritmo de compresión y un formato de imagen raster. Este algoritmo de compresión permite reducir el tamaño de la imagen a través de compresión con pérdida, es decir, a costa de la calidad visual de la imagen. Es un formato muy versátil y bien usado puede cumplir con casi todas las exigencias de uso actuales. Soporta cualquier profundidad de color, aunque su gran talón de aquiles es que no admite transparencias. Funciona muy bien para fotos de cualquier tipo.
  • PNG: el formato raster Portable Network Graphics se usa para generar imágenes que comprimen sin pérdida, es decir, la imagen original y la imagen destino son iguales. Fue creado como una alternativa al formato GIF y sus problemas de patentes. Soporta color indexado, escala de grises (ambos como PNG8), y color verdadero (PNG24), y lo mejor de todo, soporta transparencia (PNG24 o PNG32), y no sólo eso, sino que la transparencia que soporta un PNG es mucho más compleja que la que ofrecen los GIF, lo que permite resultados mucho mejor logrados.
  • GIF: es un formato raster muy viejo (su primera versión salió en 1987) y que se usó mucho tiempo en la web, usa un algoritmo de compresión en el contenido de la imagen y permite sólo color indexado. Sólo queda una característica que ha hecho que el formato GIF permanezca vivo hasta ahora, y es que puede soportar animaciones, pero son un dolor de trasero generarlas (y ni se diga modificarlas). Sin embargo, excepto esto de las animaciones, es superado por el formato PNG en todo.
  • SVG: el único formato vectorial que usaremos durante este artículo; permite usar XML para describir las imágenes y su comportamiento; esto hace que puedan ser buscadas, indexadas, y comprimirlas; se pueden editar ya sea con un editor de texto o bien con un editor especializado. Así que son pequeños, fáciles de hacer, y fáciles de usar. ¿Qué tienen en contra? algunos argumentan que pueden traer problemas de seguridad a tu plataforma, puesto que pueden incluir código. Ya hablaremos de esto más adelante.

¿Cuándo usar cada formato?

Google nos ofrece este útil diagrama de flujo para determinar que formato usar:

Diagrama de flujo para elegir el mejor formato de imagen
Diagrama de flujo para elegir el mejor formato de imagen

Como puedes ver, cada formato tiene su utilidad particular; no hay uno sólo que se use para todas las situaciones, por ello es importante que aprendas donde y como usar cada formato de imagen eficientemente. Resumiendo:

  • No uses el formato GIF a menos que necesites animaciones, y de llegar a este punto te preguntaría: ¿en serio necesitas esa animación?
  • Reemplaza el uso del formato GIF con imágenes PNG8 cuidadosamente optimizadas.
  • No desprecies el uso de imágenes PNG24, son bastante útiles para mostrar imágenes de capturas de pantalla con controles, como por ejemplo las pantallas de configuración de WordPress. Se ven muy bien y optimizadas pueden tener un tamaño bastante bajo. Muchas de ellas pueden pasarse a PNG8 reduciendo aún más su tamaño.
  • Las imágenes JPG son todo terreno; sin embargo, mi recomendación es usar imágenes tan simples como se pueda. Aún cuando no pueda ser así, el formato JPG ofrece las mejores prestaciones para imágenes de un tamaño medio-alto.

Cómo optimizar imágenes para WordPress y la web en general

Hablando de WordPress hay dos momentos en que debemos de ver que las imágenes queden optimizadas; la primera parte es durante la carga, pero también hay que tener en cuenta una segunda parte, que es la generación de diversos tamaños que son configurables desde el panel de administración en Ajustes > Ajustes de Medios. Vamos a empezar con optimizar las imágenes antes de cargarlas a WordPress.

El mejor optimizador de imágenes

No es un plugin, no es una aplicación; el mejor optimizador de imágenes está entre tus orejas. No hay sustituto para las decisiones que toma tu cerebro en conjunto con otros sentidos, en este caso la vista. En ciertas cuestiones, como en este caso de la optimización de imágenes, si quieres los mejores resultados lo mejor es hacerlo a mano. Con soluciones automatizadas obtendrás buenos resultados, pero en la gran mayoría de los casos, no serán los mejores.

La optimización empieza desde la selección

No elijas imágenes a lo loco; piensa en su aplicación primero que nada: no es lo mismo una imagen para un slider que para una imagen destacada. Una regla que siempre sigo y me deja buenos resultados es elegir imágenes que tengan un contenido simple. ¿A que me refiero con simple? una imagen con pocos elementos discernibles; fíjate en los encabezados que uso en este mismo sitio, en este artículo: ¿notas como las imágenes generalmente son acercamientos o bien tienen zonas contínuas muy grandes? no es al azar, lo hago porque esas imágenes sin tantos elementos se comprimen mejor. Si alguien recuerda el artículo de hace unos días sobre el GDPR/RGPD, les comento que el encabezado es un JPG de 1600×500 pixeles, y ¿saben de que tamaño es? 38.3 kilobytes. Pero como les dije, no es deliberado: si hubiera elegido otra imagen mucho más compleja, me hubiera sido imposible lograr un tamaño similar.

Recuerda: la optimización empieza desde la elección de la imagen y el uso que pretendes darle.

¿En que tamaño necesitas la imagen?

Esto arregla sugerencia de GTmetrix “Serve scaled images“.

Siempre usa las dimensiones exactas de la imagen en los atributos height y width de la etiqueta <img>; nunca uses estos parámetros para mostrar la imagen a un tamaño distinto; al hacer esto sólo te engañas tu mismo, pues la imagen se transmite tal cual y el redimensionamiento se hace en tu navegador, es decir, siempre transmites la misma cantidad de información desde el servidor:

Ilustración que muestra los efectos de escalar la imagen en el navegador
Mientras no uses el tamaño nativo de la imagen, estás cometiendo un grave error…

En pocas palabras, si recibes esta alerta en GTmetrix, descarga la imagen en cuestión, redimensiónala o recórtala de modo que tenga el tamaño correcto, y vuelve a subirla reemplazándola en el lugar correcto.

Lo primero es dejar la imagen del tamaño en que la necesitas; esto varía de acuerdo a su finalidad, y tendrás que consultar la documentación de tu tema para saber que tamaños necesitas dependiendo de la situación. Generalmente la documentación de tu tema incluye tal información. Recuerda, aquí no importa la resolución de la imagen, importa el tamaño en pixeles. En una herramienta como PhotoShop es muy fácil recortar la imagen al tamaño que quieres; la herramienta Recorte (o Crop en inglés) permite meter las dimensiones exactas en que quieres recortar la imagen, de modo que al redimensionarla no tienes que estar haciendo cálculos. Para redimensionar una imagen al tamaño que quieras, sigue estos pasos en PhotoShop CC (otras versiones anteriores son muy similares en este aspecto):

Recortar imagen con Photoshop
Instrucciones de cómo recortar una imagen en PhotoShop
Cómo recortar una imagen en PhotoShop
  1. Abre la imagen que desees.
  2. Vamos a recortar la imagen a unas medidas personalizadas de 400×300; elije la herramienta Recortar (o presiona C), y en la barra de parámetros elije ‘Proporción’, 400 y 300 en los tres primeros campos; cuando lo hagas verás que el área de recorte cambia; nota que nuestras dimensiones son menores que la imagen, y aún así Photoshop calcula la proporción de nuestro recorte en relación al tamaño actual de la imagen.
  3. Haz doble clic sobre la imagen para aplicar el recorte; nota que la imagen sigue en sus dimensiones originales proporcionales.
  4. Ve a Imagen > Tamaño de imagen y establece estos valores, y haz clic en el botón Ok. Al hacer esto, tu imagen estará en el tamaño que deseas.
Recortar imagen con GIMP
Instrucciones para cómo recortar una imagen en GIMP
Cómo recortar una imagen en GIMP
  1. Clic en la herramienta Recorte.
  2. Clic en la pestaña de propiedades de herramienta.
  3. Si sabes el tamaño exacto de tu recorte, lo puedes poner en el apartado tamaño, en ancho por alto (fíjate que el selector de tamaño esté en Pixeles ‘Px’), o bien haz clic en la imagen y arrastra el cursor hasta que tengas una selección inicial.
  4. La selección previa que hiciste puede ser ajustada en las esquinas o bien en sus lados, de modo que quede a la medida exacta; fíjate en la sección Tamaño en las Propiedades de herramienta para ver que tamaño tienes seleccionado.
  5. Recorta tu imagen haciendo doble clic o bien presionando Enter.

Siempre especifica las dimensiones de las imágenes

Esto arregla sugerencia de GTmetrix “Specify image dimensions“.

Seguramente sabes que cuando se incrustan imágenes con HTML siempre se deben especificar tanto el alto como el ancho usando los parámetros height y width. ¿Pero porqué hay que hacer esto? simple, te lo voy a explicar con una analogía: imagina que compras un mueble para tu casa, el que sea funciona. Si eres como todos, lo primero que quieres saber son las medidas de ese nuevo mueble, de modo que puedas acomodar todo lo demás de la pieza de tu casa donde quieras poner ese mueble nuevo. Los navegadores son iguales: si un navegador obtiene una imagen sin dimensiones, acomoda como puede los objetos, y cuando recibe calcula las dimensiones entonces reacomoda los objetos para hacer espacio suficiente para la imagen. En cambio, si recibe el tamaño desde la descarga, ya sabe cuanto espacio tiene que reservar para ésta. Al optimizar imágenes es un cambio muy simple, pero que tiene mucho efecto.

Cómo optimizar el tamaño de la imagen

Esta sección arregla las sugerencias de GTmetrix “Optimize images“.

Optimizar el tamaño de una imagen no es más que jugar con el formato y los parámetros de cada uno, respectivamente. Sigue estos consejos para lograr los mejores tamaños en tus imágenes:

Cómo optimizar el formato JPG

Usalo en fotos, en general imágenes con contenido complejo. Recuerda que la mitad de la batalla es que la imagen tenga las dimensiones correctas; por nada del mundo subas imágenes sacadas directo de tu cámara fotográfica o celular, primero recórtalas. Recuerda que el formato JPG usa compresión con pérdida, es decir, permite subir la tasa de compresión del archivo a costa de la calidad de la imagen. ¿Cuánto es suficiente? casi todas las aplicaciones que permiten guardar en JPG previsualizan los resultados y el tamaño proyectado del archivo, así que la justa medida de la calidad de un JPG es el punto en el cual la compresión no genera artefactos visuales significativos, como se ve en la siguiente imagen:

Tip: hay dos subtipos de imágenes JPG: baseline y progresivas. Las imágenes JPG baseline se muestran poco a poco cuando se descargan, las imágenes JPG progresivas se muestran completas con calidad incremental en varias etapas. Éstas últimas son más eficientes en la web, además de que son un poco más pequeñas. Cuando tengas la opción, usa JPG progresivo.

Cómo optimizar el formato JPG en Photoshop CC
Cómo optimizar una imagen JPG en Photoshop CC
Cómo optimizar una imagen JPG en Photoshop CC

Ve a Archivo > Exportar > Exportar como.

  1. Selecciona Formato > JPG.
  2. Abre el desplegable Calidad y mueve el indicador hasta que encuentres la justa medida entre el tamaño del archivo y que la calidad visual no se vea muy afectada.
  3. Si lo necesitas, en el grupo Tamaño de la imagen puedes cambiar el tamaño de la misma, pero preferentemente hazlo antes de llegar a esta opción de exportación.
  4. Verifica que no se exporten metadatos (grupo Metadatos > Ninguno), y que esté habilitado Convertir en sRGB. Por último, presiona clic en Exportar todo para generar tu archivo JPG.
Cómo optimizar el formato JPG en Photoshop 'Exportar a web'
Cómo optimizar una imagen JPG en Photoshop (Guardar para web)
Cómo optimizar una imagen JPG en Photoshop (Guardar para web)

Ve a Archivo > Exportar > Guardar para web (heredado).

  1. Selecciona la pestaña “Optimizado”.
  2. Selecciona JPG.
  3. Abre el desplegable Calidad y mueve el indicador hasta que encuentres la justa medida entre el tamaño del archivo y que la calidad visual no se vea muy afectada.
  4. Habilita la casilla “Progresivo”.
  5. Si deseas experimentar, añadiendo un poco de desenfoque puedes exprimirle poco más al tamaño a tu archivo final.
  6. Verifica que esté habilitada la casilla Convertir en sRGB; Si lo necesitas, en el grupo Tamaño de la imagen puedes cambiar el tamaño de la misma, pero preferentemente hazlo antes de llegar a esta opción de exportación.
  7. Por último, presiona clic en Guardar para generar tu archivo JPG.
Cómo optimizar el formato JPG en GIMP
Cómo optimizar una imagen JPG en GIMP
Cómo optimizar una imagen JPG en GIMP
  1. Ve a Archivo > Exportar como.
  2. Escribe el nombre, incluye la extensión ‘.jpg’; verifica que abajo diga “Seleccione el tipo de archivo (por extensión)”; si dice eso no es necesario hacer nada más, GIMP intuye por la extensión de tu nombre de archivo el formato de salida.
  3. Presiona Exportar, lo que hace que se cierre la pantalla y se abra otra titulada “Exportar imagen como JPG”.
  4. Haz clic en “Mostrar vista previa en la ventana de la imagen”, para que se muestren los cambios al momento en la imagen en la que estás trabajando.
  5. Haz clic en “Opciones avanzadas”.
  6. Habilita “Optimizar”, “Progresivo” y deshabilita cualquier otra casilla.
  7. Juega con la barra “Suavizado” con valores bajos; puede darte unos kilobytes de ganancia.
  8. Submuestreo se refiere a la adaptación de los colores al ojo humano:
    1. 4:4:4 da los mejores resultados
    2. 4:2:2 da resultados intermedios
    3. 4:1:1 da los archivos con tamaño más bajo, pero con colores algo desnaturalizados
  9. Método DCT se refiere a un método matemático que usa internamente el formato JPG, déjalo en “Coma flotante”.
  10. Juega con el control deslizante “Calidad” hasta que veas que tu JPG queda en el tamaño (hay una previa abajo de este control de claidad) y con calidad visual aceptables.
  11. Haz clic en Exportar para obtener tu JPG.
Tip avanzado de optimización JPG: aplica desenfoque Gaussiano

El desenfoque gaussiano es un proceso que se aplica a una imagen para que parezca borrosa. Te preguntarás, ¿porqué demonios quiero que se vea borrosa mi imagen? bueno, en este caso en particular vamos a aplicar un desenfoque gaussiano muy pero muy pequeñito de modo que se lleve características muy finas de la imagen como ruido y otros artefactos visuales que hacen que nuestra imagen crezca de más.

Desenfoque gaussiano en Photoshop CC
  1. Ve a Filtro > Desenfocar > Desenfoque gaussiano.
  2. Aplica un desenfoque tan pequeño que apenas sea perceptible, algo alrededor de 0.2 – 0.5., dependerá mucho de la imagen que quieras optimizar.
  3. Aplica el proceso de optimizar tu imagen, deberás ver una pequeña ganancia.
Desenfoque gaussiano en GIMP
  1. Ve a Filtros > Difuminar > Desenfoque gaussiano.
  2. Aplica un desenfoque tan pequeño que apenas sea perceptible, algo menor a 1.0, dependerá mucho de la imagen que quieras optimizar.
  3. Aplica el proceso de optimizar tu imagen, deberás ver una pequeña ganancia.

Cómo optimizar el formato PNG

Logos, gráficos pequeños, y lo que sea que necesite transparencia son el dominio del formato PNG, en particular del formato PNG8, que admite hasta 256 colores y transparencia. Un uso en donde los PNG8 brillan es para capturas de pantallas, como por ejemplo, pantallas de configuración con controles. Evita su uso para fotos o para imágenes complejas, se ven muy bien pero los tamaños son monstruosos y sólo harán que tu puntuación de GTmetrix y otros medidores se vayan a pique.

Cómo optimizar el formato PNG en Photoshop CC
Cómo optimizar el formato PNG en Photoshop CC
Cómo optimizar el formato PNG en Photoshop CC

Ve a Archivo > Exportar > Exportar como.

  1. Selecciona Formato > PNG.
  2. Indica si la imagen tiene transparencia o no.
  3. Indica si quieres generar un PNG más pequeño (un PNG8 en realidad). Estas opciones generan varios tipos de PNG: si la casilla Archivo más pequeño (8 bits) está habilitada, se genera un PNG8; si está deshabilitada y se habilita Transparencia, se genera un PNG32 y si ambas están deshabilitadas, se genera un PNG24. Mantén la vista a la izquierda donde se muestra un precálculo del tamaño que tendrá el archivo final.
  4. Si necesitas hacer cambios en las dimensiones de la imagen, puedes hacerlo en el grupo Tamaño de imagen, aunque te recomiendo hacerlo antes de entrar aquí. Verifica que no se guarden metadatos, y que esté habilitada la casilla Convertir en sRGB;
  5. Por último, presiona clic en Exportar todo para generar tu archivo PNG.
Cómo optimizar el formato PNG en Photoshop 'Exportar a web'
Cómo optimizar el formato PNG en Photoshop 'Exportar a web
Cómo optimizar el formato PNG en Photoshop ‘Exportar a web

Ve a Archivo > Exportar > Exportar para Web (heredado).

Para producir un PNG8

  1. Haz clic en la pestaña Optimizado.
  2. Elige PNG8.
  3. Elije un modo de reducción de color:
    1. Perceptual: prioridad a colores para los cuales el ojo humano es más sensible. Este funciona muy bien en la mayoría de los casos.
    2. Selectivo: parecido al perceptual pero favorece áreas amplias de color y la preservación de colores web.
    3. Adaptivo: construye una tabla de los colores más presentes en la imagen
    4. Restrictiva (web): usa la tabla de 216 colores seguros.
  4. Elije un modo de tramado (difusión, motivo, ruido), recomiendo Difusión.
  5. Elije si deseas respetar la transparencia.
  6. Elije el tramado de la transparencia.
  7. Modifica el total de colores de la imagen; baja tanto como puedas, ve la imagen para que no sobreoptimizes y pierda calidad tu imagen final.
  8. Aplica un halo si tienes transparencia, eso le dará un mejor acabado
  9. Cambia de tamaño si lo necesitas en Tamaño de imagen. Por último, presiona Guardar para exportar tu PNG.

Para producir un PNG24

  1. Haz clic en la pestaña Optimizado.
  2. Elige PNG24.
  3. Indica si tiene transparencia.
  4. Indica si lo deseas entrelazado (se muestra por partes).
  5. Si usas transparencia, considera ponerle un halo, tendrá mejor acabado la imagen.
  6. No incrustes el perfil de color.
  7. Habilitar Convertir en sRGB.
  8. Selecciona Metadatos > ninguno.
  9. Cambia de tamaño si lo necesitas en Tamaño de imagen.
  10. Por último, presiona Guardar para exportar tu PNG.
Cómo optimizar el formato PNG en GIMP

Para producir un PNG8

Nota: no soy experto en GIMP pero me parece que la exportación a PNG no funciona bien; si se cambia el desplegable de pixelformat, independientemente del formato de pixel que se escoja se genera un PNG24, por eso sugiero antes cambiar la imagen a color indexado.

Primero necesitamos la imagen en color indexado:

Cómo optimizar el formato PNG en GIMP
Cómo optimizar el formato PNG en GIMP
  1. En el menú principal ve a Imagen > Modo > Indexado.
  2. Selecciona “Generar paleta óptima”, deja número de colores en el máximo de 256.
  3. En “Difuminar el color” selecciona “Ninguno”; si pones un método aquí, quizás obtengas una mejor imagen, pero con mayor tamaño.
  4. Si la imagen tiene transparencia, selecciona “Activar difuminado de la transparencia”.
  5. Presiona Convertir, lo cual te dejará con una imagen con color indexado.

Ahora podemos proceder a exportarla:

  1. Ve a Archivo > Exportar como.
  2. Escribe el nombre, incluye la extensión ‘.png’; verifica que abajo diga “Seleccione el tipo de archivo (por extensión)”; si dice eso no es necesario hacer nada más, GIMP intuye por la extensión de tu nombre de archivo el formato de salida.
  3. Presiona Exportar, lo que hace que se cierre la pantalla y se abra otra titulada “Exportar imagen como PNG”.
  4. Desmarca todo, verifica que el desplegable diga “8bit RGB”, y que el Nivel de compresión sea 9.
  5. Abre la sección colapsada “Avanzada”, desmarca todo.
  6. Presiona Exportar.

Para producir un PNG24

  1. Ve a Archivo > Exportar como.
  2. Escribe el nombre, incluye la extensión ‘.png’; verifica que abajo diga “Seleccione el tipo de archivo (por extensión)”; si dice eso no es necesario hacer nada más, GIMP intuye por la extensión de tu nombre de archivo el formato de salida.
  3. Presiona Exportar, lo que hace que se cierre la pantalla y se abra otra titulada “Exportar imagen como PNG”.
  4. Desmarca todo, verifica que el desplegable diga “Automatic pixelformat”, y que el Nivel de compresión sea 9.
Tip avanzado: posteriza

La posterización es un proceso en el cual una imagen con tonos continuos se reduce en menos tonos más diferenciados; para efectos prácticos de esta guía, posterizar una imagen significa una reducción en colores, y seguramente en detalle de la imagen, si es que se aplica demasiado agresivamente. Pero en niveles controlados, la posterización es muy efectiva reduciendo la complejidad de la imagen en cuestión, lo que hace que haya menos información y esta se pueda comprimir de mejor manera. Veamos este ejemplo:

Imagen de corona sin posterizar
Exportado sin posterizar = 16Kb
Imagen de corona con posterizado
Imagen con posterizado = 14Kb

Como puedes ver, aplicar una pre-posterización a la exportación puede darte una ganancia extra.

Posterización en Photoshop CC
  1. Ve a Imagen > Ajustes > Posterizar.
  2. Ve que esté habilitada la opción previsualizar para que veas reflejados tus cambios antes de aplicarlos.
  3. Ajusta la barra de niveles hasta que veas que la imagen se sigue viendo tan cerca a la original como sea posible.
  4. Presiona Ok para aplicar los cambios.
Posterización en GIMP
  1. Ve a Colores > Posterizar.
  2. Ve que esté habilitada la opción previsualizar para que veas reflejados tus cambios antes de aplicarlos.
  3. Ajusta la barra de niveles hasta que veas que la imagen se sigue viendo tan cerca a la original como sea posible.
  4. Presiona Aceptar para aplicar los cambios.
Tip avanzado: no descartes el formato PNG24
Imagen en formato PNG8 queda de 833b
PNG8 150×150 833b
Imagen PNG24 queda en 369b
PNG24 150×150 369b

Si vas a trabajar con una imagen con pocos colores y sin transparencia, hay muchas probabilidades de que el formato PNG8 genere una imagen más grande que el formato PNG24. ¿Porqué es esto? bueno la razón es algo técnica y tiene que ver con como funciona cada uno: ¿recuerdas que el formato PNG8 es de color indexado? eso significa que los colores están en una tabla que va del 0 al 255 donde cada color usa 3 bytes y para saber la posición en tabla se usa 1 byte. En cambio, el formato PNG24 sólo usa 3 bytes por color, por lo que hay probabilidad de que genere una imagen más pequeña; así que intenta con ambas y ve cual queda de menor tamaño. Como puedes ver arriba, ambas imágenes se ven iguales; excepto que el PNG24 es más pequeño que el PNG8 por la naturaleza del formato. [Imágenes tomadas de artículo de SmashMagazine].

Tip avanzado: no guardes PNG con gamma

La gamma de una imagen es, en pocas palabras, la luminancia de un pixel. El formato PNG tiene soporte de gamma, pero desgraciadamente su uso se volvió un desastre y hoy en día no es muy usado. Photoshop no lo guarda, pero GIMP te da la opción de guardarlo o no (está deshabilitado por default).

Optimización del formato GIF

Honestamente mi recomendación es evitar el formato GIF. Excepto animación, no ofrece nada que no pueda hacer un PNG8 bien optimizado. Si aún lo necesitas, Photoshop incluye la antigüa característica de “Exportar para web”, donde puedes encontrar el que creo es el mejor exportador de GIFs que conozco, pues permite ajustar casi todo de la exportación, e incluso tiene un modo de reducción de calidad que hace que el GIF exportado quede aún más pequeño. Pero repito, nada que no pueda hacer un PNG8, y mejor aún. Hasta las transparencias del PNG8 son varias veces mejores que las de un GIF.

Cómo optimizar el formato GIF en Photoshop CC
  • Ir a Archivo > Exportar > Exportar como.
  • Seleccionar el formato GIF del desplegable.
  • Presionar Exportar todo para guardar el resultante.
Cómo optimizar el formato GIF en Photoshop 'Exportar a web'
Cómo optimizar el formato GIF en Photoshop 'Exportar a web'
Cómo optimizar el formato GIF en Photoshop ‘Exportar a web’

Ve a Archivo > Exportar > Exportar para Web (heredado).

  1. Haz clic en la pestaña Optimizado.
  2. Elige GIF.
  3. Elije un modo de reducción de color:
    1. Perceptual: prioridad a colores para los cuales el ojo humano es más sensible. Este funciona muy bien en la mayoría de los casos.
    2. Selectivo: parecido al perceptual pero favorece áreas amplias de color y la preservación de colores web.
    3. Adaptivo: construye una tabla de los colores más presentes en la imagen
    4. Restrictiva (web): usa la tabla de 216 colores seguros.
  4. Elije un modo de tramado (difusión, motivo, ruido), recomiendo Difusión.
  5. Elije si deseas respetar la transparencia.
  6. Elije el tramado de la transparencia.
  7. Modifica el total de colores de la imagen; baja tanto como puedas, ve la imagen para que no sobreoptimizes y pierda calidad tu imagen final.
  8. Aplica un halo si tienes transparencia, eso le dará un mejor acabado
  9. Abre el selector “Menos calidad” y desplaza el indicador hacia la izquierda hasta que empieces a ver que la imagen se degrada.
  10. Cambia de tamaño si lo necesitas en Tamaño de imagen. Por último, presiona Guardar para exportar tu GIF.
Cómo optimizar el formato GIF en GIMP
Cómo optimizar el formato GIF en GIMP
Cómo optimizar el formato GIF en GIMP
  • Ve a Archivo > Exportar como.
  • Escribe el nombre, incluye la extensión ‘.gif’; verifica que abajo diga “Seleccione el tipo de archivo (por extensión)”; si dice eso no es necesario hacer nada más, GIMP intuye por la extensión de tu nombre de archivo el formato de salida.
  • Presiona Exportar, lo que hace que se cierre la pantalla y se abra otra titulada “Exportar imagen como GIF”.
  • Básicamente quita todos los checks que veas. Sólo importan los del grupo “Opciones del GIF”, puesto que no es una animación.
  • Presiona exportar para obtener tu imagen en formato GIF.

Sitios para optimizar imágenes en línea, plugins y otras herramientas

Hasta ahora hemos ido por el camino manual, el más complicado pero a la vez el que mejores resultados puede ofrecer si se hace bien, pero sobre todo si se tiene el tiempo. Para cuando hay que hacer las cosas más rápido hay un buen de herramientas para optimizar imágenes que nos pueden ayudar; estas son las que recomiendo:

Aplicaciones
  • RIOT: Ampliamente recomendada; RIOT es una aplicación para Windows que permite exportar en los formatos aquí discutidos (menos SVG), y con muy buenos resultados. También está disponible como plugin para GIMP y otras aplicaciones.
Sitios de optimización

Todos funcionan igual; te permiten subir una o varias imágenes y luego las descargas para actualizarlas en tu sitio. Lo ideal es que hagas todo esto antes de subirlas, pues después necesitarás un plugin como Enable Media Replace para reemplazar los medios en WordPress. Los mejores sitios que he visto son:

De nuevo: úsalos, a veces uno tiene el mejor resultado, otro día cambia la cosa…no te aferres a uno solo.

Plugins para optimizar imágenes para WordPress

Éstos son la opción más cómoda; se encargan del procesamiento de los medios que subas a tu WordPress, y a gestionar los medios que genera a su vez WordPress (consultar la siguiente sección para tratar esto más a fondo), y para ser sincero algunos tienen unos resultados verdaderamente buenos. A mi juicio estos son los mejores plugins para optimizar imágenes en WordPress:

El proceso de estos plugins casi siempre es el mismo; una vez instalado, se encarga de optimizar las imágenes cargadas a WordPress y cuando WordPress genera recortes de esos medios; el proceso es transparente para el usuario. En lo personal, creo que ShortPixel es el mejor actualmente, ofrece optimizar 100 imágenes por mes, y sus paquetes son bastante generosos; por ejemplo, 10,000 créditos (equivalen a 10,000 imágenes optimizadas) cuestan USD $9.99.

Vale la pena que sean precavidos con los plugins y servicios para optimizar imágenes. Por ejemplo, vean este caso:

Comparativa de imagen original (izquierda) con procesada con ShortPixel (derecha)
Comparativa de imagen original (izquierda) con procesada con ShortPixel (derecha)

Como puedes ver, en la imagen procesada por ShortPixel (la de la derecha) falta un par de segmentos de rojo. Supongo que esto se debe a que algoritmo de reducción de colores que usan en ShortPixel es un tanto agresivo y no respondió bien a esta imagen; eso no le pasaría a un humano, a menos que fuera deliberado. Punto a favor de la raza humana :).

Tip de optimización: combina herramientas

No te aferres a una herramienta para toda la vida; intenta con varias, intenta cambiando el orden en que las usas, recuerda: no esperes obtener resultados distintos si siempre haces lo mismo; actualiza tus herramientas para estar al día. Por ejemplo, hoy en día es fácil encontrar bastantes artículos que hablan de que una utilería llamada PNGCrush es la panacea, hasta que lo bajas y lo pruebas…¡no optimiza las imágenes muy bien que digamos! en realidad si lo hacía, pero cuando se publicó hace años; hoy en día hay aplicaciones más actuales que hacen un mejor trabajo. En resumidas cuentas, no creas que todo lo que está en la red puede ser lo más actual, ni lo mejor.

Tip de optimización: usa los medios optimizados del analizador de velocidad

Muchos de los medidores de velocidad de sitios usan la misma técnica, sea GTmetrix o cualquier otro; por lo general una vez que analizan tu sitio, de ser posible ofrecen de vuelta los recursos no optimizados, como por ejemplo, las imágenes, pero obviamente optimizadas a como ellos consideran debieran quedar. Así que si GTmetrix u otro analizador te ofrecen imágenes optimizadas, descárgalas y reemplázalas en tu WordPress usando un plugin como Enable Media Replace, que te permitirá reemplazar los medios que desees sin problemas. Ciertamente es algo tedioso, pero si quieres lograr el 100%, a veces este es el único camino a seguir.

Cómo optimizar los medios de WordPress

Por diseño, cuando subes una imagen a WordPress, este la recorta hasta en tres tamaños, si el tamaño original lo permite:

  • miniatura (150×150)
  • medio (300×300)
  • grande (1024×1024)

Tu mismo puedes ver esto en tu WordPress en Ajustes > Medios.

Y pueden ser más por petición de algunos plugins. El problema es que estas imágenes no están optimizadas, a pesar de que la original si lo esté. No hay que ser un genio para darse cuenta que si queremos hacer esto de forma manual estamos en un problema, pues cada imagen se convierte en tres adicionales (¡cuando menos!) que tendríamos que bajar, optimizar y reemplazar, lo cual es tedioso y complicado. Aquí es donde entra la verdadera utilidad de los plugins para optimizar imágenes, pues la gran mayoría tiene un modo por lotes que se encarga de procesar todas las imágenes de tu sitio.

De nueva cuenta, recomiendo ShortPixel para esta tarea, y ya viene preconfigurado para optimizar los medios de WordPress. Y ya que tocamos el tema de los plugins, no te olvides de leer este artículo sobre como saber si un plugin es seguro.

Cómo optimizar el SEO de imágenes en WordPress

Optimizar el SEO de imágenes es tan importante como optimizar cosas como el formato, dimensiones y tamaño de la misma. Independientemente de la optimización de formato y tamaño de imagen, también es extremadamente importante hacer que la imagen sea significativa para los buscadores, ayudando a reforzar el posicionamiento de tus páginas.

Correspondencia de campos de WordPress y resultado final
Correspondencia de campos de WordPress y resultado final

Llena siempre la descripción alternativa de una imagen

La descripción alternativa de una imagen es importante porque cuando dicha imagen no puede mostrarse, se muestra la descripción alternativa. Más aún, es usado por navegadores para usuarios que sufren alguna discapacidad visual, y software como un lector de pantalla puede usar la descripción alternativa para leer el contenido de la página en cuestión. Y por último, a Google le gusta el atributo alt, por lo cual debes optimizarlo. Sigue estas reglas generales para escribir buenos atributos alt:

  • Trata de usar tus palabras clave; intenta reforzar las palabras clave que usas en el título de la entrada y en los encabezados principales, sin abusar…
  • No uses demasiadas palabras, trata de ser breve.
  • Describe lo que pasa en la imagen, nada más y nada menos.
  • En serio, no lo dejes vacío.

Escribe una leyenda para la imagen

La leyenda o caption de la imagen no es precisamente obligatorio, pero tiene un atractivo especial: tiene 30% más probabilidades de ser leída que el contenido mismo, así que no está de más que aproveches el llenar la leyenda de la imagen.

Llena el título de la imagen

El título de imagen no es obligatorio, más bien es algo informativo. ¿Qué poner? la recomendación es poner algo parecido a un CTA (un call to action o una llamada a la acción), algo que te incite a llevar a cabo una acción. Si fuese un producto, algo como “¡Comprar rasuradora RZ1000 ahora!“.

Usa nombres de archivo de imagen descriptivos

También puedes optimizar los nombres de archivo de imágenes; deben ser descriptivos y tener palabras reconocibles, generalmente separadas como guiones; esto, junto con la imagen que contienen y los atributos alt ayudan a que los motores de búsqueda indexen mejor tu contenido. Por ejemplo, usar un nombre como img-001-004.jpg no le hace ningún bien a nadie, puesto que el nombre de archivo no es indicador de que imagen representa. Pero si usamos algo como por ejemplo portada-libro-wordpress.jpg, entonces los navegadores entenderán mejor como está construido nuestro contenido. Consejos generales para mejorar el SEO de tus imágenes:

  • Intenta usar tus palabras clave en el nombre, y de nuevo, no abuses.
  • Se breve; no uses nombres kilométricos.
  • Separa con guiones las palabras.
  • La mejor liga es con nombre descriptivo con una imagen de alta calidad.

El formato SVG

Hasta ahora hemos estado viendo sólo formatos raster o de pixeles; pero nos queda un tipo de imagen vectorial que se está usando hoy en día en la web, y que es el formato SVG. El formato SVG no es más que un lenguaje basado en XML para describir imágenes. Si abres un SVG se ve como una imagen, pero si ves su código luce como esto:

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
</svg>

Al ser vectorial, las imágenes (en realidad es un formato de documento, pero no presten atención y sigamos llamándoles imágenes para estar a tono con la web) en formato SVG son geniales para representar gráficas, logos, íconos y material técnico. Sin embargo, a pesar de todas sus ventajas, tiene característica que es a la vez una ventaja y una terrible desventaja: puede incluir JavaScript, y como te podrás imaginar, eso abre la puerta a muchas situaciones problemáticas, principalmente ataques del tipo XSS (cross-site scripting), que en muchas ocasiones son difíciles de reparar.

No se me confundan: el formato SVG es nada menos que genial, pero tiene sus peligros que son bastante reales, y a pesar de que son menos sus problemas que sus virtudes, las primeras tienen mucho peso. También hay que dimensionar el problema; no es lo mismo si eres el único autor de un blog, situación en la que tu no te sabotearías a ti mismo subiendo un SVG infectado, ¿verdad?

Sin embargo, cuando cambiamos de paradigma a un esquema de varios autores en un blog, entonces la cosa cambia; aquí si pueden haber problemas, porque muchas veces los que contribuyen con un blog no son muy técnicos que digamos y son capaces de usar cualquier cosa sin ser muy juiciosos. Aquí es donde usar el formato SVG podría traerte problemas gordos.

Por algo WordPress no trae soporte integrado para el formato SVG; para ello deberás instalar un plugin o añadir un poco de código. Lo mejor es un plugin como Safe SVG, que permite que hagas cargas de SVG a WordPress y aparte sanitiza los archivos cargados. Pero de nuevo, úsalos sólo si es estrictamente necesario.

Palabras finales

Optimizar las imágenes de tu web es vital para que los motores de búsqueda te quieran y los visitantes se mantengan en tu sitio. A grandes rasgos, puedes seguir dos caminos para optimizar imágenes para WordPress; el primero es optimizar lo que subas de manera manual y después usar un plugin para optimizar los medios que genera WordPress por si solo, o bien delegarle todo a un plugin dedicado; en este último caso, recuerda que no suple al 100% a lo que tu cerebro y tu vista pueden hacer. Finalmente, recuerda que hay decenas de herramientas y todo el tiempo salen otras nuevas; investiga y mantente al tanto de cuales hay en el mercado y cuales son las mejores.

Si encuentras algún error…

Al igual que otras de mis guías, prefiero hacer una sola larga a muchas cortas. Eso hace que me tarde más investigando y comprobando cosas, pero no soy infalible. Si encuentras un error, te agradeceré lo reportes para que pueda ser corregido. ¡Gracias!

Orlando es un ingeniero en sistemas de 43 años de edad, apasionado del desarrollo de software y con un cariño especial por WordPress. Le encantan los libros, la música, la fotografía, los cómics y es un AFOL. De último pero no menos, esposo y padre de dos trolls.

Deja un comentario

A %d blogueros les gusta esto: