Optimizar imágenes para una página web es importante sin importar cómo hagas tus páginas, ya sea que utilices HTML, que lo hagas directamente en código, que utilices WordPress o cualquier otro creador de sitios web.
Para hacerlo correctamente, hay que conocer los tipos de imágenes, formatos, compatibilidades, tamaños, herramientas de optimización y también algunos puntos importantes sobre derechos de autor.
Cerca de un 40% de las personas que abandonan un sitio web es porque carga lento, y una de las principales razones de carga lenta de una página web es por imágenes mal optimizadas o que no fueron optimizadas.
Por qué es importante optimizar imágenes para una página web
La optimización de las imágenes en un sitio web es bien importante y es fundamental que se haga en todos y cada uno de los sitios que vayas a realizar.
Hacer la optimización correctamente va a permitir que tus imágenes se muestren adecuadamente en tu sitio. Además, también ayuda a que carguen más rápido para ofrecer una excelente experiencia de usuario a las personas que vayan llegando.
Beneficios de optimizar correctamente las imágenes
Cuando logramos optimizar correctamente las imágenes, logramos principalmente tres grandes beneficios.
1. Menos consumo de espacio y recursos
Las imágenes grandes consumen más espacio de disco duro en tu servidor o en tu hosting. Además, también consumen más ancho de banda cada vez que una persona entra al sitio o a una página en particular que tenga imágenes.
Esto representa un gran problema, sobre todo en servicios de hosting económicos o un tanto limitados, porque te vas a consumir los recursos.
Además, si haces copia de seguridad o respaldos constantemente, cosa que es muy recomendable hacer, es más complicado cuando tienes muchísimas imágenes y, si además son demasiado pesadas, el respaldo va a ser mucho más pesado de descargar.
2. Mejor experiencia de usuario
Las imágenes bien optimizadas van a cargar muy rápido y el usuario va a tener una mejor experiencia.
Además, vas a adaptar las imágenes al espacio correcto. Esto hace que las personas permanezcan más tiempo en un sitio web, ya que además de texto hay imágenes correctamente colocadas.
3. Mejor accesibilidad y posicionamiento
La optimización de títulos y textos alternativos dentro de la imagen permite que las imágenes estén disponibles para personas con discapacidad visual.
Esto hace que tu sitio web sea más accesible. También ayuda al posicionamiento, ya que el tiempo de carga de un sitio web es uno de los factores importantes que considera Google para comenzar a posicionar.
Los sitios web con imágenes optimizadas arrojan mejores resultados para Google y esto se puede comprobar al revisar una página en herramientas como PageSpeed Insights de Google.
📌 Punto importante: una imagen mal optimizada puede afectar la velocidad, el consumo de recursos, la experiencia del usuario y el SEO de una página web.
4 pasos para optimizar imágenes para una página web
A continuación, veremos cuatro pasos que debes seguir con cada una de tus imágenes o con cada grupo grande de imágenes que ya tengas en tu página web.
Paso 1: Elegir el formato de archivo correcto
Lo primero que debes considerar es elegir el formato de archivo correcto de acuerdo al tipo de imagen y al objetivo de esta imagen.
Elegir el formato correcto hará que tus imágenes carguen mucho más rápido y que se vean excelente.
Existen diferentes tipos de formatos, como JPG, PNG, GIF, WebP y SVG.
El formato es muy fácil de ver en las imágenes porque siempre se encuentra al final. Es decir, vas a encontrar tu imagen con el nombre de la imagen, un punto y su extensión.
Formato JPG
JPG es un formato que está pensado para imágenes que tienen una amplia gama de colores, por ejemplo, las fotografías.
Una fotografía tiene muchísimos colores y, además, con las luces o las sombras también tiene muchos tonos. Cada tono es una variación de esos colores.
Por lo tanto, una fotografía es una imagen con una gama bastante amplia de colores y JPG es perfecto para ese tipo de imágenes.
Formato PNG
PNG es un formato para imágenes que tienen poca cantidad de colores. Además, es un formato sin pérdida.
PNG es un excelente formato para imágenes que tengan pocos colores y donde busquemos mucha calidad. El mejor ejemplo es un logotipo, donde buscamos que se vea perfecto.
Además, este formato permite tener transparencias.
⚠️ Recomendación: nunca guardes fotografías en formato PNG, porque no es lo recomendable para ese tipo de imágenes.
Aunque una fotografía sí se puede guardar en formato PNG, no es nada recomendable porque PNG no comprime estas gamas enormes de colores que tiene una fotografía.
Por otro lado, nunca guardes un logotipo o un icono en JPG, ya que no es un formato pensado para esto.
JPG comprime la gama de colores y eso hace que se pierda calidad. En un logotipo es muy importante tener extrema calidad. Además, JPG tampoco admite transparencias.
Formato GIF
GIF es un formato comprimido que permite transparencias y animaciones.
Aunque su gama de colores es muy limitada, solamente es viable o es buena opción para gráficos muy sencillos o imágenes con muy pocos colores.
Formato WebP
WebP es un formato que pertenece a la compañía Google.
Este formato puede ser mejor que JPG y PNG para fotografías, iconos y logotipos. Incluso permite transparencias y también permite animaciones como lo hacen los GIF.
Básicamente, es un formato muy completo. Sin embargo, tiene una desventaja: todavía puede presentar problemas de compatibilidad con algunos navegadores, sobre todo en versiones antiguas.
Al ser de Google, es muy compatible con Google Chrome, uno de los navegadores más utilizados.
Si tienes imágenes en JPG o PNG, es posible convertirlas a WebP utilizando herramientas gratuitas.
Formato SVG
SVG es un formato de imagen vectorial que utiliza código XML.
Este formato es escalable. Esto quiere decir que lo puedes hacer tan grande como se te ocurra y nunca va a perder calidad.
Eso lo hace un formato fenomenal para logotipos e iconos.
Sin embargo, una desventaja que tiene este formato es que, al ser código, puede traer algunos problemas de seguridad y puede volverse un blanco para hackers.
Esto no quiere decir que no se debe utilizar. Al contrario, es un excelente formato, pero hay que tomar medidas de seguridad al utilizarlo.
Resumen de formatos de imagen
| Formato | Uso recomendado | Punto importante |
|---|---|---|
| JPG | Fotografías e imágenes con muchos colores | Comprime la gama de colores y puede perder calidad |
| PNG | Logotipos, iconos e imágenes con pocos colores | Permite transparencias y conserva mucha calidad |
| GIF | Animaciones y gráficos sencillos | Tiene una gama de colores limitada |
| WebP | Fotografías, iconos, logotipos y animaciones | Es ligero y permite transparencias, pero conviene revisar compatibilidad |
| SVG | Logotipos e iconos vectoriales | No pierde calidad al escalar, pero requiere medidas de seguridad |
Otros formatos de próxima generación
Además de estos formatos, existen otros de próxima generación como AVIF, HEIF o JPG XL.
Sin embargo, estos formatos todavía pueden tener problemas de compatibilidad con muchos navegadores. Es normal porque son formatos más recientes o experimentales.
Herramientas para convertir imágenes a otro formato
Si ya tienes imágenes en un formato incorrecto, puedes pasarlas al formato correcto utilizando herramientas gratuitas.
LightX
LightX es una herramienta que permite cambiar el formato de las imágenes.
Lo único que tienes que hacer es arrastrar la imagen o darle clic en subir. Luego puedes elegir el formato al que quieres convertirla.
Por ejemplo, si tienes una fotografía en JPG, puedes cambiarla a WebP para reducir bastante su peso sin cambiar las dimensiones.
Img2Go
Img2Go también permite convertir imágenes de un formato a otro.
Esta herramienta tiene más opciones que LightX. Puedes elegir el formato, modificar DPI, ancho, alto y otras opciones.
Si no eres diseñador, lo mejor es no tocar demasiado esas opciones y dejar la configuración básica.
Otras herramientas de conversión
También existen otras páginas que permiten convertir de JPG a otro formato o convertir imágenes en general.
Si alguna herramienta no está disponible, puedes buscar en Google opciones como convertir imágenes o convert image, y encontrarás diferentes alternativas.
Paso 2: Ajustar las dimensiones apropiadas
El tamaño de una imagen se mide en píxeles.
Así como en el mundo físico los objetos los medimos con unidades como centímetros o pulgadas, en el mundo digital estos objetos se miden con píxeles.
Regularmente lo vas a encontrar abreviado con una p y una x: px.
Optimizar correctamente las imágenes de acuerdo a las dimensiones significa darles la medida exacta del espacio en el que se van a colocar.
Por ejemplo, si tienes un espacio en tu página web dividido en dos columnas, una columna con texto y del otro lado una imagen, hay que medir ese espacio en píxeles y darle el tamaño exacto a la imagen.
Si colocas una imagen mucho más grande, también va a caber correctamente, pero el problema es que estás colocando una imagen más grande del espacio realmente necesario.
Eso sobrecarga la imagen y también tu sitio web.
Ejemplo de tamaño correcto
Si quieres colocar una imagen que abarque todo el contenido de tu página web, puede medir 1200 píxeles de ancho, que es una medida bastante estándar.
Por lo tanto, tu imagen de ancho debe medir 1200 píxeles, ni más ni menos.
Este es un problema común en muchas páginas web. Si revisas tu página, seguramente una que otra imagen tiene este problema.
Cómo medir espacios en una página web
Para medir espacios en una pantalla puedes usar herramientas como Page Ruler, una extensión gratuita para Google Chrome.
Esta extensión permite seleccionar la parte donde quieres agregar una imagen y obtener sus dimensiones en píxeles.
Por ejemplo, puedes seleccionar un espacio y ver si mide 800 píxeles de ancho por 420 píxeles de alto. Esos dos números son los que necesitas para darle el tamaño correcto a tus imágenes.
💡 Recomendación: si tienes imágenes a pantalla completa, una medida de 2500 píxeles de ancho puede ser suficiente para la mayoría de los casos.
Es importante ponerle un límite a las dimensiones, porque mientras más grande sea una imagen en píxeles, también representa un mayor peso.
También hay que tener cuidado con el caso contrario. Por querer optimizar demasiado, puedes hacer una imagen muy pequeña y luego el navegador puede estirarla o hacer que pierda calidad.
Herramientas para redimensionar imágenes
Para redimensionar imágenes puedes usar herramientas profesionales como Photoshop.
Pero también existen herramientas sencillas. Hoy en día casi todas las computadoras, ya sea PC o Mac, tienen herramientas incluidas muy básicas para redimensionar imágenes.
Adobe Express
Adobe Express es una herramienta gratuita que puede servir para cambiar dimensiones a las imágenes.
Esta plataforma permite subir una fotografía, elegir un tamaño personalizado y cambiar el ancho o el alto de la imagen.
Si está activada la cadenita, la altura cambia automáticamente de manera proporcional cuando modificas el ancho.
Si no quieres que respete esa proporción, puedes quitar el vínculo y modificar ancho y alto de forma independiente.
Paso 3: Poner un nombre contextual a la imagen
Hay que ponerle un nombre contextual a tu imagen antes de subirla a tu sitio web.
El nombre de la imagen es bien importante, primero por accesibilidad y también por posicionamiento, ya que es un factor que considera Google.
Por qué el nombre ayuda a la accesibilidad
El título le da contexto a la imagen. Es decir, permite saber de qué trata.
Para personas con discapacidad visual que utilizan algún lector, esto permite que el lector pueda leer correctamente el texto y también las imágenes.
Cuando el lector, dispositivo o aplicación llegue a una imagen, puede leer correctamente de qué trata esa imagen.
Por qué el nombre ayuda al posicionamiento
El nombre de la imagen también ayuda al posicionamiento porque es una forma de darle contexto a Google para que sepa de qué tratan nuestras imágenes.
Esto puede ayudar a obtener mejores posiciones en los resultados de Google y también en la sección de imágenes.
Recomendaciones para nombrar imágenes
- Usa nombres cortos y descriptivos.
- Utiliza letras minúsculas.
- No coloques tildes ni acentos.
- Coloca guiones bajos o guiones medios en lugar de espacios.
- No coloques caracteres especiales ni símbolos.
Paso 4: Comprimir las imágenes
El siguiente paso es utilizar alguna herramienta que permita hacer la compresión de cada uno de los archivos de imagen.
Estas herramientas no van a redimensionar tu imagen. Es decir, no le van a cambiar el tamaño. Solamente van a optimizar su peso.
Hay que elegir el optimizador o el compresor correcto de acuerdo al formato de la imagen.
Este paso es el final y es muy importante antes de subir tus imágenes a tu sitio web.
Peso de una imagen: KB y MB
Antes de pasar a la compresión práctica, hay que tener claro el concepto de peso.
Las unidades de medida más importantes para imágenes son el kilobyte, abreviado como KB, y el megabyte, abreviado como MB.
Un MB o un megabyte es igual a 1024 KB o 1024 kilobytes.
KB es la unidad de medida más pequeña y MB es una unidad de medida más grande.
📌 Recomendación: procura que tus imágenes no pesen más de 500 KB.
Por ejemplo, una fotografía que tiene muchísimos colores y que va a estar en JPG debería andar más o menos en 500 KB.
Hay imágenes muy grandes que se pueden pasar un poco, sobre todo si quieres colocarlas a pantalla completa, pero trata de acercarte lo más posible a ese número.
Una imagen más pequeña, como un logotipo o un icono en PNG, puede pesar solo unos cuantos kilobytes.
Herramientas para comprimir imágenes
Existen diferentes herramientas en línea para comprimir imágenes. Algunas comprimen más, otras menos, y algunas ofrecen más opciones de configuración.
TinyPNG
TinyPNG es una de las herramientas que puedes utilizar para comprimir imágenes.
Aunque se llama TinyPNG porque comenzó con ese formato, hoy en día también puede optimizar WebP y JPG.
Simplemente tienes que arrastrar tus imágenes y la herramienta realiza la compresión. La idea es que la imagen se vea prácticamente igual, pero con una reducción alta del peso.
ShortPixel
ShortPixel también es una herramienta gratuita para comprimir imágenes.
A diferencia de otras herramientas, permite elegir qué tanta compresión quieres aplicar.
- Lossless: comprime menos y conserva más la calidad.
- Glossy: es un punto medio y una opción muy utilizada.
- Lossy: comprime más, pero puede perder algo de calidad.
ShortPixel también permite comparar la imagen original con la versión comprimida para revisar si la calidad cambió demasiado.
JPG Optimizer
JPG Optimizer también permite comprimir imágenes y elegir la calidad.
Por ejemplo, puedes usar un 80%, que suele ser una opción recomendable, o cambiarlo a 70 o 90 si quieres más o menos compresión.
También permite optimizar el tamaño y convertir la imagen a otro formato si lo necesitas.
Otras herramientas
También existen otras herramientas como Compressor.io y Optimizilla, que permiten comprimir imágenes y revisar el antes y después.
Con estas herramientas hay que tener cuidado con el nivel de compresión, porque si se comprime demasiado, la calidad puede empezar a notarse afectada.
Imágenes y derechos de autor
Todas las imágenes que subas a tu página web deben ser propias, es decir, deben ser tuyas completamente, o deben estar libres de derechos de autor para evitar problemas legales.
Lo más recomendable es que primero sean imágenes completamente propias, porque van a reflejar de manera más realista lo que ofrece una página web.
Sin embargo, seguramente tendrás la necesidad de alguna imagen genérica o imagen de stock. Para esto puedes utilizar bancos de imágenes gratuitos.
Bancos de imágenes recomendados
| Sitio | Tipo de recurso | Punto importante |
|---|---|---|
| Unsplash | Banco de imágenes gratuito | Útil para imágenes de stock |
| Pexels | Banco de imágenes gratuito | Sirve para encontrar fotografías genéricas |
| Pixabay | Banco de imágenes gratuito | Ofrece imágenes para diferentes tipos de proyectos |
| Freepik | Banco de recursos con opciones gratuitas y de pago | Muchas de las mejores opciones suelen ser de pago |
| Envato Elements | Banco de recursos audiovisuales | Va más allá de un banco de imágenes |
⚠️ Importante: antes de usar cualquier imagen de stock, revisa siempre la licencia y las condiciones de uso.
Recomendaciones finales para optimizar imágenes
Ten mucho cuidado con imágenes, sobre todo fotografías, que puedan llegar a pesar muy por encima de los 500 KB.
Esto va a afectar mucho la carga de tu página web. Es muy común encontrar sitios web con imágenes que pesan más de 1 MB, es decir, más de 1024 KB.
Incluso hay sitios web con fotografías que pesan 35 MB. Esto suele pasar cuando toman fotos con el teléfono y las suben directamente a la página web sin optimizar absolutamente nada.
No lo hagas, porque tu página va a ser muy lenta, los usuarios se van a ir de tu página web y tu página web no va a posicionar correctamente.
Siempre que descargues una foto de tu teléfono para subirla a tu página web, optimízala antes.
Resumen de los pasos para optimizar imágenes
| Paso | Qué debes hacer | Resultado |
|---|---|---|
| 1. Elegir formato | Usar JPG, PNG, WebP, SVG o el formato correcto según la imagen | Mejor calidad y menor peso |
| 2. Ajustar dimensiones | Dar a la imagen el tamaño exacto del espacio donde se va a colocar | Evitas cargar imágenes más grandes de lo necesario |
| 3. Nombrar la imagen | Usar nombres cortos, descriptivos, sin tildes ni caracteres especiales | Mejor accesibilidad y mejor SEO |
| 4. Comprimir | Reducir el peso con herramientas como TinyPNG, ShortPixel o JPG Optimizer | Mejor velocidad de carga |
Conclusión
Optimizar imágenes para una página web es fundamental para mejorar la velocidad de carga, reducir el consumo de recursos, mejorar la experiencia de usuario, ayudar a la accesibilidad y apoyar el posicionamiento en Google.
Recuerda seguir los cuatro pasos fundamentales: elegir el formato correcto, ajustar las dimensiones apropiadas, poner un nombre contextual a la imagen y comprimir el archivo antes de subirlo a tu sitio web.
De ahora en adelante, cada vez que uses imágenes en tu página web, procura optimizarlas antes de publicarlas.
