Tus fotos ya pesan poco: cómo revisar si la web sirve la imagen adecuada
Reducir el peso de las fotos no basta: aprende a revisar dimensiones, densidad de pantalla y versiones de imagen antes de dar por resuelta la carga.
Has reducido el peso de las fotografías y, aun así, no tienes claro si tu web está bien resuelta. Es una duda razonable: tener buenos archivos no equivale a utilizarlos correctamente. Una imagen puede verse pequeña en pantalla y proceder de un archivo mucho mayor de lo necesario. También puede funcionar bien en una vista y resultar inadecuada en otra.
Antes de seguir comprimiendo, conviene separar dos cuestiones: cómo es la imagen y qué versión recibe cada visitante. Esta guía te ayuda a revisar esa segunda parte, con decisiones sobre dimensiones, pantallas y tipos de recurso. No pretende atribuir cualquier problema de velocidad a las fotografías, sino evitar que des por terminada su optimización demasiado pronto.
Una buena imagen no es necesariamente una imagen bien servida
Al preparar una foto solemos fijarnos en el encuadre, la nitidez y el peso del archivo. Para utilizarla en una web falta otra decisión: qué dimensiones necesita en cada lugar donde aparece. No requiere lo mismo una fotografía que ocupa gran parte de la página que una miniatura dentro de una tarjeta.
Imagina, como ejemplo hipotético, una empresa de reformas que utiliza una misma fotografía en la cabecera de un proyecto y en el listado de trabajos. Reutilizar el contenido visual tiene sentido. Enviar siempre el mismo archivo, sin considerar ambos espacios, merece una revisión.
El objetivo no es conseguir el archivo más pequeño a cualquier precio. Es enviar una versión adecuada al espacio y al dispositivo, manteniendo una calidad visual suficiente. Reducir dimensiones sin comprobar el resultado puede ser tan poco acertado como conservar un original enorme por precaución.
Comprueba el tamaño de presentación antes de exportar
La primera referencia es el espacio que ocupa la imagen dentro del diseño. Anota su anchura y altura aproximadas en las vistas principales: móvil, pantalla intermedia y escritorio. No necesitas convertir ese inventario en una colección interminable de medidas; necesitas detectar usos diferentes.
En un ejemplo hipotético, una imagen presentada en un recuadro de 500 por 500 píxeles podría partir de un archivo con esas dimensiones. Sin embargo, esa correspondencia depende de la densidad de pantalla. Por eso, el tamaño visible es el punto de partida, no una receta universal de exportación.
No confundas tamaño del archivo y dimensiones
El peso expresa cuántos datos se transfieren. Las dimensiones indican la anchura y la altura de la imagen en píxeles. Ambas cuestiones están relacionadas, pero no son intercambiables. Un archivo comprimido puede seguir teniendo unas dimensiones innecesarias para el lugar donde se utiliza.
Una revisión útil empieza por identificar dónde aparece cada recurso. Después se decide qué versiones preparar. Si necesitas ayuda con esa correspondencia entre diseño y recursos, puedes plantearla dentro de un trabajo de optimización de la web, con un alcance concreto en lugar de una petición genérica de «hacerla más rápida».
Ten en cuenta la densidad de pantalla sin buscar la máxima resolución siempre
Dos pantallas pueden mostrar una imagen con un tamaño visual parecido y necesitar cantidades distintas de píxeles para representarla. Esa relación se conoce como densidad de píxeles del dispositivo, o DPR. Explica por qué una imagen no debe elegirse únicamente por la anchura visible de su contenedor.
Siguiendo el ejemplo hipotético anterior, un recuadro de 500 por 500 píxeles en una pantalla con DPR 2 puede aprovechar una imagen de 1000 por 1000. Con DPR 3, la referencia sería de 1500 por 1500. Son ejemplos para entender la relación, no dimensiones que debas aplicar a todas tus fotografías.
Tampoco conviene convertir la mayor densidad en una obligación de servir siempre la versión más grande. En muchos casos, aumentar la resolución hasta cubrir un DPR 3 no aporta una diferencia perceptible para la mayoría de las personas. Compara el resultado antes de conservar datos que no mejoran de forma apreciable la imagen.
Prepara alternativas para que no todos reciban el mismo archivo
Cuando una imagen tiene varios usos o se muestra en dispositivos distintos, disponer de alternativas permite ajustar su entrega. El atributo srcset sirve para indicar al navegador varias fuentes posibles, acompañadas de información sobre su anchura o su densidad.
No necesitas memorizar su sintaxis para pedir una implementación clara. Puedes solicitar que se identifique la imagen original, qué versiones se han generado y cómo se ofrecen al navegador. Tener varias copias guardadas no demuestra por sí solo que la página las esté utilizando como alternativas.
En una galería hipotética de un taller de cerámica, la pregunta no sería «¿están comprimidas las fotos?», sino «¿qué opciones tiene el navegador para mostrar esta tarjeta en distintas pantallas?». Esa formulación permite revisar una decisión concreta y evita dar por resuelto todo el sistema con una sola exportación.
Si estás preparando una nueva web, incluye este criterio al definir el diseño y desarrollo de las páginas. Las dimensiones de las imágenes deben guardar relación con los espacios previstos, no decidirse de forma aislada al terminar el proyecto.
Distingue fotografías de logotipos, diagramas e ilustraciones
No todos los recursos visuales plantean el mismo problema. SVG es un formato vectorial especialmente útil para dibujos de líneas, diagramas y gráficos sin detalle fotográfico fino. Por eso merece considerarse para ciertos elementos, en vez de tratar toda la biblioteca como si fueran fotografías.
Como ejemplo hipotético, una asesoría podría utilizar una fotografía para presentar su oficina y un diagrama vectorial para explicar los pasos de una consulta. Elegir un formato según el contenido permite abordar cada recurso con un criterio, sin imponer una única solución.
Eso no significa que un SVG esté optimizado solo por ser vectorial. Al ser un formato basado en texto, admite minificación y compresión. También existen herramientas de optimización como SVGO. Si alguien propone optimizar estos archivos, pide comprobar su aspecto después: el objetivo sigue siendo conservar el contenido visual necesario.
Una lista para cerrar la revisión con decisiones verificables
En lugar de pedir una mejora indefinida, prepara una lista de imágenes representativas y utiliza estas comprobaciones:
- Ubicación: señala si el recurso aparece en una cabecera, una tarjeta, una ficha o varios espacios.
- Dimensiones visibles: comprueba cómo cambia su tamaño entre las vistas principales.
- Versiones disponibles: identifica si existe una única imagen o varias alternativas.
- Entrega: pregunta cómo se ofrecen esas alternativas al navegador.
- Densidad: revisa la nitidez sin asumir que la resolución máxima siempre compensa.
- Tipo de contenido: distingue las fotografías de los elementos que podrían encajar en SVG.
- Resultado visual: compara las versiones dentro de la página, no solo abiertas por separado.
Esta lista permite delimitar lo que se ha revisado. Si después siguen existiendo dudas sobre la velocidad general, no concluyas que hace falta comprimir más: comprobar las imágenes no equivale a diagnosticar toda la web.
Preguntas frecuentes
¿Basta con reducir el peso de todas las fotografías?
No. También debes comprobar si sus dimensiones corresponden con el uso real y si existen alternativas adecuadas para distintas pantallas. Un archivo ligero no demuestra por sí solo que la entrega esté bien planteada.
¿Debo preparar una imagen diferente para cada móvil?
No necesitas organizar el trabajo por modelos concretos. Es más útil revisar los tamaños de presentación, la densidad y las alternativas que puede elegir el navegador. Así la decisión responde al uso de la imagen.
¿Conviene convertir todas las imágenes a SVG?
No. Su utilidad encaja especialmente con líneas, diagramas y gráficos sin detalles fotográficos finos. No es una sustitución general de las fotografías ni elimina la necesidad de optimizar los archivos.
Si quieres concretar esta revisión, puedes consultar qué conviene comprobar en tus páginas. Aporta las direcciones que te preocupan y señala qué imágenes aparecen en varios tamaños. Es un punto de partida para definir el trabajo sin confundir calidad visual, entrega de archivos y rendimiento global.
Contenido elaborado y revisado automáticamente con IA. Fuente oficial consultada el 2/11/2026: documentación de referencia. Las imágenes son conceptuales.
Ideas para tomar mejores decisiones.
Qué preguntar en una landing de presupuestos para no frenar la consulta
Decide qué datos pedir en una landing de presupuestos, cómo explicar el siguiente paso y qué revisar para que contactar no se convierta en una tarea.
Cómo organizar las categorías de una tienda online pequeña
Aprende a separar categorías, filtros y variantes para ordenar un catálogo pequeño, facilitar la compra y mantener una estructura de URLs coherente.
Qué activar primero en el marketing de tu pyme: web, contenidos o campañas
Aprende a priorizar la web, el SEO y las campañas de tu pyme según el problema que necesitas resolver, con criterios prácticos y un ejemplo hipotético.