Source: http://www.estrategiadigital.ec/blog/web/optimizar-imagenes-una-pagina-web/
Timestamp: 2018-10-15 17:52:10+00:00

Document:
Cómo optimizar imágenes para una página web - Estrategia Digital
Portada » Cómo optimizar imágenes para una página web
Cómo optimizar imágenes para una página web2018-04-122018-04-12http://www.estrategiadigital.ec/wp-content/uploads/2017/08/estrategiadigital.pngEstrategia Digitalhttp://www.estrategiadigital.ec/wp-content/uploads/2018/04/optimizar-imagenes.jpg200px200px
Como fotógrafo, ¿qué es lo que más amas después de tu mamá? Está claro: 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. El siguiente paso será, por tanto agregar tus imágenes a tu página web de fotografía, una excelente herramienta de comunicación lista para ser compartida entre tus clientes, colegas y amigos.
Una cuestión surge aquí y es importante que la tengas en cuenta: 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?
Aquí enumeraremos los errores más comunes que cometen la mayoría de los fotógrafos y te ofrecemos una lista de buenas prácticas que puedes comenzar a aplicar desde ahora:
¿Por qué es tan importante la optimización de 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. Siempre es bueno 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 otro 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 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 porfolio 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 navegadormuestra 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 porfolio 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.
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
7 Páginas web de educación gratuitaWeb

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución