¿Cuál es la resolución correcta para fotografía en web?

Con frecuencia en Bluekea recibimos una de la siguientes consultas: ¿A qué resolución debo preparar mis fotos para que se vean correctamente en mi web? ¿La resolución correcta para web es 72 puntos por pulgada?

La respuesta es muy sencilla: la resolución en pantalla no es relevante, ni influye para nada en la nitidez, el peso de la imagen o cualquier otro aspecto.

Comparativa de resoluciones en fotos para web

Imagen de la izquierda: 72 ppp. A la derecha: 300 ppp

Las dimensiones de la foto dentro de una página web dependerán del propio diseño de la web y del tamaño de la pantalla. Además, hay que tener presente que hoy en día las webs cambian su formato dependiendo del dispositivo en el que se muestran. Por ejemplo, una misma foto puede ocupar la tercera parte de la pantalla de un portátil, la mitad en una tablet y todo el ancho en un móvil, independientemente de su resolución.

¿Para qué sirve la resolución?

La resolución es fundamental al imprimir la imagen en papel u otro material, y determina el tamaño y nitidez de la impresión. Si una foto se imprime a 72 ppp será mucho más grande -y menos nítida- que si se imprime a 300. Es decir la resolución nos permite juntar más o menos los puntos de color que forman una imagen; si están más juntos aumenta la nitidez pero disminuye el tamaño (más resolución), y si están más separados la imagen aumenta de tamaño -se expande-, a costa de reducir la nitidez (menos resolución).

Esto es así porque en el papel podemos controlar la densidad o proximidad de los pixeles. Sin embargo, en una pantalla no podemos, porque los pixeles son fijos, son los puntos que forman la propia pantalla. Por ejemplo, si vemos una foto de 900 píxeles a su tamaño completo fuera de la web -en Photoshop por ejemplo- y nuestra una pantalla tiene 100 ppp, la resolución siempre va a ser 100. Una foto de 900 píxeles ocupará siempre 9 pulgadas (900/100), da lo mismo que tenga 72 ó 300 ppp, o un millón de ppp.

¿Entonces, cuál es la clave de la nitidez en web?

Lo más importante para una foto se vea perfecta en web es que tenga las dimensiones en píxeles suficientes según el espacio que ocupará en nuestra página. Por ejemplo, para una foto de fondo ocupando toda la pantalla, en Bluekea recomendamos un tamaño de 1920px de ancho. Si solo ha de ocupar la mitad de pantalla, puede bastar con 850px de ancho. En este artículo damos más detalles de todas estas dimensiones y cómo mantener el peso de las fotos adecuado.

Este artículo fue publicado originalmente en 2015, y ha sido completamente revisado y actualizado en noviembre de 2019.

Bluekea son webs creativas para fotógrafos y artistas creativos. pruébalo gratis

Esta entrada fue publicada en Consejos para tu web, Fotografía, Técnica digital. Guarda el enlace permanente.

9 respuestas a ¿Cuál es la resolución correcta para fotografía en web?

  1. Muchas gracias por la aclaración. Precisamente es una «guerra» que traía yo con la gente que me ha hecho la web y a los que estaba obligando a subir las fotografías a 300 :p ¡Ahora ya sé que estaba en un error! Un saludo!

  2. Interesante artículo. Y digo interesante porque hay mucha gente, fotógrafos amateurs, que no saben estos detalles. Y, la gente dirá, qué más da que sea 72 que 300, por qué voy a cambiar a 300 si total se verá bien. Pues mira, y esto es algo que se ha dicho indirectamente, primero bajas el tamaño del archivo, por lo tanto reduces la carga del servidor, algo fundamental en una página web. Pero además, y esto es muy importante, si alguien baja una fotografía en 72pp, no podrán imprimirla (bueno sí, pero saldrá un churro), mientras que una de 300pp podría ser impresa con muy buenos resultados, por tanto ser robada. Ojo al detalle.

    Revelartfotografia – Fotoclub de Menorca

    • Jesús Rodríguez dijo:

      Es un buen detalle y una precaución más el subir las fotos a 72ppp en caso de que se descarguen y se intenten imprimir directamente. De hecho siguiendo esa línea se podrían subir a 10ppp para que sean directamente imposibles de imprimir. Lo que ocurre, como ocurre también con cualquier otra medida contra el robo de imágenes en Internet, es que bastan unos ciertos conocimientos para saltarse cualquier medida de seguridad. En este caso se podría abrir la foto en cualquier programa de edición y cambiar la resolución antes de imprimirla.

      Muchas gracias por la aportación

      • hombre dijo:

        Hola
        Cito «En este caso se podría abrir la foto en cualquier programa de edición y cambiar la resolución antes de imprimirla»
        Es cierto. Lo he comprobado.
        Entonces no hay un tamaño o resolución en el que subir las imagenes aceptable para mostrar tus trabajos en internet sin que se pueda evitar eso?
        Saludos

        • Jesús Rodríguez dijo:

          Hola,

          Una vez se sube una imagen a Internet es imposible garantizar que alguien con los conocimientos necesarios la pueda descargar y posteriormente imprimir en cualquier resolución. Lo que no se podría hacer con la imagen es aumentar su tamaño en pixeles sin una pérdida de calidad. Por lo tanto el equilibrio está en subir las fotos a un tamaño suficiente para que se vean bien pero no para que se impriman con buena calidad a un tamaño medio o grande.

          Un saludo y gracias por tu comentario

          Jesus

  3. mar dijo:

    una imagen guardada en PDF, que vaya en 300dpi hace que tarde mas en abrir o descargar el archivo, en cambio si una imagen que va a 150dpi que puede abrir o descargar más rapido dicho archivo; esto en el caso de las infografías que actualmente predominan en la web. Aunque muchas veces el formato en el que están diseñadas no caben en una hoja carta, por lo que tienden a comprimir la imagen y a su vez es ilegible. Ante estas incidencias; cuál sería la mejor recomendación para la resolución de imagenes (infografías)??

    • Jesús Rodríguez dijo:

      Hola Mar,

      Cuando hablamos de imágenes digitales existen dos tipos principales: mapa de bits (habitualmente las fotografías) e imagen vectorial (diagramas, logotipos, iconos o infografías). En la práctica la diferencia fundamental es que la imagen vectorial al ser ampliada no pierde nitidez, de modo similar al texto en una web o en un documento PDF. En una imagen vectorial la resolución no influye en su nitidez. Algunos formatos de imagen vectorial son SVG o AI (Adobe Illustrator). Por tanto mi consejo sería preparar esa infografía en un formato de imagen vectorial. Tienes más información aquí: https://es.wikipedia.org/wiki/Gr%C3%A1fico_vectorial

      Espero que te sea de ayuda.

      Un saludo,

      Jesus Rodriguez

  4. Muchas gracias por la información , no tenía muy claro el tema. Aun me queda una duda, ¿qué factores pueden hacer que la calidad de la imagen baje ? Un saludo

    • Jesús Rodríguez dijo:

      Hola,

      En el caso de las imágenes para web, y siempre partiendo de una imagen original de buena nitidez y colores, los factores principales que pueden reducir la calidad son:

      – Un tamaño en píxeles insuficiente para el tamaño final al que se va a mostrar la imagen. Por ejemplo una imagen de fondo de 1200px de ancho vista en una pantalla de 1900px se verá expandida, y por tanto más borrosa.
      – Una compresión excesiva en el archivo jpg. Por regla general es mejor no bajar de un 70% aproximadamente. Se pueden revisar las fotos individualmente.
      – Un perfil de color en el archivo jpg inadecuado puede alterar significativamente los colores cuando la foto se ve en el navegador web. El perfil correcto es sRGB

      Espero que te sea útil la información. Un saludo,

      Jesus Rodriguez

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Time limit is exhausted. Please reload CAPTCHA.



Necesitamos registrar tu nombre y correo electrónico para responderte en caso necesario, y para controlar y prevenir el abuso en los comentarios. Conservaremos tus datos durante el tiempo que este artículo permanezca publicado, salvo que nos solicites lo contrario. Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.

Tienes derecho a consultar, rectificar o eliminar tus datos personales cuando ya no sean necesarios, contactando con nosotros en info@bluekea.com. El responsable del tratamiento es Jesus Rodríguez Martinez.

Los datos proporcionados aquí son gestionados por Bluekea y estarán ubicados en servidores de Amazon Web Services, INC (AWS) fuera de la UE, pero que cuenta con certificado en el Escudo de Privacidad UE-EE.UU que garantiza unos niveles de seguridad adecuados.

Puedes ampliar esta información en nuestra Política de privacidad pulsando el enlace junto a la casilla de correspondiente.