¿Has creado una página web, un blog o una tienda online con WordPress y no sabes cómo reducir el peso de las imágenes? ¿Estás cansado de que tu sitio web tenga una velocidad de carga lenta por culpa de las imágenes? ¿Buscas herramientas para optimizar imágenes que sean fáciles de utilizar, pero desconoces cuál es la que mejor se adapta a tus necesidades? ¡Estás en el sitio correcto! Para optimizar tu web (y para hacer un test de la misma) y ofrecer experiencia de usuario rápida, es crucial ponerse muy serios con el control de los tamaños y los pesos de las imágenes de tu web. Para ello, en esta guía quiero eplicarte los diferentes formatos de imagen que existen y los mejores recursos para optimizar su tamaño y peso.
La compresión de las imágenes puede ser con pérdidas (o lossy) o sin pérdidas (o lossless). Las imágenes con pérdidas descartan la información del archivo original y las imágenes sin pérdidas conservan todos los datos originales (por lo que el tamaño del archivo suele ser más grande). Hay una variedad de algoritmos de compresión de imágenes que tienen diferentes enfoques para reducir eñ tamaño de los archivos y las siguientes herramientas utilizan algunos de ellos para reducir al mínimo el tamaño de tus imágenes.
Lo primero que «choca» en este tema es que hay existen diferentes tipos de archivos de imágenes que cumplen el mismo objetivo: mostrar una foto o imagen. Pero nada más lejos de la realidad, ya que cada uno cumple un cometido (mejor o peor) y es imprescindible saber cuál es el adecuado para tus necesidades y las de tu sitio web. Los archivos JPG (o JPEG), PNG y GIF suelen ser los más habituales en diseño web y los que encontrarás más a menudo, aunque existen más, como el SVG, y cada uno tiene sus fortalezas y debilidades.
Trate de lo que se trate, vas a tener todo cubierto con esta completa guía para optimizar imágenes, con los diferente formatos, consejos y una selección de herramientas para optimizar imágenes gratis, premium, online y de escritorio. Te va a ayudar a optimizar y comprimir las imágenes de tu sitio web, ahorrar ancho de banda y mejorar el rendimiento del sitio.
Índice de contenidos
Formatos de imagen más habituales en diseño web
¿JPG? ¿JPEG? ¿PNG? ¿GIF? ¿SVG? ¿Te suenan estos formatos de imagen? Estoy seguro que, si eres propietario de una pagina web, blog o tienda online, cuando descargas las imágenes en bancos de imágenes gratis y premium, te surgen montones de dudas a la hora de elegir qué formato de imagen es mejor, cómo optimizarlas y qué herramientas existen en el mercado para facilitarte la vida.
Son muchas las preguntas que te vienen a la cabeza, ¿Cuál es la diferencia entre .JPG (o .JPEG) y .PNG? ¿Y entre .GIF y .JPG? ¿Y eso nuevo del .SVG? Por ello, y después de haberte explicado este tema en varias ocasiones en mi blog, quiero echar un nuevo vistazo a la situación de los formatos de imágenes para sitios web y ayudarte a elegir el formato idóneo y que mejor se adapte a tus necesidades. Un formato de imagen normalmente encadena juntos varios algoritmos con pérdidas (lossy ) y sin pérdidas (lossless) para conceder ahorros de compresión.
Hay multitud de formatos de imagen adoptados por los navegadores, cada uno con sus propias características y sus ventajas y desventajas en cuanto al rendimiento se refiere. Resumiendo, no hay una «talla única» para el formato web (en la actualidad). Los diferentes tipos de imágenes deben ser codificados en diferentes formatos dependiendo del tipo de imagen, la compatibilidad con el navegador y las necesidades del sitio web. Existen varias decisiones que un diseñador o desarrollador web tiene que tomar en cuanto a la elección de un formato de imagen:
¿Necesita compresión la imagen?
¿Necesita transparencia la imagen?
¿Necesita animación la imagen?
¿Necesita datos de alta calidad la imagen?
Tabla comparativa entre imágenes .PNG, .JPG, .GIF, .SVG
Antes de meterte de lleno en la comparativa entre los distintos formatos de imagen .PNG, .JPG, .GIF y .SVG, te sugiero que tengas algunos puntos claros. Para empezar, la diferencia entre Lossy (con pérdida) y Lossless (sin pérdida), unos términos que vas a leer mucho durante la guía y que no quiero que te bloqueen.
Lossless (sin pérdidas) es un tipo de compresión de imágenes que reduce el tamaño de un archivo sin perdida de calidad (no importa las veces que guardes u optimices la imagen, que la imagen se verá exactamente igual).
Lossy (con pérdidas) es un tipo de compresión de imágenes que reduce el tamaño de un archivo con perdida de calidad (si guardas una imagen en un formato lossy una y otra vez, la calidad de la imagen empeora progresivamente).
Es posible que hayas oído en más de una ocasión el término «modo de color» o directamente hayas escuchado modo RGB, modo CMYK o incluso modo LAB. ¿Es así?, ¿te suena, aunque sólo sea un poco?, ¿o es como si te estuviese hablando en chino? No te preocupes, porque no es algo vital, pero nunca está de más aprender términos nuevos. Por ello, es importante que conozcas la diferencia entre colores indexados y directos:
Una imagen puede tener indexados un número limitado de colores (generalmente sólo puede almacenar 256), controlados directamente el autor, que crean el mapa de color.
Una imagen con colores directos puede almacenar varios miles de colores que no han sido elegidos directamente por el autor, por lo que siempre será una imagen más nítida.
| Formato de imagen | Categoría | Paleta de colores | Transparencia | Animación | Uso |
 |
Lossy | Millones de colores | ⨯ | ⨯ | Imágenes sin animación Fotografía |
 |
Lossless | Máximo 256 colores | Binario | ✓ | Animaciones simples Gráficos con colores planos Gráficos sin degradados |
 |
Lossless | Máximo 256 colores | ✓ | ⨯ | Uso similar al formato .GIF Mejor transparencia pero sin animación Es perfecto para iconos |
 |
Lossless | Millones de colores | ✓ | ⨯ | Uso similar al formato .PNG-8 Imágenes sin animación y con transparencia |
 |
Lossless | Millones de colores | ⨯ | ⨯ | Formato de imagen antiguo No hay nada en lo que despunte |
 |
Vector/Lossless | Millones de colores | ✓ | ⨯ | Gráficos y logotipos para páginas web Retina / pantallas de alta resolución |
 |
Lossy/Lossless | Millones de colores | ✓ | ✓ | Gráficos y logotipos para páginas web Retina / pantallas de alta resolución |
PNG es un formato simple que soporta transparencia y compresión sin pérdidas. Permite definir un canal alfa para la imagen, para enmascarar las áreas transparentes, así como una opción para habilitar un compresor Deflate sin pérdidas de datos. (Deflate es una combinación de dos compresores sin pérdidas: LZ77 y Huffman). Dado que la compresión es sin pérdidas, la calidad de imagen sigue siendo idéntica a la imagen de origen. Sin embargo, esto causa algunos problemas, ya que el tamaño del archivo tiende a subir y no tan pequeño como debería ser.
GIF es otro formato que soporta Tabla , además de animaciones. El formato GIF contiene 2 etapas de compresión, un paso de paletización con pérdidas (restringiendo toda la imagen a sólo 256 colores), seguido por un compresor LZW sin pérdidas. El proceso de cuantificación de los colores de la imagen a sólo 256 proporciona una reducción de calidad muy alta en beneficio de un mejor tamaño de compresión, que tiende a producir una mejor compresión LZW. Colt McAnlis dice lo siguiente:
Los compresores más moderno consiguen un rendimiento mayor encadenando varios pasos de codificación a la vez. Una simple etapa puede modificar el flujo de datos de tal manera que las etapas posteriores pueden comprimir mejor que el flujo de datos en bruto. Los codificadores populares, como la cadena 7zip junto con el diccionario de codificación LZ, producen un conjunto reducido de símbolos que se pueden consumir de manera más eficiente mediante un algoritmo de cadena de Markov.
Si no necesitas ni transparencia ni animación, entonces JPG o JPEG es el formato de imagen ideal. Fue diseñado para manejar la compresión de datos de fotos de alta calidad, pero proporciona un conjunto configurable de opciones de compresión con pérdidas, lo que te permite intercambiar calidad de compresión o tamaño de la imagen, dependiendo de las necesidades.
Los archivos SVG, los más nuevos en este juego, permiten utilizar vectores en lugar de imágenes, para que las imágenes de tu sitio web no pierdan calidad en pantallas más grandes (o más pequeñas), evitando el típico (y horrible) pixelado. ¿Cuál es la idea detrás de esto? ¡Muy fácil! Piénsalo, cada vez demandamos más calidad HD en nuestras pantallas (ya sea laptop, smartphone, tablet, etc..), por lo que se necesita un formato ad-hoc a las nuevas tecnologías.
Pero si lo que buscas es una solución única para el formato de tus imágenes, entonces deberías echar un vistazo a WebP. El formato no sólo cuenta con una calidad de compresión/tamaño superior, sino que también soporta transparencias y animaciones. Utiliza una combinación de compresiones sin pérdidas y con pérdidas y, al igual que el formato JPG, te permitirá definir el nivel de calidad o el tamaño del archivo.
Por supuesto, este nuevo formato de imagen no ha sido adoptado por todos los navegadores de momento, por lo que los desarrolladores web que lo han adoptado se encuentran actualmente en las primeras fases de trabajo solucionando problemas de usabilidad. Aunque con un 30% de ahorro más que el JPG, junto con una mayor adopción del servidor demuestra que WebP es un formato a tener en cuenta para el futuro del diseño de páginas web.
Consejos y trucos para optimizar las imágenes de tu web
¿Te hayas parado a pensar la enorme cantidad de tráfico que te pueden traer las imágenes desde los buscadores? ¡En serio! Alguien busca un producto, un lugar, una receta, o una infografía en Google y ahí deberían aparecer tus imágenes. No importa que el nuevo diseño del buscador reduzca la cantidad de visitas que puedes recibir, la oportunidad de ser visible y atraer tráfico siempre es interesante y jugosa.
Además, la búsqueda universal muestra imágenes en la página de resultados de forma combinada. Esto significa que no es necesario buscar una imagen para encontrarla, puedes aparecer en cualquier momento (sobretodo para ciertas búsquedas). Por todo ello, es importante que aprendas a optimizar tus imágenes para los buscadores (lo que también se conoce como SEO para imágenes).
Estoy seguro de que ahora te estarás preguntando ¿Optimizo correctamente mis imágenes de mi sitio web? , o de que incluso ya das por hecho que no las optimizas (no te preocupes, es común). Por eso mismo te voy a mostrar en esta guía paso a paso, para poder empezar a usar tus imágenes como una herramienta más de posicionamiento web. Vamos a ver todos los puntos de mejora de una imagen:
Atributo Alt (describe la imagen)
Pese a que la tecnología para el reconocimiento de imágenes ha avanzado mucho, los buscadores siguen teniendo problemas para interpretar el contenido de las imágenes. A día de hoy pueden reconocer letras, colores, e incluso caras, pero poco más. Debido a ello necesitas usar el atributo Alt para describir tus imágenes.
No necesitas preocuparte por el código, ya que la mayoría de los gestores de contenido permiten añadir el texto a la etiqueta alt fácilmente.
El nombre de Alt viene de alternate text o texto alternativo, y es lo que utilizan los buscadores para saber qué es lo que muestra una imagen. También es el texto que se utiliza en lugar de la imagen cuando ésta no se puede cargar junto con el resto del contenido de la página. Supongamos que pones en tu web una selección de los mejores bancos de imágenes gratis. El código HTML de la etiqueta Alt sería «<img src=”https://ignaciosantiago.com/wp-content/uploads/2017/10/bancos-imagenes-gratis.jpg” alt=”Los mejores bancos de imágenes gratis” />». La clave para crear buenas etiquetas Alt es:
Nombrar correctamente la imagen.
Describir fielmente el contenido de la imagen.
Incluir la palabra clave principal en la imagen.
Utilizar la descripción larga o longdesc.
Nombre del archivo (corto y descriptivo)
El nombre del archivo es un indicador del contenido de la imagen. Piensa que una imagen llamada «tarta-de-chocolate.jpg» probablemente muestre una tarta de chocolate. Para optimizar el nombre debes intentar ser corto y descriptivo, y no es necesario que incluyas tanta información como en la etiqueta Alt. Lo que no puedes hacer es llamar al archivo de una imagen «foto.jpg» sin más. Este nombre genérico no trae ningún beneficio en los buscadores. Para hacerlo más descriptivo, debes meter palabras clave que describan esa imagen. Así, mediante un nombre más específico, tendrás más posibilidades en los rankings de resultados. Un buen nombre de archivo se caracteriza por:
- Representar el contenido de la imagen.
- Incluir la palabra clave principal.
- Ser muy conciso (puedes excluir palabras vacías).
- Utilizar guiones para separar palabras.
Contexto (rodea tus imágenes de texto)
Es muy importante que tus imágenes estén rodeadas de texto, y que ese texto esté relacionado con el contenido de la imagen. Con esto me refiero al pie de foto o leyenda, pero también el texto que hay encima y bajo la imagen, encabezados y título de la página (en la medida de lo posible). Ten en cuenta que si el texto que envuelve la imagen no tiene nada que ver, la relevancia para el buscador será baja. Así que cuanto más estrecha sea la relación existente entre la imagen y el contexto en el que se encuentra, mejor.
Tamaño del archivo (lo más pequeño posible)
Lo ideal es que el tamaño del archivo sea lo más pequeño posible. De esta forma las imágenes cargan rápido, y eso es algo que premian los buscadores. Pero el tamaño del archivo depende de 2 cosas:
Las dimensiones de la imagen.
La calidad de la imagen.
Si quieres una imagen de grandes dimensiones en un archivo pequeño, la calidad se verá afectada. Y si lo que quieres es una imagen de gran calidad, tendrás que reducir las dimensiones. Este compromiso hace del JPG el formato de imagen ideal para los buscadores, aunque puedes utilizar PNG y GIF si sirven mejor a tus propósitos. De modo que a la hora de preparar tus imágenes:
Utiliza JPG siempre que sea posible, ya que ampliamente aceptado por todos los navegadores.
Emplea las dimensiones exactas que necesites (no confíes la reducción de las dimensiones al CMS puesto que carga la imagen completa para luego redimensionarla).
La calidad JPG media es más que suficiente para cualquier sitio web, pero no te pases del 75% de optimización.
Por otro lado, puedes utilizar Skitch o SnagIt para capturar, recortar y reescalar imágenes. Esta herramienta hace un buen trabajo manteniendo la calidad en las imágenes, y además permite añadir anotaciones, formas y dibujos. Otra herramienta interesante y gratuita para trabajar con imágenes es GIMP. Más abajo te ofrezco muchas más, sigue leyendo.
Datos Exif (incluye todos los datos posibles)
Exif, o Exchangeable image file format, es una especificación que permite incluir varios tipos de metadatos dentro del archivo de imagen. Entre estos datos se incluyen detalles específicos de la toma, como la exposición, apertura, distancia focal, e incluso las coordenadas geográficas. Adicionalmente, también incluye datos como:
Título de la imagen
Descripción
Nombre y web del autor
Copyright
- Categorías
Otras etiquetas interesantes
Si bien los buscadores no utilizan los datos Exif como factor de peso actualmente, los datos sí que aparecen en las páginas donde se encuentran esas imágenes, lo que puede influir en la relevancia. Este el el caso de Flickr, como se comprueba aquí. Es posible editar algunos datos y añadir información relevante sobre la imagen mediante las propiedades del archivo en Windows (botón derecho). Aunque si de verdad quieres experimentar, es mejor que uses una herramienta avanzada. PhotoME es una opción gratuita.
Descripción larga (cuanta más información mejor)
Un atributo poco conocido para imágenes es la descripción larga o longdesc. Como su nombre indica, sirve para incluir una descripción más larga que la que se puede incluir en la etiqueta Alt. La sintaxis para la descripción larga es:
<img src=”https://ignaciosantiago.com/wp-content/uploads/2017/10/bancos-imagenes-gratis.jpg” alt=”Los mejores bancos de imágenes gratis” longdesc=”http://example.com/acerca-de-los-bancos-de-imagenes” />
Si te fijas, longdesc no incluye una descripción textual, sino la URL donde encontrarla. Ésta puede ser una página especialmente creada para incluir la descripción, o la propia página donde se incluye la imagen, pero eso no tiene mucho sentido. La verdad es que la descripción larga se utiliza muy poco o nada, pero he querido incluirla para que cuentes con toda la información posible.
Sitemap de imágenes (chiva a los buscadores tu estructura de imágenes)
Un aspecto esencial de la optimización de imágenes es la indexación. Las imágenes deben estar en el índice del buscador para aparecer en la búsqueda, pero si el buscador no encuentra tus archivos de imagen difícilmente podrá registrarlos. Hay una manera de aumentar las posibilidades de que tus imágenes sean indexadas, y es generando un sitemap específico para imágenes. Este archivo incluye la URL de cada imagen, pero también puede incorporar el título, la licencia y el pie de foto.
Generar enlaces (enlazar la imagen desde otras páginas web)
Te adelanto que esta táctica es precisamente la más efectiva. Si quieres mejorar la visibilidad de tus imágenes no hay nada más simple y directo que conseguir enlaces. Sí, enlaces. Y no sólo hacia la página que contiene la imagen, sino hacia el propio archivo de imagen. Además, si utilizas palabras clave en el texto de enlace (anchor text) puedes mejorar el posicionamiento para esas búsquedas. Aunque no debes abusar de ello para no despertar las sospechas de los buscadores.
Mejores herramientas para optimizar imágenes de tu web
Siempre que sea posible, lo mejor es tratar de automatizar la optimización de imágenes. Para que tengas una pequeña ayuda, voy a compartir contigo algunas de las herramientas de optimización de imágenes que suelo utilizar. Como normal general, ejecuta los optimizadores con más perdidas primero y después los que tienen menos pérdidas, así mejorarás el rendimiento. La mayoría de los desarrolladores se olvidan de que los optimizadores de imágenes optimizan un archivo en particular en vez de una imagen. Esto significa que no tiene sentido optimizar el archivo de una imagen y luego cambiarla de tamaño, recortarla o cambiarla a otro formato, ya que todos los cambios realizados en ese archivo no habrán valido de nada y las optimizaciones se habrán perdido por el camino. Veamos las herramientas:
JPEG Mini
JPEGmini te ayuda a reducir el tamaño de tus fotos hasta 5 veces, manteniendo la calidad original. Está disponible para Mac OS X y Windows como una aplicación de escritorio. Sólo tienes que elegir o arrastrar carpetas a la aplicación para que pueda optimizar cada imagen de forma automática. Ofrece un paquete de servidor que te permite reducir los costes de almacenamiento y ancho de banda.
TinyPNG
TinyPNG permite la compresión con pérdidas avanzadas de imágenes PNG. Conserva la transparencia alfa completa y reduce el tamaño del archivo al disminuir selectivamente el número de colores y de bytes en la imagen. El efecto es casi invisible, pero donde si se nota es en el tamaño del archivo. Coge los archivos PNG de 24 bits y los convierte en imágenes de 8 bits indexadas, eliminando todos los metadatos innecesarios.
CompressNow
CompressNow es un servicio online gratuito que te permite subir imágenes desde su ordenador, elija un porcentaje de compresión y descargar la imagen optimizada. Es compatible con los formatos GIF, JPG y PNG. El servicio también permite al arrastrar y soltar múltiples imágenes desde tu ordenador, con una carga máxima de 10 imágenes y un tamaño de archivo individual máximo de 3MB.
FILEMinimizer Pictures
FILEminimizer Pictures te permite reducir el tamaño de las imágenes y fotos hasta en un 98% y es compatible con varios formatos de imágenes, incluyendo JPG, BMP, GIF, TIFF, PNG y EMF. Puedes optimizar tus imágenes y enviarlas por correo electrónico o subirlas a Facebook. Dispone de hasta 4 niveles de compresión diferentes y puedes elegir procesar un lote y decidir cómo manejar los datos EXIF.
GIFsicle
GIFSicle se trata de una herramienta potentísima para la edición y creación de ficheros GIF. Con una extensa colección de parámetros y opciones, GIFsicle permite crear GIF animados con todo tipo de flexibilidad, así como realizar optimizaciones para reducir su tamaño. Existe un plugin de GIFsicle para GIMP, que permite utilizar este programa junto al famoso editor open source.
Image Optimizer
Image Optimizer te permite cambiar el tamaño, comprimir y optimizar tus imágenes y está disponible como servicio online gratuito, aplicación de escritorio libre o como actualización de pago para eliminar el texto promocional en la parte inferior de las imágenes optimizadas. Es muy sencilla de usar ya que te permite elegir la calidad de optimización, anchura máxima y altura máxima. Puedes comprimir las imágenes a granel y ver el progreso de la optimización.
ImageMagick
ImageMagick es, probablemente, una de las suites de manipulación de imágenes más completas que exista en el mercado de este tipo de herramientas. Es muy conocida entre desarrolladores (de hecho, se utiliza en multitud de lenguajes), sin embargo, su potencia y cantidad de opciones, hace que sea complejo desarrollar una interfaz gráfica para controlar todos sus comandos. Existió hace algún tiempo un intento de interfaz para ImageMagick, llamada imGUI, pero parece estar abandonada.
ImageOptim
ImageOptim optimiza las imágenes mediante la búsqueda de los mejores parámetros de compresión y la eliminación de datos innecesarios, como comentarios y perfiles de color. Maneja PNG, JPEG y GIF. También es fácil de usar; sólo tienes que arrastrar y soltar imágenes o carpetas en la ventana y se optimizan en el momento. También puedes soltar archivos sobre el icono del dock de ImageOptim, utilizar el menú en el Finder (en Mac) o lanzarlo desde un script de shell.
Image Optimizer
ImageOptim optimiza las imágenes buscando los mejores parámetros de compresión y la eliminación de datos innecesarios, como comentarios y perfiles de color. Maneja PNG, JPEG y GIF. Es fácil de usar; sólo tienes que arrastrar y soltar imágenes o carpetas en la ventana y se optimizan en el momento. También puedes soltar archivos sobre el icono del dock de ImageOptim, utilizar el menú en el Finder (en Mac) o lanzarlo desde un script de shell.
JPEG Optimizer
JPEG Optimizer es una herramienta online gratuita para redimensionar y comprimir fotos e imágenes con el fin de reducir su ancho de banda y poder usarlas en blogs, foros y correos electrónicos. Basta con subir la imagen que quieras optimizar, seleccionar un nivel de compresión (0-99, con un valor por defecto de 65), elegir el ancho de la imagen (si quieres cambiar el tamaño de la imagen) y hacer click en “Optimize Photo”.
JPEG Reducer
JPEG Reducer reduce el tamaño de tus imágenes y fotos para que se puedan cargar más rápido y funciona mediante el uso de la compresión con pérdidas (lossy). Es tan bueno que puede que ni siquiera te des cuenta de que se han realizado cambios. Sólo tienes que subir tu imagen o introducir una dirección URL y hacer click en “Reduce It”. A continuación, podrás ver las imágenes y miniaturas comprimidas y hacer click en la imagen para guardarla.
PNG Gauntlet
PNG Gauntlet te permite optimizar los archivos PNG. Combina PNGOUT, OptiPNG y DeflOpt para crear el tamaño de archivo más pequeño posible, sin reducir la calidad de imagen. Convierte los archivos JPG, GIF, TIFF y BMP a PNG, y ofrece barras de progreso individuales para cada archivo, destacando el archivo que se está comprimiendo, y una barra de estado para realizar un seguimiento de los bytes totales que te has ahorrado.
PNG Optimizer
PNG Optimizer limpia tus archivos PNG de información inútil o errónea, reduce su peso y convierte PNG en otros formatos de imagen sin pérdidas, como BMP, GIF o TGA. También es compatible con archivos PNG animados y está disponible en Windows XP, Vista y 7. También puedes crear imágenes PNG dentro de una interfaz de usuario sencilla y productiva.
PNGMonster
PNGMonster se define como un front-end que es capaz de comprimir un largo número de imágenes en formato PNG de forma automática en el menor tamaño posible, sin efectuar cambios visuales visibles. La aplicación utiliza los siguientes optimizadores externos: PNGRewrite, PNGCrush, OptiPNG, PNGout y AdvPNG.
PunyPNG
PunyPNG es una herramienta de compresión para imágenes para diseñadores y desarrolladores que ayuda a reducir el tamaño de tus imágenes sin pérdida de calidad. En primer lugar, analiza el contenido de la imagen y selecciona la mejor manera de optimizar la imagen, tanto la técnica con el formato a utilizar. Es compatible con los formatos más populares y, dependiendo del archivo, PunyPNG decidirá cómo convertir tu imagen para asegurar los mejores resultados posibles.
Riot
Riot (Radical Image Optimization Tool) es un programa gratuito para optimizar imágenes para las páginas web de manera eficiente. Incluye una interfaz fácil de usar para comparar el original con la imagen optimizada en tiempo real, por lo que se puede ver al instante el tamaño del archivo resultante. Es compatible con varios formatos y cuenta con optimización automática que selecciona el formato y los parámetros más adecuados.
Shrink O’Matic
Shrink O’Matic es una aplicación de Adobe AIR para cambiar el tamaño de imágenes, pudiendo manipular JPG, GIF y PNG. Arrastra y suelta de forma sencilla las imágenes en la aplicación y serán redimensionadas automáticamente. Personaliza la configuración y elige el tamaño de salida, rotación, nombre, ubicación, formato y marca de agua. Compatible con los datos EXIF para que no perder ninguna información una vez procesadas las imágenes.
Shrink Pictures
Shrink Pictures es otra herramienta que te permite cambiar el tamaño de las imágenes y elegir el nivel de compresión a aplicar, siendo compatible con JPG, GIF y PNG. Puedes seleccionar la dimensión máxima de la imagen, aplicar efectos especiales, y descargar las imágenes optimizadas rapidamente. Además, garantiza la privacidad mediante el uso de un script automatizado para eliminar alguna de las imágenes procesadas desde el servidor.
Smush
Smush.it es un servicio online de la Red de Desarrolladores de Yahoo! para optimizar imágenes. Utiliza técnicas de compresión sin pérdidas, el tamaño de la imagen se reduce sin modificar su calidad visual. Es compatible con archivos JPEG, GIF y PNG con tamaños máximos de 1 MB. Podrás descargar las imágenes optimizadas desde una URL temporal, que tiene una validez de 30 minutos. Dispone también de un plugin de WordPress.
Trimage
Trimage es una herramienta multiplataforma para la optimización de archivos PNG y JPG utilizando OptiPNG, PNGCrush, AdvPNG or JPEGOptim, dependiendo del tipo de archivo. Las imágenes se comprimen sin pérdidas en los más altos niveles de compresión disponibles, eliminando los datos EXIF y otros metadatos. Está disponible para descargar en diversas plataformas, incluyendo Mac OS X, Windows y Linux.
Mejores plugins para optimizar imágenes en WordPress
Las imágenes es uno de los elementos que más pesan en cualquier sitio web y, a medida que este crece, se convierte en un elemento que hay que controlar. En un mundo ideal, cuando descargas imágenes de bancos de imágenes gratis y premium y las subes una imagen a la web, deberías subirlas en el tamaño en el que se van a mostrar, en el formato de imagen idóneo y optimizadas (es decir, la misma imagen, con la misma calidad, pesando hasta 4 veces menos). Por ello, he hecho una listado con los mejores plugins para optimizar las imágenes que subes a tu WordPress:
ShortPixel Image Optimizer
ShortPixel es un plugin SEO de WordPress para optimizar imágenes con el que puedes optimizar las imágenes de tu sitio web en WordPress desde una interfaz sencilla y fácil de usar. Este plugin destaca por tener una interfaz de administración sencilla que comprime todo tipo de formatos de imágenes, convierte los formatos, no hay límite de peso de imágenes, optimiza cualquier imagen de tu galería, es compatible con WP Retina 2X y funciona correctamente con WooCommerce.
Smush
Smush (antes WP Smushit) es un plugin SEO de WordPress que te permite optimizar las imágenes de tu web de muchas maneras para mejorar el rendimiento de tu web ya sea en lazy load, cambiando tamaños y comprimiéndolas para poder mejorar el tráfico de tu web y por ende tu posicionamiento SEO. Destaca por permitir optimizar hasta 50 imágenes a la vez pudiendo cambiar el tamaño al mismo tiempo, por detectar automáticamente las imágenes no optimizadas y por integrarse con Gutenberg.
Imagify
Imagify es un plugin SEO de WordPress para optimizar imágenes con el que puedes optimizar imágenes de una forma sencilla en tan solo un click para tratar de hacer que el sitio web sea más eficiente. Este plugin se añadirá automáticamente a la interfaz principal de tu WordPress y desde ahí podrás optimizar las imágenes con el nivel de compresión que desees o volver a ponerlas en el tamaño anterior, también cambiar el tamaño y hacer las las imágenes para que se vean bien desde el móvil.
Conclusión: No descuides el tamaño de las imágenes de tu web
Las imágenes son una gran parte de un sitio web y, a menudo (junto con el vídeo), la parte más visual y que más atrae. Pero esto no significa que, la imagen que descargas de un banco de imágenes gratis o de pago, la tengas que poner en 5.000×2.100px. Piénsalo, en navegador la va a mostrar, como mucho, en menos de la mitad, por lo que ten cuidado con el tamaño. Si a esto le sumamos su peso, entonces la cosa va a mayores.
No es lo mismo cargar una foto que pesa 1MB que una que pesa una décima parte. Por ello, y como consejo SEO, te invito a que uses estas herramientas y que optimices tus imágenes. Además, el usuario va a notarlo mucho, porque la velocidad de carga va a mejorar mucho. De hecho, las imágenes son un tipo de contenido delicado que, no solo puede aumentar la calidad y la percepción del usuario de tu sitio web, sino que también puede complementar tus esfuerzos para la velocidad de carga y el diseño responsive. Antes de hacer pública tu página web, asegúrate de optimizarlas sus imágenes y mejorar su compresión.
¿Qué te ha parecido esta guía para aprender a optimizar y comprimir las imágenes de tu web? ¿Crees que me he dejado algo? ¿Tienes alguna experiencia que quieres contar? ¿Te has quedado con alguna duda o pregunta? Entonces te pido es que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.
¿Te ha gustado el contenido?
Puntuación media 5 / 5. Votos: 490
¡Todavía no hay votos! Sé el primero en valorar el contenido.
En Internet existen multitud de manuales, tutoriales y guías sobre marketing digital. Por ello, he reunido los mejores contenidos publicados (por su calidad y utilidad), donde podrás aprender sobre marketing digital, blogging, SEO, redes sociales, WordPress y mucho más.
Soy muchas cosas, pero todo empezó como blogger hace más de 20 años. Desde ahí he ido ido creciendo como persona y profesional hasta que decidí dejar un buen trabajo, emprender por mi cuenta y poner en marcha mi propia agencia de marketing digital. Ahora, junto con un equipo joven, motivado y muy cualificado, ayudo a profesionales y empresas a crear y hacer crecer su negocio en Internet ofreciendo un servicio de marketing digital atento, cercano, integral y profesional.
Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.
Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.
Excelente post amigo muy buenas recomendaciones las usare en mis pagina web muchas gracias
Hola Jose,
Gracias por tu comentario. Me alegro que sean útiles para tus webs. Saludos!
Excelente post Ignacio, me has dado varias opciones interesantes para optimizar las imágenes de mi web.
Muchas gracias por la info!
Hola Johanna,
Gracias a ti por tu comentario :)
Estupendo recopilatorio!! Algunas herramientas no las conocía, buscare algo de tiempo para poder probarlas.Gracias por compartir información valiosa y que nos ayudan a agilizar nuestro trabajo.
Gracias Coral :)
Me alegro que te haya gustado
Hola Ignacio:
Muy interesante este post sobre la reducción del tamaño de las imágenes, cada vez más necesario con las que se manejan en los blogs, webs, redes sociales, etc… y parece que útiles con las aplicaciones que nos recomiendas.
Yo cuando empecé a trabajar con imágenes fue en el año 92 (sí el de la Expo de Sevilla y las Olimpiadas de Barcelona). Aunque no soy un experto como tú, al no nacer ayer, ni antes de ayer, he sufrido en mis carnes prehistóricas en lo digital, la relación calidad-tamaño de las imágenes. Me parece recordar que los primeros archivos, o los más antiguos eran los BMP y TIFF. Los JPG llegaron después. Ahora vienen mis preguntas:
-¿Es el formato PNG el ideal para insertar imágenes en alojamientos web, ya sean blogs, páginas web, redes sociales, etc…?
-¿Cuál es el formato de por sí, en general, que ocupa menos espacio entre todos los que salen en este post: JPEG o JPG (ya no sé si lo mismo, TIFF, PNG, GIF….?
Un cordial saludo
ANGEL J. Q-EN-K
Hola Angel,
Lo primero gracias por comentar. Para la web lo «ideal» es usar jpg. Pesa menos que el PNG. Puedes usar el PNg para el logo, pero optimizándolo al máximo.