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.
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.
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.
Gracias por tus útiles tips!! Buen trabajo!
Gracias a ti por tu comentario 🙂
¡Un saludo!
Andaba buscando la confirmación exactamente de estos datos, gracias!!!
Buen trabajo, bien escrito y claro, muy útil 😉
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!
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!
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.
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
¡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!
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
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.
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.
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.
Gracias Nahuai, me parece q ya lo voy entendiendo.
¡Me alegro Sandra!
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
¡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.
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!
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.
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.
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.
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í?
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.
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!
¡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.
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.
Me alegro, Willie.
Un saludo.
gracias por este articulo, me fue de gran ayuda
Me alegro, Luisa. 🙂
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.
Muchas gracias, muy generoso, uso imágenes para mis blog, no soy profesional, apenas si las fotos no me salen movidas. 👍
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.
Yo tengo una duda, ¿por qué 1024px de ancho y no 1080px como en las redes sociales?
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.
y que recomendarías para una plataforma web que llevara el control del inventario de un restaurante con las imágenes de sus productos?
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.
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?
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.
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!
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.
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
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.
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
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.