Cómo optimizar imágenes para una página web
Como fotógrafo, hay pocas cosas que amas tanto como a tus fotografías. Ese sentimiento lo comparten diseñadores, artistas y, en general, todas las personas que dedican gran parte de su tiempo y energía a crear hermosas imágenes. Después de todo el trabajo invertido, es natural que quieras compartir el resultado con todo el mundo en diferentes canales. Uno de los canales más efectivos para compartir tus hermosas imágenes con el mundo, es tu página web de fotografía, una excelente herramienta para mostrar tu trabajo a tus clientes, colegas y amigos.
Como seguramente lo sepas, a menudo las imágenes no se ven en la pantalla tal como las tomaste. Es como si hubiera habido una “huida de píxeles” en el camino, y la calidad de tu imagen se verá afectada. Si este no es el caso, entonces el problema será otro: los archivos serán tan pesados que tu página web tardará demasiado en cargar el contenido y esto, sin duda, puede afectar a la paciencia de los visitantes -y clientes potenciales- que no dudarán en irse a otro lugar. He aquí el gran dilema de la optimización de imágenes en la era de Internet >> ¿Cómo encontrar el equilibrio adecuado para mantener la mejor calidad sin afectar a la velocidad o el rendimiento de tu página web?
En este artículo enumeraremos los errores más comunes que cometen la mayoría de los fotógrafos y te ofrecemos una lista de buenas prácticas para optimizar tus imágenes para páginas web que puedes comenzar a aplicar desde ahora:
¿Por qué es tan importante la optimización de imágenes?
Hoy en día, tu presencia online juega un papel muy importante si quieres ser un fotógrafo profesional. Desde tener una cuenta de Instagram donde muestres tus mejores tomas, hasta crear una página web de fotografía que se vea profesional y refleje tu estilo, donde incluso puedas vender tus fotos online, o permitir que la gente reserve una sesión fotográfica contigo.
Ahora, por qué optimizar las imágenes.
¿Te has preguntado alguna vez qué ocurre dentro de tu computadora mientras navegas por la red? Te lo explicamos: el navegador de tu PC, Mac, tableta o móvil necesita descargar cada archivo de una página web para mostrártelo en la pantalla. Esto quiere decir que cuanto más grandes sean los archivos, menor será la velocidad total de tu página web. Todos sabemos que un rendimiento lento puede tener consecuencias devastadoras tanto para el SEO (Google adora las páginas que cargan rápido) como para la experiencia de usuario (UX) de los visitantes.
De igual manera, hay que tener en cuenta que el usuario promedio de Internet no tiene paciencia con una página que tarda demasiado en mostrar el contenido, incluso si la demora está justificada. Los números indican que el 40% de las personas abandona una página web que tarda más de tres segundos en cargarse.
El tercer desafío importante llega de la mano de los dispositivos móviles, que representan hoy más del 50% del tráfico web. En general, el ancho de banda de los dispositivos móviles es más bajo que el de las redes domésticas, lo que dificulta que tus imágenes se carguen sanas y salvas en las pantallas de tus visitantes. Esta es una cuestión global que debes tomar en cuenta: los problemas que presentan las imágenes de alta resolución y el rendimiento de tu página web.
¿Hasta dónde se puede reducir la calidad?
Hoy en día existen dos técnicas principales para optimizar las imágenes de las páginas web. La primera es la compresión. El principio es simple (aunque complejo desde el punto de vista matemático): los algoritmos de tu software de edición de fotos detectan la información innecesaria de tus imágenes y la eliminan de los archivos.
Este ese el funcionamiento de muchos formatos de compresión como el JPEG, tal vez el más famoso de todos. A consecuencia de esta dieta de píxeles, el tamaño de tus imágenes se reducirá de forma drástica y tu página cargará mucho más rápido, especialmente si empleas este modo de compresión en cada imagen y si aplicas un fuerte coeficiente de compresión (“Calidad JPEG”).
Sin embargo, hay un problema significativo: la compresión conlleva la pérdida de datos valiosos. Y esto suele notarse en pequeños detalles como la aparición de objetos o una apariencia menos sofisticada que el usuario promedio de Internet puede tolerar sin dramas. Él sí, pero tú no. Como fotógrafo, debes tener tolerancia (casi) cero a todo lo que pueda alterar, aunque sea levemente, la calidad de tus creaciones. Porque al final del día, ¿de qué sirve invertir tiempo y esfuerzo en conseguir la foto perfecta si al primer contacto con el algoritmo de compresión éste lo arruina todo en un microsegundo? Esta es la razón por la que este sistema puede usarse de forma segura para otros muchos tipos de páginas web (como hoteles, blogs, tiendas online, etc.), pero no lo recomendamos para tu portafolio de fotografía online.
El tamaño, ¿realmente importa?
La mayoría de las cámaras actuales permiten tomar imágenes con una resolución muy alta. Tal como se ve en la siguiente tabla, incluso una cámara de baja gama puede sacar fotos de 4.290 x 2.800 pixeles sin pestañear. Esto es una gran ventaja pero también plantea un problema en cuanto a diseño web, ya que las imágenes con más resolución se traducen en archivos más grandes a la hora de cargar. Es aquí donde entra en acción el ajuste de tamaño (el segundo método más común de optimización). En simples palabras, este concepto significa reducir el tamaño de tus fotos sin alterar la calidad (bueno, casi). Tus visitantes verán exactamente lo mismo en sus pantallas excepto que usen un microscopio para ver tus fotos.
Esta técnica es astuta pero no del todo convincente. De hecho, ¿quién puede decir cuál es la resolución óptima para Internet? ¡Cada navegador muestra las mismas imágenes en diferentes tamaños! Por no mencionar que algunas imágenes fueron pensadas para ser exhibidas en un formato más grande. Ejemplos: un paisaje, fotos obtenidas con la técnica de macrofotografía o composiciones artísticas. Por último, aunque no menos importante una resolución adecuada para tu página web de fotografía no necesariamente cumplirá los criterios de Facebook e Instagram y viceversa.
En resumen, modificar el tamaño de tus imágenes puede ser una buena opción si las quieres para un propósito muy específico y si estás seguro de que no tendrás que mostrarlas en pantallas grandes. Más allá de eso, esta técnica no resolverá tu problema existencial número 1: cómo combinar calidad y rendimiento.
¿Cuál es la mejor practica?
Al igual que con las relaciones interpersonales o las dietas, también con las páginas web la claves está en encontrar el balance. Por un lado, eres un artista que aspira a dar lo mejor de sí en cada foto pero a la vez necesitas optimizar tus imágenes para mostrarlas en tu portafolio online sin sobrecargarlo de archivos pesados. Tal como lo hemos visto, las opciones más populares (compresión y ajuste de tamaño) no respetan este equilibrio y perjudican significativamente la presentación visual en favor del rendimiento.
Por su parte, Wix utiliza algoritmos avanzados para lograr el mejor equilibrio entre la calidad de la imagen y el rendimiento de las fotos en las pantallas. Básicamente, lo lo único que tienes que hacer es sacar fotos que corten la respiración, subirlas a tu página web a través de la Galería Wix Pro, y luego dejar que la computadora haga todos los cálculos por ti. No hay necesidad de comprimir o cambiar el tamaño de tus imágenes. Solamente carga tus fotos. La Galería de Wix determinará automáticamente y aplicará la mejor resolución. El archivo redimensionado se cargará desde el servidor más cercano al navegador utilizando un CDN (Content Delivery Network por sus siglas en inglés o Red de Entrega de Contenidos) con cobertura mundial, garantizando así el mayor rendimiento y velocidad posibles.
Este es el procedimiento que debes seguir para optimizar imágenes para tu página web:
1- Mejora tu imagen con Photoshop, Lightroom o cualquier editor gráfico que elijas.
2- Exporta la imagen como archivo JPEG con:
Una calidad de 11 o más en la escala de Photoshop (o similar).
Una resolución de al menos 3.000 pixeles en el lado más corto de la imagen (el ancho de un retrato, la altura de un paisaje).
Un tamaño máximo de 15 MB
3- Deja que Wix haga su magía para que finalmente consigas una foto optimizada que realmente respete tu arte y cumpla con los requisitos.
Para usuarios más avanzados
Desde el panel de control de la Galería Wix Pro puedes, de forma intuitiva, desactivar las configuraciones con valores específicos para cada imagen. Este control único, asociado a los algoritmos avanzados de esta aplicación, te dará la mejor calidad y rendimiento, tanto para dispositivos móviles como para computadoras de escritorio:
La calidad. Además de cuando se trata de imágenes particularmente ricas, ajustar la configuración de las fotos por encima de 90 está considerado como una mala práctica para tu página web porque aumentará el tamaño del archivo con apenas una mínima incidencia en la presentación de la imagen.
La nitidez. Permite afinar tu foto analizando y maximizando la nitidez de sus bordes. Tú tienes el control total sobre la cantidad de nitidez aplicada a la imagen, el radio (número de píxeles desde el borde que aportan nitidez) y el umbral (qué píxeles deben considerarse como píxeles de borde; cuanto más bajo es el umbral, más intenso es el efecto de nitidez).
Moraleja: recuerda que todo en la vida es cuestión de equilibrio y tu página web de fotografía no es una excepción a la regla.
¿Estás listo para mostrar tus imágenes al mundo? ¡Crea tu página web de fotografía con Wix!
Publicado por Equipo Wix
#Consejosdefotografía #Fotografía #Optimizacióndeimágenes #PortafoliodeFotografíaOnline
