¿Cuál es el peso ideal de una fotografía para la web?

Si yo te digo:

Si quieres mejorar el SEO de tus fotografías para que posicionen en los primeros resultados de búsqueda en Google, necesitas optimizar sus dimensiones para la web.

Me juego lo que quieras a que éstas son las primeras preguntas que aparecen en tu cabeza:

¿Por qué?

¿Y cuál es ese tamaño ideal?

Aquí tienes tus respuestas:

¿Por qué?

Como fotógrafo profesional:

  • Tienes una cámara de calidad, que te aporta resolución suficiente para imprimir cada captura que realizas.
  • Trabajas sobre ficheros RAW.
  • Acabas con un JPG final a resolución completa, listo para su impresión. A veces su peso supera los 10MB.

Como negocio online:

  • Cada página de tu web debe tener una velocidad de carga rápida.
    Esto te ayudará a posicionar en Google y mejorará la experiencia de usuario. Además, no todo el mundo tiene una buena conexión a internet. Con cada segundo extra que tarde en cargar tu web, más clientes potenciales perderás.
  • Las imágenes no están destinadas a imprimirse…
  • aunque necesitas que se visualicen correctamente, sin “píxelarse”, haciendo así justicia a tu esfuerzo y trabajo.

Conclusión:

No puedes cargar tus fotografías, tal cual están, en la web.

¿Convencido? Bien, pues vamos con la segunda pregunta.

¿Cuál es el tamaño ideal?

El reto es encontrar el equilibrio entre la calidad de la imagen y su peso.

Es decir, debes reducir la dimensión del fichero original pero conservar un mínimo de calidad.

Simplificando, los parámetros ideales de una página web son:

  • Tamaño total de la página: < 1MB
  • Tiempo de carga: < 3 segundos

Hay muchas otras variables a tener en cuenta. Sin embargo, si tu web cumple estos requisitos, vas por buen camino.

Entonces, ¿cómo ‘adelgazar’ de forma ‘saludable’ una foto para la web?

  • Redimensiona.
  • Comprime.

Y ahora, ¡a ponerlo en práctica!

Redimensionar una imagen

La resolución de las pantallas es el factor determinante para elegir la dimensión de tus fotografías.

Hasta hace muy poco, las imágenes se escalaban para que tuvieran 1024px de ancho. Pero la resolución de las pantallas ha ido incrementando durante los últimos años.

Como puedes ver en el gráfico, la resolución 1378×768 sigue siendo la preferida, aunque los monitores Full HD (1920x1080px) son cada vez más habituales.

Resolución pantallas 2016

Atendiendo a estos datos:

  • El máximo de ancho que te recomiendo es de 2048px.
    Ésta medida es perfecta si quieres que tus fotografías ocupen toda la pantalla. Sin embargo, no todas necesitan tener esta dimensión.
  • 1024px sigue siendo una medida muy interesante para imágenes que no vayan a estar ampliadas por completo.
    La ventaja de este tamaño es que ofrece una buena calidad con un peso de fichero reducido.

Tampoco pierdas de vista que:

La navegación móvil, en dispositivos de menor resolución, conforma más del 50% del total del tráfico en internet.

Conclusión:

¿Tienes fotografías de 16Mpx o 24Mpx (4000 o 5000 píxeles de ancho)?

Ya sabes lo que tienes que hacer para colgarlas en tu web.

¡A redimensionar! Máximo 2048px, mejor 1024px.

Comprimir una imagen

El grado exacto de compresión depende de cada fotografía.

¿Ya está?

¡Tranquilo!, no lo voy a dejar ahí.

Existen multitud de factores a tener en cuenta para dar con el número de compresión exacto.

Calcular este valor es complicado, pero imprescindible para un fotógrafo profesional. Así que, en el próximo artículo, te explicaré con todo lujo de detalles lo que debes saber sobre compresión de fotografías.

Por lo tanto, ¡permanece atento a la web! Te lo aseguro, esto te interesa. Si lo prefieres, apúntate a la newsletter y yo mismo te avisaré cuando publique la guía definitiva para aprender a comprimir tus imágenes.

Para que hoy no te vayas sin nada, aquí va un consejo muy general:

Cuando exportas en JPG desde programas como Photoshop y Lightroom, te recomiendo elegir una calidad final del 60-80%, es decir, una compresión del 20-40%.

El contexto

O lo que es lo mismo,

¿Dónde vas a colocar tu imagen?

  • Si vas a utilizar una fotografía a pantalla completa en tu página de inicio, asegúrate de que tenga un tamaño suficiente para que se vea bien en cualquier pantalla.
    Por ejemplo, si la página no tiene grandes elementos adiciones, la imagen puede pesar hasta 400KB. De esta forma, conseguirás mantener el total por debajo de 1MB.
  • Cuando tu objetivo es mostrar muchas fotografías en una misma página, necesitarás reducir bastante su peso.
    Recuerda, el total no debe superar 1MB.
  • Es más, si vas a mostrar las fotografías en una entrada de blog con 800px de anchura, escalarlas a esa dimensión será suficiente.

Conclusión

Tus problemas:

No puedes subir a tu web una fotografía original, ya que tardaría demasiado en cargar.

Pero tampoco te puedes pasar con la compresión, si quieres evitar una mala resolución en tu imagen.

Solución: Encuentra el equilibrio

En términos generales, el peso ideal de tus fotografías está por debajo de los 200KB.

Cómo conseguirlo:

Redimensiona tus fotografías a un máximo 2048px de ancho (o 1024px).

Comprime la imagen, conservando un 60-80% de calidad.

Ajustes Lightroom exportar fotografía

Por supuesto, éstos son parámetros orientativos.

Dependiendo de la situación, es posible que necesites una mayor resolución. O quizás te veas forzado a incrementar el peso para que la foto se vea con el detalle que deseas. Sea como sea, trata de no alejarte demasiado de los valores recomendados aquí.

¿Quieres conocer las mejores técnicas para poner en práctica estos consejos?

Estás de suerte.

Te he preparado una guía con todos los trucos y herramientas para que tus fotografías enamoren a Google.

¡Quiero la guía!

 

GuardarGuardar

GuardarGuardar

GuardarGuardar

GuardarGuardar


44 respuestas a «¿Cuál es el peso ideal de una fotografía para la web?»

  1. Avatar de sonie68
    sonie68

    Gracias por tus útiles tips!! Buen trabajo!

    1. Avatar de Nahuai
      Nahuai

      Gracias a ti por tu comentario 🙂

      ¡Un saludo!

  2. Avatar de Álvaro Valdecantos

    Andaba buscando la confirmación exactamente de estos datos, gracias!!!

    Buen trabajo, bien escrito y claro, muy útil 😉

    1. Avatar de Nahuai
      Nahuai

      Hola Álvaro,

      me alegro mucho de que te reolviera tus dudas. Gracias por tus palabras 🙂

      Por cierto, he echado un ojo a tu portfolio y me ha encantado, mi más sincera enhorabuena.

      ¡Un saludo!

  3. Avatar de Andrea

    Genial. Por fin encuentro un artículo que lo aclare bastante bien. Para los fotógrafos profesionales es un dilema encontrar el artículo. Recientemente he tenido que verme forzada a bajar estos valores para que no me afecte al SEO, será que soy muy crítica porque es mi trabajo y me está costando bajarle los pixels por pulgada y la calidad. Esperemos encontrar el equilibrio, como todo en la vida

    Muchas gracias!

    1. Avatar de Nahuai
      Nahuai

      Hola Andrea,

      Me alegro un montón de que te haya resultado útil el artículo.
      La verdad es que no como artista no es fácil renunciar a esos píxeles porque quieres que tu obra se vea en todo su esplendor. Lo entiendo perfectamente.

      Pero como bien dices, hay que encontrar el equilibrio. En este caso entre que luzca bien y no tarde demasiado en cargar la página.

      Por cierto, tienes una web y unas fotografías muy chulas, ¡enhorabuena!
      Un saludo.

  4. Avatar de Luis Gago

    Estupendo Nahuai,

    creo que nadie ha hablado antes del peso y compresión ideales para mostrar una foto en una web, seguro que mucha gente lo encuentra utilísimo.

    Hala, a poner nuestras webs «a régimen» a ver si adelgazan 🙂

    ¡Un abrazo!

    Luis

    1. Avatar de Nahuai
      Nahuai

      ¡Hola Luis!

      Esa es la idea, orientar a la gente de cuales son los parámetros adecuados para que a le web no se le «indigesten» las fotos 🙂
      Así que antes de subirlas hay que adelgazarlas, jeje.

      ¡Un abrazo!

  5. Avatar de Pablo

    Muchísimas gracias por el artículo. Estoy intentando bajar la resolución de las imágenes sin que afecte demasiado a la calidad y como dice otra compañera en un comentario anterior, resulta complicado y ‘doloroso’ porque el trabajo se ve afectado y no muestras lo que realmente puedes llegar a hacer.
    Un saludo,
    Pablo

    1. Avatar de Nahuai
      Nahuai

      Hola Pablo,

      efectivamente, no es fácil llegar a ese equilibrio, por eso tengo varios posts dedicados a ello. Para los fotógrafos podáis mostrar las imágenes con suficiente calidad, pero sin que penalice mucho el tiempo de carga de la web.

      Muchas gracias por tu comentario.
      Un saludo.

  6. Avatar de Sandra Alvarez
    Sandra Alvarez

    Hola, buen día,
    Me han pedido una pagina web, no quieren gastarse ni un euro en publicarlo entonces para eso me descargué una plantilla pato-place colorlib gratuita, que está muy bien, estoy haciéndole los cambios usando dreamweaver, y ajustando las fotos con photoschop, y de pronto me han saltado varias dudas porque la plantilla creo q pesa 32mb, estuve mirando para saber cuanto pesa y no he dado con la respuesta.
    mi duda mas grande es: la página tiene que pesar menos de 1 mb pero creo q no hay ninguna plantilla q pese tan poco, la verdad es q soy novata en pág. web y no me estoy enterando, si solo las 12 fotos q me han pasado ya pesan 2mb, es lo q m pone cuando puse el cursor enima de la carpeta y me adelanta información, lo mismo hice con la carpeta q contiene la plantilla.
    Perdón por enrollarme tanto.
    Un saludo y gracias.
    Sandra.

    1. Avatar de Nahuai
      Nahuai

      Hola Sandra,

      te recomiendo que utilices una herramienta como https://tools.pingdom.com para que veas cuanto pesa la página. En mi caso la home pesa menos de 450KB.

      En la parte de abajo del análisis te mostrará cuanto pesa cada elemento de la página y cuanto tarda en cargar.

      Para optimizar el tamaño de las fotografías te recomiendo que te descargues la guía gratuita donde explico todos los trucos https://nbadiola.com/guia-optimizar-fotografias/.

      Espero que te sirva de ayuda.
      Un saludo.

      1. Avatar de Sandra
        Sandra

        Gracias Nahuai, me parece q ya lo voy entendiendo.

        1. Avatar de Nahuai
          Nahuai

          ¡Me alegro Sandra!

          1. Avatar de Rossana
            Rossana

            Tengo que preparar mis fotos para mi blog de la web, Instagram y Facebook y quisiera un tamaño que me valga para, las 3,y no trabajar demás. Espero me ayude la guía

          2. Avatar de Nahuai
            Nahuai

            ¡Buenas, Rossana!

            Seguro que con ayuda de la guía consigues lo que buscas.
            La parte más delicada es la de optimizarlo correctamente para tu web, ya que el resto de plataformas (Facebook, Instagram…) no te permiten elegir el grado de compresión, y por lo tanto el resultado final.

            En cambio en tu web tú tienes la posibilidad de ajustarla como quieras.

            Un saludo.

  7. Avatar de isabel

    Hola Nahuai!!
    mil gracias por tu post, es el único que he visto que va al grano y da medidas concretas!!
    Tengo la misma duda que sandra.
    La cosa es que estoy desarrollando una web de un fotógrafo y tiene series de fotos.
    Cada serie son 10 fotos y pesa 200k cada una.
    200k x 10= 2000 (2M), entonces ya me he pasado muchísimo no? y sólo es una serie!! D=
    Las fotos pasan de una en una, entonces no sé si te refieres a que lo que tiene que pesar menos de 1M es el material de la ventana que está viendo el usuario en ese momento, o te refieres al total de archivos?
    gracias!

    1. Avatar de Nahuai
      Nahuai

      Hola Isabel,

      Gracias por tus palabras, me alegro de que el post te resulte útil.

      Respecto a tu duda, 2MB sería un peso más que aceptable para una página con tantas fotos. Con un buen hosting, no debería tardar mucho en cargar.
      1MB es un valor ideal, pero no es plausible si hay muchas imágenes.

      En estos casos, lo más indicado es combinar una buena optimización (tamaño/resolución) con un lo que se denomina «lazy load». Con esto consigues que no se carguen todas las fotografías de golpe. Sino que se vayan cargando según el usuario hace scroll.

      Algunas galerías como Meow Gallery Pro incluyen esta característica. Sino puedes instalar el plugin Lazy Load del repositorio de WordPress.

      Espero que te sirva de ayuda.

      Un saludo.

  8. Avatar de Lili
    Lili

    Muy buen artículos, gracias por toda la info. Te quería pregunar si hay algún programa online donde pueda redimensionar y limtar el tamaño de mi imagen. Te agradecría mucho esa información.

    1. Avatar de Nahuai
      Nahuai

      Hola Lili,

      Gracias por tus palabras.

      Puedes echar un ojo al artículo en el que hablo de las herramientas para optimizar imágenes para la web.

      Varios de ellos son online, como Kraken.io y te permiten redimensionar las imágenes.

      Un saludo.

  9. Avatar de Angélica
    Angélica

    Hola! Que interesante post. Gracias por compartir tus conocimientos. En la imagen donde esta un cuadro que dice>> Cambiar tamaño de imagen > redimensionar para encajar 1024 pixeles.
    Eso a que se refiere? El tamaño de la imagen? no seria por ejemplo 1024 x ? algo así?

    1. Avatar de Nahuai
      Nahuai

      Hola, Angélica.

      Me alegro de que te resulte de utilidad.
      Cuando hablo de redimensionar a 1024px (o 2048px) me refiero siempre a la anchura de la imagen. Ya que en este caso es la más importante.

      Espero que ahora se entienda mejor 🙂

      Un saludo.

  10. Avatar de Jose

    Muy buen post, gracias por la informacion a veces no optimizamos las fotos para una carga rapida y como bien dices, un tiempo de carga malo nos hace perder clientes, saludos!

    1. Avatar de Nahuai
      Nahuai

      ¡Muchas gracias, Jose!

      Me alegro de que te haya resultado de utilidad.
      Sí, encontrar el equilibrio entre la calidad y el peso de las fotografías en la web es clave.

      Un saludo.

  11. Avatar de Willie Roman

    Muchas gracias! Estube probando muchas cosas pero poniendo estas medidas con la calidad a tope la foto pesa muchísimo menos y la calidad no se pierde para el tamaño al que se puede ver.

    1. Avatar de Nahuai
      Nahuai

      Me alegro, Willie.

      Un saludo.

  12. Avatar de Luisa M
    Luisa M

    gracias por este articulo, me fue de gran ayuda

    1. Avatar de Nahuai
      Nahuai

      Me alegro, Luisa. 🙂

  13. Avatar de Aplicaciones Informaticas
    Aplicaciones Informaticas

    Gracias por el post, es un completo quebradero de cabeza normalmente el tema del peso de las imágenes. Y ahora con los nuevos formatos de imagen webp pues más cosas aún que te solicita Google.

  14. Avatar de Gabriela
    Gabriela

    Muchas gracias, muy generoso, uso imágenes para mis blog, no soy profesional, apenas si las fotos no me salen movidas. 👍

    1. Avatar de Nahuai
      Nahuai

      Me alegro de que te resulte de ayuda, Gabriela.

      Te animo a que sigas sacando fotos, es la mejor manera de continuar mejorando. 😉

      Un saludo.

  15. Avatar de Fany
    Fany

    Yo tengo una duda, ¿por qué 1024px de ancho y no 1080px como en las redes sociales?

    1. Avatar de Nahuai
      Nahuai

      Buenas, Fany.

      Es una medida aproximada, ya que lo optimo es usar solo el ancho necesario dependiendo de la parte de la web donde se muestra.
      Pero 1080px es igualmente válido.

      Un saludo.

  16. Avatar de Cecil
    Cecil

    y que recomendarías para una plataforma web que llevara el control del inventario de un restaurante con las imágenes de sus productos?

    1. Avatar de Nahuai
      Nahuai

      Hola, Cecil.

      Pues depende de dónde se vayan a mostrar (o no) las imágenes.
      Si el inventario es solo interno y no lo va a ver el cliente final puedes incluso reducir un poco el tamaño para hacerlas más ligeras.

      Un saludo.

  17. Avatar de Jorge Iñiguez
    Jorge Iñiguez

    En relación a las dimensiones de la fotografía y su peso, se puede decir que el peso bajo que han descrito aqui, 200kb pero sin modificar las dimensiones de pixeles, aún funcionaría para agilizar la visualización de sitios web?

    1. Avatar de Nahuai
      Nahuai

      Buenas, Jorge.

      Es importante que la fotografía tenga las dimensiones en las que se va a mostrar.
      Si es más grande es mejor redimensionarla, así pesará menos.
      De hecho, muchos test de velocidad, como el de Google, penalizan que se usen imágenes de mayor tamaño al que se muestran.

      Un saludo.

  18. Avatar de Elena
    Elena

    Hola! Post muy interesante 🙂

    Y si quiero poner un video en la portada de la Home de mi Web, para que al entrar se activara automáticamente…y fuera un bucle ¿Cuánto debería ser la duración ideal, el tamaño y el peso?

    Gracias!

    1. Avatar de Nahuai
      Nahuai

      Buenas, Elena.

      Muy buena pregunta. 🙂

      A mí me gusta trabajar con el concepto de tener un «presupuesto» por página (URL).
      Intentaría que estuviera los más cercano a 1MB (o menos) y nunca más de 3MB.

      Por eso, ese tipo de vídeos hay que valorar si realmente aportan tanto al mensaje que quieres trasmitir. Si no es imprescindible es mejor usar otros recursos.

      Un saludo.

  19. Avatar de Ramón
    Ramón

    Hola Nahuai. Aparte de fotografía comercial me dedico a la fotografía de exposición. Solicité una web aclarando que las imágenes debían tener la máxima calidad posible, teniendo en cuenta la optimización . El diseñador me dijo que no habría problema en cargar 300 fotos aproximadamente a 1920*1080 y 300 px .

    Se finaliza la web , las fotos de las secciones se abren como en una cascada que parece una carta de ajuste , hasta que quedan todas abiertas , en un tiempo de 5 segundos aproximadamente . Se le comenta al diseñador por 10 veces y sigue sin resolver el problema .Hablo con conocidos y expertos y me dicen que cargar 300 imágenes a full Hd con 300 px por imagen no se debe hacer .¿ Que tamaño de ancho- largo y cuantos px recomiendas tu teniendo en cuenta que esto es presentado a curadores , comisarios y visitadores… ? un saludo y gracias

    1. Avatar de Nahuai
      Nahuai

      Buenas, Ramón.

      El tamaño podría intentar reducirlo un poco más para que quede más cercano a los 200KB, pero sobre todo lo importante cuando hay tanta cantidad de imágenes es que se carguen de forma diferida (lazy-loading). Es decir, que la imagen no se carga hasta que el usuario haga scroll hasta la misma.

      Un saludo.

  20. Avatar de Alexander Schermer
    Alexander Schermer

    Muy buen articulo, Gracias por compartir. Ahora va la pregunta jaja. Para cargar fotos en google drive para un cliente que tamaño/peso recomiendas? Obviamente lo mas ligero posible pero que se puedan visualizar bien? Saludos Alexander

    1. Avatar de Nahuai
      Nahuai

      Buenas, Alexander.

      Yo creo que te puedes guiar por los mismos parámetros que comento en el artículo. Raro será que necesites que tengan más de 2000px de ancho.

      Un saludo.

  21. Avatar de Nuria
    Nuria

    Muchas gracias por el artículo. Ahora a ponerlo en práctica.

Deja una respuesta

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

  Acepto la política de privacidad.