Entre la leyendas urbanas hay una que dice que la resolución óptima para imágenes web es de 72 dpi

Resolución óptima para imágenes web

Una leyenda urbana desgraciadamente extendida dice que la resolución óptima para imágenes web es de 72 dpi.

¿Qué te parece?

¿Crees en las leyendas?

Lo sé, es como preguntar «¿Crees en los hombres lobo?»

O… «¿Crees en el doble de Paul McCartney?»

Vaya, aunque esta última leyenda podría tener algo de verdad, digamos que, francamente, si Paul estuviera muerto o no, no cambiaría mi vida. Así que no me preocupa mucho.

Además, soy un escéptico por naturaleza. Y como Santo Tomás, necesito pruebas irrefutables.

Y no espero a que me entreguen esas pruebas en bandeja de plata. Normalmente, cuando tengo dudas, investigo. 🔍

Esa es siempre la mejor solución.

Y hace tiempo que investigué para llegar al fondo de la optimización de las imágenes para web y el SEO.

Me he dado cuenta de que cuando intentas buscar información sobre cómo optimizar la resolución de las imágenes para la web, oyes todo tipo de cosas.

😭 😤 🤬

¡Lo digo en serio!

 

¿Es realmente necesario optimizar la resolución de las imágenes para web?
[ Volver arriba ]

Mi respuesta directa:

No es necesario optimizar la resolución de las imágenes para web.

Hay mucha confusión sobre este tema, y a menudo escuchamos afirmaciones que pueden parecer lógicas, pero que a la vez son completamente erróneas.

Es normal tener dudas, y la mejor manera de resolverlas es hacer la pregunta adecuada e investigar, buscar fuentes fiables y, posiblemente, llegar a entender el tema en profundidad.

Como introduje en el primer episodio de esta trilogía, al tratar en detalle los aspectos de la resolución de la imagen correría el riesgo de salirme del tema.

Esto se debe a que la resolución de las imágenes para la Web no tiene nada que ver con la velocidad de carga y el SEO.

¿Qué estás diciendo Ale, estás loco?

Vamos, amigo, estoy muy seguro de lo que digo y te voy a demostrar que no me equivoco.

Así que para limitarme al objetivo de este post, intentaré responder y disipar lo que quizás sea el mito más común.

 

Google difunde la leyenda, ofreciendo resultados que hablan de la resolución óptima para imágenes web

[ Volver arriba ]

Por desgracia, ni siquiera la IA de Google consigue evitar caer en la trampa de la leyenda urbana de los 72 dpi.

He visto que entre sus primeros resultados, el propio Google propone numerosos sitios web que escriben afirmaciones inexactas.

Y de vez en cuando estas declaraciones también aparecen en los fragmentos destacados (featured snippets).

¡¡¡¡AYUDA!!!!

Hay que decir que la inteligencia artificial de Google se engaña de vez en cuando. Digamos que no es muy inteligente, quizás porque todavía está aprendiendo.

🤪

Y así, impulsado por mi sentido cívico (pero también por mi sentido crítico), decidí iniciar una campaña «instructiva» de la IA de Google, porque simplemente a través de sus featured snippets, puedo enviar feedback a Google, para señalar esos contenidos engañosos.

Porque no tiene sentido hablar de resolución óptima para imágenes web!

Y al notificar estas afirmaciones engañosas a Google, soy consciente de que corro el riesgo de meterme en problemas de SEO. Porque el día que la IA reconozca estos errores, Google podría captar y marcar como inexacto incluso el contenido que reporte en las próximas líneas, ya que escribiré muchas veces afirmaciones como: resolución óptima para imágenes web; mejor resolución para web; optimizar la resolución de las imágenes para web; etc.

Porque dudo que sea capaz de distinguir el hecho de que reporte ciertas afirmaciones solo para demostrar su inexactitud.

Así que en el futuro podría ser penalizado por la propia IA de Google.

AleRonchi Wallace, un fotomontaje de la escena de Braveheart
Sir. Ale Wallace, intrépido SEO specialist

Pero estoy dispuesto a correr ese riesgo y a sacrificarme, considerándome el Sir Ale Wallace del SEO, como un rebelde contra la idea de que la resolución de una imagen puede afectar al SEO.

Espero que los autores de las webs que publican esas leyendas no se cabreen demasiado, pero creo que en la era del Desorden Informativo hay que luchar contra la «desinformación», la «misinformación» y la «información maliciosa», los tres conceptos que hoy alimentan la difusión de «fakes news» y «burbujas informativas».

Últimamente, he prestado mucha atención a estos tres aspectos del Desorden Informativo y no excluyo volver a hablar de este fenómeno en un próximo post, quizá con más detalles.

Voy al meollo de la cuestión.

He aquí la fatídica pregunta sobre la resolución óptima para web y las clásicas respuestas, en su mayoría erróneas.

 

¿Cuál es la resolución óptima para imágenes web, así que sean optimizadas también para la SEO?

[ Volver arriba ]

¡LAS SIGUIENTES RESPUESTAS NO SON REALMENTE CORRECTAS!
Aunque son muy comunes.

En mi opinión, son las más engañosas:

  1. La mejor resolución para web es 72 dpi (puntos por pulgada) porque las pantallas tienen una resolución de 72 dpi.  Misinformación al 100%!
  1. Para optimizar la resolución de las imágenes para web, esta debe ajustarse o corregirse a 72 dpi. Así se reduce el peso del archivo y se mejora la velocidad de carga.  Yo también casi me lo creo, pero no, ¡esto tampoco es del todo cierto!

Lo que más me jode de toda esta situación es que quienes ingenuamente se preguntan cual sea la mejor resolución para web (y por tanto buscan informaciones y acaben confiando en estas afirmaciones), caerán en una trampa que les llevará a perder mucho tiempo en esta operación de optimizar la resolución de las imágenes para web.

Perdóname que me repita, pero creo que hay que decirlo una y otra vez, claramente: no tiene ningún sentido optimizar la resolución de las imágenes para web.

Y como te mostraré en un momento, puede generar tal confusión que el desafortunado se vuelva loco y se encuentre con una imagen que ya no le sirva para nada, creyendo que ha bajado demasiado la resolución.

O podría entrar en un bucle interminable, pensando, por ejemplo, que Photoshop se está cachondeando de él.

 

¿Por qué optimizar la resolución de las imágenes para web… no es relevante para el SEO?

[ Volver arriba ]

En primer lugar, hay que entender que:

  1. Los dpi (dots per inch), indican la resolución de impresión, que es el número de puntos que la impresora imprimirá en el papel por cada pulgada cuadrada.
  1. La resolución de vídeo se mide en ppi (pixel per inch) o sea píxeles por pulgada, no en dpi. Además, la resolución de las pantallas se define por el número de píxeles distribuidos a lo largo de los dos ejes, horizontal y vertical, no por la concentración de píxeles por pulgada cuadrada.

Y la diferencia entre dpi y ppi es precisamente la clave para entender que la resolución en las imágenes para web no es relevante, no afecta a la nitidez, no mejora el peso en KB y… no hace falta discutir más sobre a este tema.

Pero como con esta declaración ciertamente «acuso» a algunos colegas e indirectamente también a la Inteligencia Artificial de Google, creo que sea mejor seguir con la explicación.

Seguramente, hay que entender que el sistema métrico expresado en centímetros (o para los países anglosajones en pulgadas) respecto al tamaño de una imagen en la pantalla, no tiene ningún sentido.

De hecho, son los píxeles los que determinan las dimensiones en las que se mostrarán los objetos sobre la pantalla.

Luego hay que tener en cuenta que lógicamente los píxeles pueden tener un tamaño diferente en relación con cada dispositivo, en proporción al tamaño de las distintas pantallas. Pero una foto de 400px seguirá siendo una foto de 400px independientemente del dispositivo en el que se muestre, excepto en el caso de las adaptaciones responsivas. Pero ya he hablado de esto en el párrafo sobre las dimensiones de las imágenes en el post anterior.

Por eso la apariencia de la foto en la pantalla cambiará según el tamaño y la resolución en píxeles del dispositivo, y no según la resolución en ppi (o quizás sería mejor decir en dpi) de la foto.

Así que voy al fondo de la cuestión.

Creo que estaremos de acuerdo en que Photoshop sea el software de procesamiento de imágenes más utilizado del mundo.

Y Photoshop, al mostrar las imágenes en la pantalla, lógicamente piensa en píxeles.

Toda esta confusión sobre los dpi o los ppi se basa probablemente en la forma de pensar de Photoshop sobre los ppi, que luego también se pueden traducir en dpi, pero sólo en el momento de imprimir.

Sin embargo, hay que tener cuidado porque Photoshop en sus menús solo indica los píxeles y por tanto los ppi, sin mencionar nunca los dpi.

🥱 😳 🥺 🥴 😵‍💫 🤯

Pongamos que tenemos un archivo de imagen de 1920 px con una resolución de 300 dpi que se va a publicar en una web para que se pueda ver a pantalla completa (en un monitor fullHD).

Según esta leyenda, la resolución debería estar «optimizada» a 72 dpi.

Siento desilusionarte, pero en este caso no tenemos opción: si reducimos la resolución, podemos olvidarnos de usar esa imagen en una web a pantalla completa.

A no ser que quisiéramos utilizar la IA de Photoshop, pero eso es un tema aparte y la tarea seguiría siendo muy difícil y la imagen probablemente sufriría importantes artefactos.

Si, por el contrario, partimos de una imagen de 300 dpi, pero con un tamaño mucho mayor (al menos 4,16 veces, es decir, un mínimo de 8000 px de ancho), tenemos la posibilidad de obtener una imagen que se pueda visualizar a pantalla completa, pero nos arriesgamos a hacer un trabajo inútil.

Debo poner un ejemplo práctico que demuestre cómo el cambio de resolución puede desencadenar un proceso de «optimización» completamente inútil para el SEO.

Abrimos una imagen en Photoshop que tenga un ancho de 1920 px y 300 dpi de resolución.

El ancho de la foto será de 16,26 cm, cuando se imprima en papel.

Screenshot del finder que muestra un fichero de 1920px de ancho y 300 dpi de resolución
Ventana dimensione imagenes de Photoshop que muestra los 1920px y los 300 dpi
Ene sta imagen se muestran las dimensiones en centímetros de 16,26 cm

Según el consejo engañoso bastante común, si vas a la casilla «resolución» de la ventana Imagen > Tamaño de imagen y cambias el valor de 300ppi a 72ppi, creyendo que estás reduciendo o optimizando la resolución de la imagen en pantalla, en realidad no estás optimizando o bajando la resolución pensada como calidad visual de la imagen en pantalla, sino que estás bajando el número de puntos (que desgraciadamente Photoshop expresa en píxeles, y por tanto ppi, en lugar de dpi), en los que esa imagen tendrá que ser impresa en papel manteniendo las mismas dimensiones, es decir, 16,26cm. Y al mismo tiempo estás diciendo a Photoshop que cambie la relación píxel/pulgada de lo que vemos en pantalla y que luego tendrá que ser impresa en papel, manteniendo esa relación en dpi.

Al cambiar la resolución a 72 px cambian las dimensiones en pixeles de la imagen
Al cambiar la resolución a 72 dpi, no cambian las dimensiones en centímetros
Al cambiar la resolución a 72 dpi se reduce el peso en KB

Pero en la pantalla simplemente veremos la imagen en función del número de píxeles, por lo que al bajar la resolución, si antes en una pulgada cabían 300px y ahora sólo 72px, en los 16,26 cm de ancho donde antes cabían 1920px, ahora sólo cabrán 461px.

Y como la unidad de medida de las pantallas está en píxeles, por eso en la pantalla veremos la imagen con sólo 461px, por tanto más pequeña.

Para entenderlo mejor, deberías abrir Photoshop y probar tú mismo a ver qué pasa cuando bajas este valor intentando optimizar la resolución de las imágenes para web:

el valor en la casilla de los píxeles de la anchura y la altura también se reducirán proporcionalmente, ya que las dimensiones expresadas es en número de píxeles.

Pero si antes de cambiar la resolución, cambias la unidad de medida a centímetros, por ejemplo, verás que al cambiar la resolución, en ese caso las dimensiones de ancho y alto expresadas en centímetros no cambiarán.

Porque Photoshop nos está mostrando las dimensiones reales de la imagen impresa sobre papel.

Pero en la propiedad «dimensiones» el valor en píxeles se reducirá proporcionalmente, pasando de los 1920px originales a los 461px de la nueva resolución.

De esto se deduce que, al escribir menos información en el archivo por la disminución de los píxeles, el nuevo archivo será más ligero.

Venga, ¡He reducido el peso del archivo! – pensará el especialista SEO descuidado.

Pero HAY QUE ESTAR CUIDADOS!

 

La trampa de buscar la resolución óptima para imágenes web

[ Volver arriba ]

Aquí se desencadena la trampa en la que caen muchas personas y que inevitablemente les lleva a perder mucho tiempo, más del que ya habían perdido, entrando en la pesadilla de un bucle.

Para entenderlo, tienes que ver los dos resultados obtenidos en esa imagen después de bajar la resolución a 72ppi y hacer clic en OK.

Ese archivo será efectivamente más ligero que el original.

Antes era de 1,6 MB y ahora es de 147 KB.

Pero si imprimes el contenido de ese nuevo archivo, la imagen en papel tendrá el mismo tamaño en centímetros que el original, pero de menor calidad, porque has bajado la resolución de impresión.

Por otro lado, la imagen de ese archivo será más pequeña en píxeles, pero la calidad visual original en pantalla, en términos de nitidez, seguirá siendo la misma. Solo cambiarán las dimensiones.

Volviendo al ejemplo de la imagen original de 1920px a 300 ppi y luego reducida a 461 px dado el cambio a 72 ppi, si tu intención era mostrar esa nueva imagen a pantalla completa, te encontrarás con un efecto muy pixelado, ya que quieres ampliar una imagen que sólo tiene 461px de ancho en un dispositivo de 1920px de resolución.

Captura de mi pantalla mostrando la foto original de 1920 px y 300 dpi
Screenshot de mi pantalla mostrando la foto original, con un ancho de 1920 px y una resolución de 300 dpi.

Captura del fichero de 461 px con efecto pixelado
Screenshot de mi pantalla mostrando el efecto pixelado de la imagen a una resolución de 72 dpi, y 461 px de ancho como resultado.

En ese caso, para mostrar a pantalla completa una imagen de 72ppi que no sea pixelada en un dispositivo de 1920px de ancho, podrás intentar de reajustar el tamaño de los píxeles a 1920. Pero de esta forma, esta imagen también estará pixelada y el archivo tendrá mucho más KB respecto a la imagen de 461 px de ancho, ya que al aumentar los píxeles, sube el número de datos. Así que este proceso será absolutamente inútil para el SEO.

Mientras que el tamaño de la foto impresa se haría enorme, 67,73cm de ancho frente a los 16,26cm originales, y la resolución de impresión sería menor, siempre que se tenga una máquina capaz de imprimir a ese tamaño.

Ajustes sobre la resolución a 72 dpi (o ppi) y también de las dimensiones en pixeles de la imagen, ponendola a 1920 px de ancho
Al ajustar la resolución a 72 dpi el ancho  a 1920 px, las dimensiones en centímetros sube hasta 67,73 cm de ancho
El resultado es una imagen de 1920 px de ancho, con una resolución a 72 dpi y un peso de 853 KB, inutil para el SEO

Esto también se debe a que por defecto, en esa ventana de Photoshop, la función «Remuestreo» (Resample) está marcada y ajustada en Automático.

Y también porque, como he dicho antes, en la web se utilizan los píxeles para mapear las pantallas, es decir, los puntos que deben tomar una determinada tonalidad dentro de una pantalla.

De hecho, cuando compramos una pantalla con una línea horizontal igual a 1920 píxeles, no estamos eligiendo el tamaño de la pantalla en sí, sino la resolución.

Si la imagen de partida a 300 dpi fuera mucho más grande, como 8500 px, podríamos bajar la resolución a 72 dpi y ajustar los píxeles de ancho a 1920, para no perder calidad en la visualización a pantalla completa.

Pero una imagen de 1920px, tanto si se guarda a 300 ppi como a 72 ppi en Photoshop, siempre ocupará 1920px en la pantalla, por lo que se verá a pantalla completa. Lo que cambiará es la proporción de puntos en el papel y, por tanto, además de la resolución, también cambiará el tamaño de la impresión.

Y sobre todo el archivo pesará mucho (en el ejemplo 1,6 MB), y en este caso también será inútil para el SEO.

 

Mi sugerencia, sin duda mucho más útil.

[ Volver arriba ]

Una vez entendido que para optimizar las imágenes para la web no hay que perder el tiempo en ajustar la resolución (que, repito una vez más, es un aspecto que sólo afecta a la impresión en papel), quiero proponerte una sugerencia mucho más útil y efectiva para nuestro propósito, que ya había mencionado en el primer post de esta trilogía.

Comprueba si el software que utilizas para el tratamiento de imágenes tiene un acceso directo a «Guardar para la web» o «Exportar para la web» o algo similar.

Photoshop lo tiene, y puedes encontrarlo en el menu Archivo>Exportar>Guardar para Web (versión antigua) o escribiendo el atajo de teclado ⌥⇧⌘S en un Mac.

Como encontrar el menu Guardar para web en Photoshop

Así que, si tu programa lo tiene, utiliza esa función para optimizar tus fotos de forma que se compriman para la web, estableciendo el tamaño máximo en píxeles al que crees que se mostrará tu imagen y encontrando el equilibrio que más te satisfaga entre la máxima compresión posible y una calidad visual aceptable de la imagen cuando se vea a tamaño completo (siempre en píxeles).

Para publicar la imagen a pantalla completa mejor elegir los 1920 px de ancho.

Ejemplo de ajustes en la ventana de Photoshop para optimizar la compresión para web

Dependiendo del nivel de compresión que establezca, el archivo resultante tendrá un peso muy reducido en KB en comparación con el original, que es el propósito de la optimización web.

Además, se eliminarán todos los datos que suelen ser irrelevantes para la web, como la fecha y la hora en que se tomó la foto, los ajustes de la cámara, etc.

Cuanto menos datos haya en el archivo, más ligero será.

¿Y mira lo que pasa cuando inspeccionas el archivo en el finder de mac?

Datos del Archivo original de 8500 px de ancho, 300 dpi de resolución y 14,8 MB de peso
Archivo original de 8500 px de ancho, 300 dpi de resolución y 14,8 MB de peso
Datos del archivo guardado por web y el cuadro de información de la resolución ha desaparecido, porque es irrelevante para web
Resultado al guardar el archivo para la web con ancho de 1920 px y una compresión JPEG media (calidad 30). El archivo ahora pesa sólo 251 KB y el cuadro de información de la resolución ha desaparecido, porque es irrelevante para web

¡Por supuesto!

Porque como te he dicho todo el tiempo, ¡la resolución en las imágenes para la web es irrelevante!

Y la imagen producida será, casi con toda seguridad, de una resolución de 72 dpi.

🤔

¿Me estás tomando el pelo, Ale?

¡No dejas de repetir que la resolución no tiene nada que ver con la optimización!

De hecho lo confirmo.

Pero es bueno saber que utilizando esa función el software casi seguro que reducirá automáticamente la resolución a 72 dpi, pero no porque sea la mejor para la web, sino sólo como resultado de la estandarización y, en cierto sentido, por una especie de … NOSTALGIA.

Sí, porque…

 

Al principio había 72ppi

[ Volver arriba ]

En los albores de las gráficas computarizadas tal y como las conocemos hoy, la legendaria Apple revolucionó el acercamiento entre el procesamiento digital y el producto impreso, gracias a los 72 ppi.

Tenemos que retroceder en el tiempo hasta 1984, cuando Apple lanzó el primer Macintosh, cuya pantalla se diseñó y fabricó de forma coherente con la unidad de medida tipográfica, que era de 72 puntos por pulgada.

Aquí están, los protagonistas de toda esta telenovela creada sobre la resolución óptima para imágenes web: los famosos 72dpi.

Apple fue la primera en reproducir en pantalla lo que más tarde se imprimiría efectivamente (o casi) en papel.

Puede parecer una tontería ahora, pero con esa idea Apple definió la longitud de sus pulgadas de pantalla (logical inches) como 72 píxeles, lanzando por primera vez el revolucionario concepto de wysiwyg (what you see is what you get / lo que ves es lo que tienes).

Gracias a este nuevo concepto, los diseñadores gráficos (público objetivo estratégico de Apple en 1984) podían mostrar el texto en la pantalla en tamaño «real», es decir, una fuente de 12 puntos en una hoja de papel tenía el mismo tamaño que el texto en el monitor, es decir, 12px.

De este modo, existía una correspondencia bidireccional entre el píxel y el punto tipográfico, con evidentes ventajas visuales y operativas, sobre todo porque en aquella época la pantalla mostraba casi exclusivamente texto.

Además, el único objetivo del procesamiento de gráficos mediante un ordenador estuvo durante varios años dirigido exclusivamente a la impresión.

Luego, la combinación Macintosh-Pagemaker dio lugar al nacimiento de la autoedición, que también dio lugar… al lugar común de «si trabajas con gráficos, tienes que tener un Mac», y a la inversa, «si usas un ordenador con Windows, no eres un verdadero diseñador gráfico», etc.

Admito que prefiero usar el Mac, pero ahora el mio es más bien un gusto por la estabilidad y la funcionalidad del sistema operativo.

Por otro lado, hay que tener en cuenta que Internet en los años Ochenta era todavía una «simple» red de telecomunicaciones que sólo servía para intercambiar correos electrónicos, entre unos mil ordenadores, la mayoría pertenecientes a centros de investigación repartidos por todo el mundo.

El protocolo HTTP y el lenguaje HTML nacieron en 1990, y la World Wide Web no se anunció en Europa hasta 1991.

Pero a partir de 1984, el concepto de que la mejor resolución de pantalla era de 72 píxeles (o puntos) se extendió como un reguero de pólvora y se convirtió en una obligación. Y ese concepto tenía mucho sentido en su momento, ya que la resolución de 72 ppi de las pantallas de Apple equivalía a 72 dpi en papel.

Pero con el paso de los años, la evolución tecnológica permitió fabricar pantallas con más «rendimiento», es decir, con más píxeles para el mismo tamaño en pulgadas.

Así que con una mayor capacidad de detalle, en términos de píxeles.

Y esta proporción de 72 píxeles por pulgada desapareció, pero quedó grabada en la mente de muchos, dando lugar a la leyenda urbana que la resolución óptima para imágenes web es de 72 dpi.

Si quieres saber más sobre la historia de Logical Inches, te sugiero que leas este interesantísimo scantips.

Bien, soy consciente de que el tema de este post, que al principio podía parecer trivial, luego con todas las evoluciones del ajuste de la resolución y los cambios en el tamaño de las imágenes impresas en papel, puede haber sido extremadamente «aburrido» o quizás demasiado técnico para seguirlo.

Pero ese es exactamente el punto.

Optimizar la resolución de las imágenes para web es un proceso inútil, algo difícil de entender para quienes no tienen paciencia «técnica».

Y sé que la respuesta que la de 72 dpi sea la mejor resolución para web podría haber parecido más sencilla y sobre todo concreta.

Pero si has tenido la constancia de seguirme hasta aquí, también habrás comprendido que es precisamente la pregunta que en cierto sentido… no tiene ningún sentido.

😱

Así que si quieres optimizar tus imágenes para la web, no te fijes en la resolución en dpi, y mucho menos en ppi.

En todo caso, sigue todas las indicaciones que ya te he dado en el primer post, y sobre todo presta mucha atención al aspecto que puede ser realmente decisivo: los distintos tipos de compresión que el propio Photoshop te permite elegir a través de la función «Guardar para web».

En el tercer post de esta miniserie sobre la optimización de imágenes para el SEO voy a tratar el tema del TIPOS DE COMPRESIÓN.

Mientras tanto, me gustaría darte las gracias ya que eres de los más fuertes que me han seguido hasta el final.

¡Y te deseo un buen ahorro de tiempo precioso!

Hasta la optimización… ¡Siempre!

Deja un comentario

Tu dirección de correo electrónico no será publicada.