Tamaño correcto de sus fotos para la Web

Muchos de nosotros publicamos nuestras fotos en la web, y a menudo surge la pregunta de qué tamaño se deben usar fotos. Si publica imágenes con tamaños de archivo que son demasiado grandes, atascará su sitio web y hará que los usuarios (y los motores de búsqueda) no estén contentos. Al mismo tiempo, desea que sus fotos se vean lo mejor posible.

Tengo buenas noticias:la respuesta es bastante simple. Sin embargo, dependerá de dónde cargue sus fotos. Muy a menudo, no necesitará cambiar su tamaño en absoluto, y cuando lo haga, el proceso es fácil. En este artículo, te mostraré lo que necesitas saber sobre cómo cambiar el tamaño de tus fotos y, para aquellas ocasiones en las que necesites cambiar el tamaño, te mostraré cómo hacerlo en Photoshop y Lightroom.

Subir a una galería web

Si está publicando sus fotos en una galería web ofrecida por un servicio como SmugMug, SquareSpace o incluso Flickr, no necesita preocuparse por cambiar el tamaño de sus fotos. El servicio cambiará el tamaño de las fotos por ti. Simplemente cargue los archivos JPEG más grandes que tenga en el sitio web. El servicio cambiará su tamaño por usted e incluso creará fotos de diferentes tamaños para usar como imágenes en miniatura y para usar en dispositivos móviles.

Lo mismo ocurre con los sitios de redes sociales como Facebook e Instagram. Cambiarán el tamaño de la foto reduciéndola en gran medida (a menudo mucho más de lo que le gustaría). Simplemente cargue archivos JPEG de tamaño completo y todo estará bien.

Si estás subiendo a uno de estos servicios, lo cual recomiendo hacer, nunca tendrás que pensar en cambiar el tamaño de tus fotos para la web. Personalmente subí mis fotos a SmugMug durante años y ni siquiera pensé en cambiar el tamaño de mis fotos. No tuve que hacerlo hasta que comencé a usar WordPress para este sitio web.

Subir a su propio sitio web

Si está creando su propio sitio web, incluido el uso de una plataforma de blogs como WordPress, deberá cambiar el tamaño de sus fotos. Los tamaños de archivo de los archivos JPEG que salen de su cámara (sin importar qué cámara esté usando) serán demasiado grandes y atascarán su sitio web.

¿Qué tan pequeño debe hacer los archivos para su sitio web? Probablemente mucho más pequeño de lo que piensas. Hay dos variables que controlas (y te mostraré cómo controlarlas más adelante en este artículo):

• el tamaño, medido en píxeles; y
• la calidad, medida como porcentaje.

Primero le mostraré cómo determinar el tamaño y la calidad adecuados de la imagen, luego le mostraré cómo configurar ellos.

1. Tamaño

Para determinar el tamaño adecuado de su imagen, lo primero que debe hacer es determinar el ancho del área de contenido de su sitio web. Esto puede requerir un poco de excavación de su parte, ya que diferentes sitios tienen diferentes anchos. Por ejemplo, en este sitio web, mi área de contenido principal para artículos tiene 1024 píxeles de ancho. Por lo tanto, no tiene sentido tener imágenes más anchas que eso. Así que inmediatamente sé que debo reducir todas las imágenes a no más de 1024 píxeles de ancho.

Otros sitios web usarán áreas de contenido más pequeñas, generalmente porque incluyen barras laterales y otras áreas de contenido. Por ejemplo, escribo para Digital Photography School y su área de contenido principal tiene 750 píxeles de ancho (hasta hace poco, solo tenía 600 píxeles de ancho). Por lo tanto, DPS no utiliza imágenes de más de 750 píxeles de ancho.

Recuerda que estos son máximos. Es posible que desee que su imagen sea más pequeña que el área de contenido real. En ese caso, solo decida qué porcentaje de su área de contenido desea que llene la imagen, luego configure el tamaño según el porcentaje de esa área de contenido.

2. Calidad

Una vez que decidas qué tamaño quieres que tenga la imagen, podrás controlar la calidad. configuración, que determinará aún más el tamaño de la imagen. Reducir el porcentaje de calidad reduce el tamaño del archivo, lo cual es bueno. Los efectos de las reducciones leves a moderadas en la calidad no se notan.

Además, una reducción en el porcentaje de calidad dará como resultado una mayor reducción porcentual en el tamaño del archivo. En otras palabras, disminuir el porcentaje de calidad en un 5 % (digamos, del 100 % al 95 %) resultará en una reducción de mucho más del 5 % en el tamaño del archivo. Cada reducción del 5 % en la calidad reduce el tamaño del archivo en aproximadamente un 15 %, aunque esta reducción disminuye cuanto más se reduce la calidad.

¿Cuánto deberías disminuir el porcentaje de calidad de tus imágenes? Aquí no hay una regla establecida, solo tienes que usar tu propio juicio.

Como guía para usted, la gente de Digital Photography School, que sabe un par de cosas sobre cómo cambiar el tamaño de las fotos, solo permite fotos en su sitio web de hasta 200 kilobytes (KB). Incluso después de reducir el tamaño de la imagen a 750 píxeles en su lado largo (su tamaño máximo), a menudo tengo que reducir la calidad de la imagen entre un 70 y un 90 % para que el tamaño del archivo sea inferior a 200 KB.

Soy más indulgente en mi propio sitio web porque no tengo el volumen de imágenes (o tráfico) que tiene DPS, ¿permito que mis imágenes sean un poco más grandes? Aún así, trato de mantenerlos en alrededor de 200 KB y nunca dejo que superen los 450 KB. Encuentro que mis páginas todavía se abren bastante rápido de esa manera.

Una vez más, no existe una regla estricta y rápida con porcentajes de calidad. Tendré algunos ejemplos a continuación que le darán una idea de cómo se verían sus archivos después de haberlos reducido. Creo que se sorprenderá de la poca diferencia que ve en los archivos reducidos.

3. Tamaño de archivo

El punto principal a recordar es que las fotos que publicas en la web deben medirse en kilobytes. (KB) y no megabytes (MB) cuando se publican en la web. El archivo RAW típico que sale de mi cámara es de aproximadamente 24 MB, e incluso cuando convierto el archivo a JPEG, sigue siendo rutinariamente de 7 a 10 MB. Así es manera demasiado grande para un archivo web. No te hace ningún bien y atasca tu sistema.

Ejemplos

Como ejemplo de lo que estoy hablando en esta página, a continuación se muestran algunas versiones diferentes de la misma imagen.

Grande frente a extragrande

Primero, como punto de partida, la parte superior de esta página es una foto que tomé recientemente en el Área Natural Estatal Torre Pines en California. Cambié el tamaño de la imagen para que se ajuste al área de contenido de este sitio web, que tiene 1024 píxeles de ancho. Además, también reduje la configuración de calidad al 80%. Eso resultó en un tamaño de archivo de 450 kilobytes.

A modo de comparación, también he publicado la misma imagen a continuación, pero el doble de grande. Esta imagen tiene 2048 píxeles de ancho y mantuve la configuración de calidad al 100%. Eso resultó en un archivo de 3.8 MB, que es aproximadamente 8 veces más grande que la imagen en la parte superior de la pantalla.

Echa un vistazo a ambas imágenes. (Sé que no están uno al lado del otro, pero tendré un ejemplo a continuación). ¿Puedes notar mucha diferencia entre la imagen de abajo y la que está en la parte superior de la pantalla? Supongo que no puedes.

El aumento de tamaño en píxeles obviamente no hace nada por ti. El ancho de la pantalla es de solo 1024 píxeles, por lo que tener la imagen más ancha no sirve de nada. El aumento del porcentaje tampoco ayuda. Como demostración adicional de eso, veamos la misma imagen con diferentes configuraciones de calidad.

Distintas configuraciones de calidad

Ahora veamos otro ejemplo, esta vez usando imágenes que están una al lado de la otra. Las 4 imágenes a continuación son exactamente del mismo tamaño, pero de calidad muy diferente. Específicamente, cada una de las siguientes imágenes tiene 512 píxeles de ancho, pero tiene una configuración de calidad de:

• Configuración de calidad del 100 % (archivo de 234 KB)
• Configuración de calidad del 80 % (archivo de 115 KB)
• Configuración de calidad del 60% (archivo de 70 KB)
• Configuración de calidad del 40 % (archivo de 44 KB)

Los he mezclado. ¿Puedes decir cuál es cuál? Una vez que tenga su conjetura, compárela con la respuesta en el pie de foto a continuación.

¿Pudiste determinar cuál era cuál? Si eres como yo, no podrías. No veo mucha diferencia en estas imágenes.

Sin embargo, el más pequeño de ellos es sólo el 25% del tamaño de archivo de la imagen más grande. Por lo tanto, el objetivo de todo esto es que probablemente no deba preocuparse demasiado por reducir el tamaño de archivo de sus imágenes antes de publicarlas en la web.

Con eso en mente, veamos cómo cambias el tamaño de tus fotos.

Cómo cambiar el tamaño de tus fotos

Cuando necesitas cambiar el tamaño de tus fotos, ¿cómo lo haces? Eso depende del software que estés usando. Photoshop o Lightroom harán un buen trabajo en esto, y no necesita ningún software de cambio de tamaño por separado.

He aquí cómo hacerlo en cada programa:

Cambio de tamaño de fotos en Photoshop

En Photoshop. utilice la función Guardar para Web. Le permitirá establecer la longitud exacta de los píxeles de los lados de su imagen y también le permitirá establecer el porcentaje de calidad como desee.

En el menú Archivo, seleccione Guardar para Web. Aparecerá un cuadro de diálogo que le permitirá configurar el tamaño y la calidad de la imagen:

Los ajustes de tamaño de imagen están hacia abajo. Simplemente configure el ancho o la altura a la longitud que desee, y el otro lado cambiará automáticamente a la longitud correspondiente. El tamaño del archivo aparecerá en la parte inferior izquierda. Ajuste la configuración de calidad en la parte superior derecha hasta que el tamaño del archivo sea el que desea.

El proceso es fácil y usted tiene control total sobre él. La única limitación es que tienes que cambiar el tamaño de cada imagen individualmente. Lightroom funciona un poco diferente y le permite procesar varias fotos a la vez.

Cambio de tamaño de fotos en Lightroom

En Lightroom, utilizará la función Exportar para cambiar el tamaño de sus fotos. Para abrir la función Exportar, haga clic con el botón derecho, seleccione Exportar y luego seleccione Exportar nuevamente. Aparecerá el siguiente cuadro de diálogo:

En Lightroom, puede establecer el tamaño de la imagen configurando el ancho, el alto o ambos. También puede configurar en píxeles, pulgadas o centímetros.

Cuando se trata de determinar el tamaño del archivo, Lightroom le permite hacerlo de dos maneras:

• estableciendo un límite específico en el tamaño del archivo, o
• estableciendo la calidad (como un porcentaje, como con Photoshop).

Pero no puedes hacer ambas cosas. Tú eliges el tamaño o la calidad del archivo.

Una vez que haga clic en Exportar, Lightroom creará una nueva copia de la imagen en cualquier carpeta que haya designado.

Ninguno de los programas es mejor que el otro para cambiar el tamaño de las fotos. Solo usa el que te resulte más cómodo. En cualquier caso, cambiar el tamaño de tus fotos es simple y será muy fácil una vez que lo hayas hecho una o dos veces.

Conclusión

En este punto, debe tener una buena idea de cómo cambiar el tamaño de sus fotos y qué tan pequeños deben ser los archivos al publicarlos en la web. Para reforzar eso, y simplemente cosas, el proceso explicado en este artículo se puede resumir en unos pocos pasos:

• Determina si necesitas preocuparte por cambiar el tamaño de tus imágenes. Si está utilizando SmugMug, SquareSpace, Flickr u otro servicio para publicar sus imágenes en la web, no lo hace. Simplemente publíquelos tal como están y su proveedor de servicios se encargará de todo por usted. Pero si está creando su propio sitio web o sitio de WordPress, necesita dimensionar correctamente sus imágenes.
• Si necesita cambiar el tamaño de sus imágenes, determine el tamaño (en píxeles) de su imagen según el tamaño del contenedor en su sitio web y cuánto de ese contenedor desea que llene la imagen.
• Utilice la función Guardar para Web en Photoshop o la función Exportar en Lightroom para cambiar el tamaño de la imagen, comenzando por configurar el tamaño que determinó en el paso 2.
• Establezca un porcentaje de calidad para reducir aún más el tamaño de archivo de la imagen (o puede usar el tamaño de archivo máximo en Lightroom). Intente mantener el tamaño de la imagen en alrededor de 250 KB como máximo.
• No tenga miedo de usar porcentajes de calidad tan bajos como el 50%.

Este proceso debería dar como resultado que sus imágenes se vean bien en su sitio web, pero sin atascarlo.