Una buena práctica antes de subir una imagen a tu página web o blog es intentar reducir el tamaño de las fotos (comprimir fotos), ya que esta afecta de manera directa a la velocidad de carga que tiene nuestro sitio web.
También te podría interesar:
Códigos CSS y HTML para WordPress [+trucos]. Colores CSS para personalizar tu página web o blog
Cómo crear una cuenta de Facebook y una Página de Empresa para tu negocio [2018]
Qué es un Community Manager, qué hace y cuáles son sus funciones + Plantillas Descargables en Excel
¿Por qué es tan importante comprimir tus fotos antes de subirlas a internet?
- Afecta a la velocidad de carga o page speed de nuestra página web.
- Mejora la experiencia de usuario que tienen nuestros visitantes.
- Mejora el posicionamiento web de tu página web o Blog.
- Reduce el consumo de recursos de nuestro servidor.
- Reduce el coste de nuestro CDN.
- Ocupan menos espacio en el hosting web.
¿Cómo comprimir fotos sin perder calidad?
Para reducir el peso de una imagen sin alterar su calidad visual, debes seguir estos tres pasos:
-
Redimensionar: Ajusta las dimensiones en píxeles al tamaño real que se mostrará en pantalla (máximo 1200px a 1920px para web).
-
Comprimir con pérdida inteligente: Pasa la imagen por herramientas como TinyPNG o Squoosh que eliminan datos invisibles al ojo humano.
-
Convertir a formatos modernos: Transforma el archivo a formato WebP o AVIF, logrando reducciones de peso de hasta un 80% en comparación con un JPG tradicional.
Formatos de imagen web: De JPG y PNG a WebP y AVIF
JPG y PNG: Cuándo utilizarlos hoy en día
Aunque estos formatos son los más utilizados por el comun de los mortales y los solemos utilizar para nuestros fotos, imágenes y creaciones, lo cierto es que no es la opción más recomendada para formato web, principalmente por su peso.
1.- JPG. Este formato lo utilizaremos en la mayoría de ocasiones excepto en las imágenes vectorial o del tipo “flat design”.
2.- PNG. Este formato lo utilizaremos para imágenes vectoriales y para las infografías vectoriales.
WebP y AVIF: Los formatos de nueva generación recomendados por Google.
Si sigues guardando todas tus imágenes en JPG o PNG, estás ralentizando tu página web de forma innecesaria. Aunque estos formatos tradicionales han sido el estándar de internet durante décadas, hoy en día Google exige el uso de formatos de imagen de nueva generación: WebP y AVIF.
Estos formatos han revolucionado la optimización web (WPO) gracias a sus algoritmos de compresión avanzados, permitiendo reducir drásticamente el peso de los archivos sin que el ojo humano note ninguna pérdida de calidad.
-
WebP: Desarrollado por Google, es el estándar moderno más extendido. Soporta tanto compresión con pérdida como sin pérdida, admite transparencias (como el PNG) y animaciones (como el GIF). Una imagen en WebP es, de media, un 30% más ligera que su equivalente en JPG o PNG.
-
AVIF: Es el formato del futuro y el más eficiente del mercado. Basado en el códec de vídeo de código abierto AV1, ofrece una calidad visual superior a WebP con tasas de compresión aún más agresivas. Un archivo AVIF puede llegar a ser hasta un 50% más pequeño que un JPG tradicional, manteniendo una nitidez impecable en los colores y detalles.
💡 Consejo SEO para tus Core Web Vitals: Al subir tus fotos en WebP o AVIF, reducirás drásticamente el tiempo de carga de tu sitio web, lo que mejora directamente la métrica LCP (Largest Contentful Paint). Esto se traduce en una mejor experiencia de usuario y, por lo tanto, en un mejor posicionamiento en los resultados de Google.
Te recomiendo leer:
25 Mejores Bancos de Imágenes Gratis de Alta Resolución
20 Páginas para subir imágenes gratis a Internet
Súper Guía para crear y optimizar imágenes y fotos para un Blog o Página Web
Las mejores herramientas online para comprimir fotos gratis
1.- TinyPNG
Herramienta online gratis con la que podemos reducir el tamaño de cualquier imagen de una manera fácil y sencilla. Trabaja con todo tipo de formatos incluidos WebP y Avif.
Esta es la herramienta favorita de Miguel Florido para comprimir imágenes y la que siempre muestra a sus alumnos de la Escuela Marketing and Web.
Ventajas de la herramienta
- Podemos comprimir 20 fotos a la vez.
- Herramienta online 100% gratis.
- La relación calidad/tamaño es muy buena.
- Conserva las transparencias después de realizar compresión.
Desventajas de la herramienta
- No podemos comprimir imágenes de más de 5 MB.
- No disponemos de una pre visualización, por lo que no sabemos si la calidad resultante es la que esperamos.
- No podemos realizar ajustes en el tipo de compresión porque es automática.
2.- Image Converter (Comprime y convierte imágenes)
Es sin duda una de las mejores herramientas para comprimir fotos online o también para convertirlas en otro formato como WebP o Avif.
Trabaja con todos los formatos de imágenes y además de ser compresor también no permite convertir imágenes antiguas en png o jpg que las queremos pasar a webp.
3.- I Love Image (Comprime, convierte, edita y mil cosas más)
Es una completa navaja suiza para trabajar con imágenes, que nos permite como:
- Comprimir imágenes.
- Redimensionar imágenes.
- Recortar imágenes.
- Convertirlas de formato.
- Editar las imágenes.
Y muchas cosas más que descubrirás si te animas a probarla.
4.- Compress Jpeg
Una herramienta online con la que podemos comprimir varias imágenes al mismo tiempo.
Ventajas de la herramienta:
- Podemos comprimir 20 fotos a la vez.
- Herramienta online 100% gratis.
- La relación calidad/tamaño es muy buena.
- Podemos arrastrar las imágenes desde una carpeta.
- Tenemos una pre visualización de la imagen comprimida.
- Podemos modificar los parámetros de compresión lo que hacen que sea una herramienta para comprimir imágenes fantásticas.
Desventajas de la herramienta
- La página abusa un poco de la publicidad.
5.- Compressor IO
Una herramienta para comprimir imágenes muy completa, ya que lo tenemos prácticamente todo en una herramienta y con un manejo súper sencillo e intuitivo.
Ventajas de la herramienta
- Herramienta online 100% gratis.
- La relación calidad/tamaño es muy buena.
- Tenemos una pre visualización de la imagen comprimida.
- Podemos modificar los parámetros de compresión de manera muy intuitiva ya que solo tenemos que arrastrar el ratón para indicar el nivel de compresión.
Desventajas de la herramienta
- Solo se pude comprimir una sola imagen.
- Tiene un límite de archivo máximo de 10 MB.
6.- Convertio (Convierte tus imágenes en cualquier formato)
Una maravilla de herramienta online con la que podemos convertir todas nuestras imágenes o fotos en cualquier formato que queramos.
Termino con este convertidor de imágenes para que lo tengas a la mano y lo utilices siempre que lo necesites.
Te animo a probarlo estoy convencido de que te sorprenderá.
¿Cuál es el método que yo utilizo para comprimir fotos?
Antes, es decir hace muchos años se trabaja con Photoshop y se exportaba la imagen en png o jpg y luego se comprimía.
Pero ahora en la actualidad solo podemos trabajar con 2 formatos de imagen WebP y Avif.
Herramienta de edición puedes utilizar la que quieras, aunque no de las que más usamos ahora en la Escuela es Canva.
Luego exporta y comprime y convierte.
Recuerda no subas imágenes a tu página web o blog sin antes haberlas comprimido y convertido en formato WebP o AVIF.
Preguntas Frecuentes sobre comprimir imágenes
❓ ¿Qué pasa si comprimo mucho una foto? (Compresión Lossless vs. Lossy)
Si comprimes demasiado una fotografía, la imagen empezará a mostrar artefactos visuales, pixelado y pérdida de nitidez (el típico efecto borroso o con «ruido» en los bordes). Esto ocurre porque los algoritmos de compresión eliminan información para reducir el peso del archivo.
Para controlar este impacto, es vital entender que existen dos formas de comprimir una imagen:
-
Compresión con pérdida (Lossy): Este método reduce el peso eliminando permanentemente datos de la imagen que el ojo humano apenas puede percibir (como sutiles diferencias de color). Herramientas como TinyPNG o formatos como JPG y WebP utilizan este sistema. Si se configura un nivel de compresión moderado (entre el 70% y 80%), el archivo pesará muy poco y mantendrá una calidad excelente; pero si se estira al máximo, la foto se pixelará y perderá toda su calidad.
-
Compresión sin pérdida (Lossless): Este sistema reduce el tamaño del archivo eliminando metadatos redundantes e información interna del archivo, pero sin tocar un solo píxel de la imagen. Al descomprimirla o visualizarla, la calidad se mantiene exactamente igual al original al 100%. Formatos como PNG utilizan este método. La desventaja es que el peso final sigue siendo considerablemente alto para una web.
❓ ¿Cuál es el tamaño ideal en KB para una foto web?
La regla de oro para el SEO y la velocidad de carga (WPO) es clara: lo óptimo es que una foto web pese menos de 100 KB.
Superar esta barrera de forma masiva ralentizará tu sitio web y empeorará la experiencia del usuario, especialmente en dispositivos móviles. Sin embargo, el peso exacto dependerá del tipo de imagen y su función en la página:
-
Imágenes de fondo o banners principales (Hero Images): Al ser imágenes grandes que ocupan todo el ancho de la pantalla (1920px), se permite un margen mayor, pero intenta que nunca superen los 150 KB – 200 KB.
-
Imágenes dentro de los artículos o productos de tienda online: Deben estar estrictamente por debajo de los 80 KB o 100 KB, ajustando su ancho a un máximo de 800px o 1200px.
-
Iconos, logotipos y gráficos simples: Al ser elementos pequeños, su peso ideal debe situarse por debajo de los 10 KB – 20 KB, priorizando siempre el uso de formatos vectoriales como SVG.
📌 Consejo final: No subas una imagen directamente desde tu cámara o un banco de fotos (que suelen pesar entre 3 MB y 5 MB). Redimensiona primero su ancho en píxeles y luego pásala por una herramienta de compresión lossy inteligente antes de subirla a WordPress. Tu servidor y tu posicionamiento en Google te lo agradecerán.
Si te ha gustado el post, puedes compartirlo con un amigo/a.
Consultor de Marketing Digital y Social Media, y Director de la Escuela Marketing and Web.
Autor de 5 libros de Marketing Digital e Inteligencia Artificial con la editorial Anaya. Profesor y speaker internacional.
Encuentra todos mi libros aquí
O sígueme en redes sociales.
24 respuestas
Hola Miguel muy buena la recopilación de estas herramientas.
Yo en lo personal uso tinyPNG y asta los momento estoy conforme, ya que reduce él peso y no pierde la calidad de imagen. y reducir él peso de las imágenes es muy importante para aumentar él rendimiento del hosting y aumentar la velocidad de carga de nuestro sitio. Eh visitado blogs que tardan una eternidad en cargar solo por él peso de las imágenes y estoy afecta negativamente a cualquier sitio.
1 saludo.
Hola Eduardo,
Yo he llegado a ver una imagen destacada de un post de más de 2 megas y con el nombre del propio banco de imágenes, jejeje.
No cuesta nada hacer las cosas un poco mejor y cambiar ese nombre y comprimir y reducir el tamaño lo más que podamos.
Pienso como tú, a día de hoy no existe una herramienta que comprima tanto como tinypng sin perder calidad de imagen.
Waoo 2 megas eso es una barbaridad , pero bueno hay tantas de tantas que serian infinitas contarlas jaja
jajaja, sí, de estas tengo unas cuantas anécdotas…
Muchas gracias Borja,
pero me gustaría saber qué te ha parecido el post también. Un saludo
Pues me parece genial, ya que aunque conocía la gran mayoría, hay herramientas que no había utilizado y que probaré, porque Compressor deja las letras algo borrosas en mi opinión cuando comprime.
Genial amigo, ya me contarás que te parecen las nuevas herramientas
sin dudarlo tengo varios pero me quedo con tinyPNG 🙂
Totalmente de acuerdo Rafael, el algoritmo de compresión que utiliza es una pasada
Hola Miguel,
Buena recopilación de recursos. Un truco para mejorar la compresión de imágenes en png si las guardas con photoshop, es bajar el número de colores de 256 a 128. Sobre todo cuando lo que usas son colores planos como los que suelen incluir las imágenes de cabecera de tus artículos, algo ganamos más por ahí.
Yo el último plugin para wp que he probado y de momento dejo es el imagify, échale un ojo. COn la versión gratuita muchos bloggers tenemos más que suficiente. Si quieres ver un review pasa por mi blog.
Un abrazo!
Cierto David, a veces cuando tenemos una imagen vectorial olvidamos reducir el número de colores para bajar el peso de la imagen, muy buena tu aportación.
Claro el echaré un ojo a imagify, y me lo anoto para una futura actualización del post.
Un abrazo amigo
Yo lo hacía todo con Photoshop guardar para web pero ahora que me has iluminado las pasaré también por TinyPNG ya que en una ecommerce tengo más de 1500 fotografías y ando loca para bajar el pagespeed. Gracias!
Hola Maren,
He incluido justamente esta parte porque muchos por he advertido que muchos de mis alumnos se confiaban precisamente con el guardar para web cuando realmente se puede comprimir más.
Un abrazo
Hey, Miguel, buen post!
Yo utilizo CompressNow, aunque probaré la que usas tú a ver qué tal. La que utilizo me gusta porque puedo regular la compresión en función de la imágen y en la mayoría de los casos queda bastante bien aun comprimiendo la imagen hasta un 75 u 85%. Rula totalmente on line y es bastante rápida.
Lo cierto es que hay tantas de estas herramientas que uno no tiene tanto tiempo como quisiera para irlas probando todas ¡Uf! Yo probé varias antes de decidirme y al final me quedé con CompressNow.
A ver si puedo dediarle un rato a probar algunas de las on line que recomiendas en tu post y especialmente TinyPNG a ver que tal.
¡Saludos!
Hola José Luis,
Te recomiendo que pruebes tinypng, verás que el nivel de compresión sin perdida de calidad es muy bueno.
Un saludo
Hola, al igual que tú, utilizo Photoshop siempre y desconocía, por completo, que todavía podías optimizar más una imagen con TiniPNG. Apuntado!
Muy bien María José,
Verás como mejoras así el pagespeed.
Un abrazo
Aquí otro a probar TinyPNG 🙂 yo también era de los de solo Photoshop y ya.
De todas formas ¿no nos estamos pasando un poco con la obsesión por este tema? ¿De verdad pasar de 16KB a 14KB puede resultar una diferencia significativa?
Lo que tienes que pensar más allá de la reducción del peso es que Google calcula el factor de compresión que utilizas en cada imagen y este sin afecta a tu page speed, 2 kb no son mucho pero el algoritmo de Google analiza que se puede comprimir un 15% más. Haz tu mismo la prueba con Google Pagespeed insight para ver si no te dice que tienes imágenes que puedes comprimir y saldrás de dudas.
Hola Miguel!
Buen post, muchas no las conocía.
La verdad que tengo mis truquitos puede que se apor eso!
Sobre Photoshop (LINIX??) mira que soy linuxero desde hace muuuuchos años y no, no hay photoshop para linux, a no ser que pongas maquina virtual o cosas por el estilo.
Pero tenemos «Krita» y mi favorito «GIMP» que es el que uso yo y también está para Windows.
Muy similar a photoshop sólo que gratis, os lo recomiendo a todos y todas.
En unos días os digo mi truco, me lo guardo en la reserva, para una foto gimp o photoshop está bien, pero cuando hay que reducir 50 o 100 tengo otra alternativa genial que lo hace en segundos.
Un abrazo miguel!!
Hey
@miguelngelflorido:disqus
Ya te puedo decir mi truco para comprimir las fotos a tope, con excelente compresión, sin perdida, gratis y súper rápido. (Con Telegram)
Pásate por el blog de @elblogdeanamata:disqus y mira el articulo de invitado que he tenido el honor de publicar.
Ahí lo explico muy clarito y es de lo mejor que he probado.
Un abrazo compi!
Añadiría RIOT para PC, que es la herramienta que utilizo últimamente, e Imagify para WordPress, que me parece de los plugins más cómodos.
Utilizo un 60-80% de optimización en función de la imagen y su ubicación. ¿Qué porcentajes empleáis vosotros?
Saludos!
¡Genial Miguel! Como siempre, un artículo de ayuda cuando más se necesita. Mil gracias y enhorabuena. Un saludo
Yo utilizo Jpegmini y fileoptimizer en PC. Y en Mac me gusta imageoptim