Subir una foto de cuatro megas a un sitio web parece inofensivo hasta que alguien mide cuánto tarda en cargar la página en un teléfono con datos móviles. Ahí es donde los formatos de fotos dejan de ser un detalle técnico y pasan a ser la causa.
La parte confusa es que las guías del tema terminan todas en la misma tabla comparativa, y después nadie explica lo que pasa de verdad en un sitio: que el formato que subes casi nunca es el que recibe el visitante.
Vale entonces separar tres cosas: en qué se diferencian los formatos, cuál usar según dónde va la imagen, y qué hace el servidor con ella sin pedir permiso.
En qué se diferencian los formatos de fotos, más allá de la extensión
Solo hay tres propiedades que importan para decidir, y las demás se derivan de ellas. La primera es si la compresión pierde información o no. Un formato con pérdida descarta detalle que el ojo apenas registra para ahorrar peso, y cada vez que se vuelve a guardar descarta un poco más. Uno sin pérdida conserva todo y pesa más.
La segunda es si admite transparencia. Un logotipo sobre un fondo de color necesita que el área alrededor sea transparente; una fotografía no lo necesita nunca. Esa única pregunta ya descarta la mitad de las opciones en cada caso.
La tercera es la eficiencia a igual calidad, que es donde la generación nueva de formatos gana. WebP, que Google publicó en 2010 como sucesor de los dos clásicos, consigue entre un 25% y un 35% menos de peso con calidad equivalente, y además admite transparencia y animación. AVIF, desarrollado por la Alliance for Open Media, aprieta todavía más.
Hay una cuarta propiedad que no es de compresión y conviene nombrar: si la imagen está hecha de píxeles o de instrucciones. Los formatos vectoriales escalan sin perder nitidez a cualquier tamaño, pero no sirven para fotografías; son para logotipos, iconos y gráficos. Una foto siempre va en un formato de píxeles.
Cuál usar según dónde va la imagen
La decisión se resuelve con dos preguntas: qué contiene la imagen y dónde se va a ver.
| Qué es la imagen | Formato recomendado |
|---|---|
| Fotografía con muchos colores y degradados | JPG, o WebP si el sitio lo admite |
| Logotipo, icono o captura con texto nítido | PNG |
| Cualquier imagen de una web moderna | WebP |
| Imagen grande donde el peso es crítico | AVIF |
| Foto que se va a editar varias veces | Un formato sin pérdida mientras se trabaja |
En redes sociales la tabla importa menos de lo que parece, porque cada plataforma recomprime lo que se sube con sus propios parámetros. Lo que sí controla quien publica es la calidad de partida y las dimensiones: subir una imagen más pequeña que el tamaño en que se va a mostrar garantiza que se vea mal, y ninguna elección de formato arregla eso.
El error más común no es elegir mal el formato, sino subir el archivo que salió de la cámara. Una foto de doce megapíxeles mostrada en un bloque de ochocientos píxeles de ancho está entregando quince veces más información de la que se va a ver, y el navegador tiene que descargarla completa antes de reducirla. Ajustar eso es parte del trabajo de creación de contenido aunque no se parezca en nada a escribir.
El formato que subes no es el que recibe el visitante
Esta es la parte que las comparativas omiten y la que más confunde a quien administra un sitio. Casi cualquier gestor de contenidos con un plugin de optimización instalado hace dos cosas en silencio: genera varios tamaños de cada imagen y crea una copia en un formato más eficiente.
A partir de ahí, lo que el navegador descarga lo decide el servidor según lo que ese navegador declare aceptar. Sube un JPG y es muy probable que tu visitante esté recibiendo un WebP que tú nunca creaste. Esto funciona bien y resuelve el problema sin intervención, con un efecto lateral molesto: la copia servida suele vivir en una carpeta distinta de la original.
Ese detalle cuesta horas cuando algo falla. Buscar una imagen por la ruta con la que se subió no la encuentra, porque la que se está sirviendo está en otra parte. Es el tipo de cosa que hace concluir que una imagen no existe cuando lo único que pasa es que se estaba mirando el sitio equivocado. Conviene comprobarlo abriendo la página y mirando qué archivo pidió el navegador, no la biblioteca de medios.
La conclusión operativa es contraintuitiva: si el servidor ya convierte, no vale la pena convertir a mano antes de subir. Lo que sí vale es subir el original con buena calidad y en dimensiones razonables, porque la conversión automática puede reducir peso pero no puede inventar detalle que no estaba. Es parte del mismo trabajo que cubre cualquier plan de optimización web.
Qué hacer con las fotos que ya están subidas
Casi ningún sitio empieza de cero: lo normal es heredar una biblioteca de medios con años de archivos subidos sin criterio. Revisarla entera rara vez compensa, y por eso conviene empezar por donde el peso duele.
El orden que funciona es por visibilidad. Primero las imágenes de la portada y de las páginas que reciben más visitas, porque ahí cada kilobyte se paga en cada sesión. Después las destacadas de los artículos, que aparecen repetidas en los listados. Y al final el resto, que puede quedarse como está sin que nadie lo note.
Para localizar las pesadas no hace falta ninguna herramienta especial: casi cualquier medición de velocidad lista los archivos más grandes de una página concreta, y suelen repetirse los mismos tres o cuatro en todo el sitio. Sustituir esos por versiones del tamaño correcto rinde más que reprocesar doscientas imágenes de artículos antiguos.
Lo que no conviene es borrar. Una imagen eliminada de la biblioteca deja un hueco en cada artículo donde estaba, y esos huecos aparecen meses más tarde sin que nadie recuerde la causa. Reemplazar el archivo conservando el nombre, o subir el nuevo y actualizar la referencia, cuesta algo más de trabajo y no rompe nada.
Por qué esto aparece en la velocidad y no en el diseño
En la mayoría de las páginas, el elemento más grande del primer pantallazo es una imagen. Y como ese elemento es justo el que las métricas de experiencia de carga usan para decidir cuándo una página «ya cargó», el peso de esa única foto condiciona la nota de toda la página.
De ahí que el orden de prioridades sea claro. Primero las dimensiones correctas, porque es donde está el ahorro grande. Después el formato, que aporta ese 25% o 30% adicional. Y al final los ajustes finos de calidad, que mueven poco y consumen mucho tiempo de discusión.
Vale decir también qué no resuelve esto. Un sitio lento por un servidor saturado, por scripts de terceros o por una base de datos sin mantenimiento no mejora por cambiar de formato; las imágenes son la causa más frecuente, no la única. Y una foto mal elegida, encuadrada o iluminada sigue siendo una mala foto en cualquier formato, igual que una imagen tomada de un banco de imágenes sin relación con el texto sigue siendo relleno.
El mismo razonamiento aplica al otro gran consumidor de peso de una página: con los formatos de video las decisiones de la plataforma son igual de invisibles y el ahorro posible es bastante mayor.
Lo que envejece de todo esto es la lista de formatos: AVIF era exótico hace cinco años y hoy se sirve sin pensarlo. Lo que no envejece son las dos preguntas del principio —qué contiene la imagen y dónde se va a ver— y el hábito de comprobar, en la página servida, qué recibe de verdad el visitante. Si hay que delegar una sola cosa al servidor, que sea la conversión; y si hay que conservar una sola disciplina propia, que sea subir el tamaño correcto.
Preguntas frecuentes
¿Cuál es el mejor formato de fotos para una página web?
WebP, en casi todos los casos: pesa bastante menos que JPG y PNG a igual calidad y admite transparencia. Si el sitio convierte automáticamente, basta con subir un JPG de buena calidad y dejar que el servidor haga el resto.
¿Cuál es la diferencia entre JPG y PNG?
JPG comprime descartando detalle, así que pesa menos y sirve para fotografías. PNG conserva todo y admite transparencia, por lo que es la opción para logotipos, iconos y capturas con texto.
¿Por qué mi foto se ve borrosa después de subirla?
Casi siempre porque se subió en dimensiones menores a las que el sitio la muestra y el navegador la está ampliando. También ocurre al reguardar varias veces un archivo con pérdida, que degrada un poco en cada guardado.
¿Conviene convertir las fotos a WebP antes de subirlas?
Si el sitio ya genera esa copia automáticamente, no aporta nada. Lo que sí conviene es ajustar las dimensiones al tamaño real en que se verá la imagen, porque ahí está el ahorro mayor.
¿Cuánto debería pesar una foto en una web?
No hay una cifra única, pero una imagen de contenido suele estar bien por debajo de 200 KB y una de cabecera algo más. Más útil que la cifra es la regla: ningún archivo debería pesar más de lo que su tamaño en pantalla justifica.
