Comentarios de la encuesta de optimización de imágenes del verano de 2019

Comentarios de encuestados sobre diversas técnicas de optimización de imágenes

Sam Dutton

En esta publicación, se enumeran los comentarios en formato libre que Google Web DevRel recibió en su encuesta sobre técnicas de optimización de imágenes del verano de 2019. Se solicitaron respuestas a través de Fundamentos de la Web y @ChromiumDev. El motivo de la encuesta fue descubrir por qué la mayoría de los sitios no siguen las prácticas recomendadas de optimización de imágenes, aunque parezcan una forma relativamente fácil de mejorar el rendimiento. Los datos de respuesta no aparecen aquí porque había defectos en la metodología de la encuesta.

Público

  • Si eres desarrollador web, esta publicación podría resultarte útil para descubrir nuevas técnicas de optimización de imágenes o detalles sobre cómo otros desarrolladores web resolvieron un problema al que te enfrentas, así como los costos, los beneficios y las limitaciones de cada técnica.
  • Si eres un proveedor de servicios de imágenes o CDN de imágenes, esta publicación podría ayudarte a encontrar nuevas oportunidades de mercado.
  • Si eres un framework, una herramienta de compilación o un desarrollador de CMS, esta publicación podría darte ideas sobre funciones nuevas que puedes implementar.

Comentarios

WebP

  • "Me gusta WebP, pero aún no está listo por completo. Además, WordPress no es compatible con WebP. Photoshop, una de las apps de edición de fotos más populares, tampoco es compatible con WebP desde el primer momento. Por lo tanto, no podemos utilizar aplicaciones ni servicios de terceros para la compresión de imágenes".
  • "Haz que WebP se pueda usar en Safari".
  • "Me encantaría usar WebP si pudiera exportarlos desde Photoshop/Figma/Sketch y todos los navegadores lo admitan". [Nota: Sketch admite WebP]
  • “La solución de formato de nueva generación sería genial”.
  • "No dejes de presionar WebP tanto cuando la compatibilidad con el navegador sea deficiente y considera la necesidad de usar PNG en lugar de JPEG para las capturas de pantalla."
  • "Documentos de Google no admite WebP".
  • "Usaríamos WebP exclusivamente, pero nos preocupa la compatibilidad de los navegadores".
  • “Primero corrige la compatibilidad con navegadores y actualiza los navegadores heredados o agrega correcciones heredadas, entonces las personas estarán más propensas a adoptar nuevos tipos de imágenes como WebP...”.
  • "Incentiva a los desarrolladores de complementos o temas a considerar brindar compatibilidad con WebP y otros tipos de imágenes de nueva generación, de modo que los que no son desarrolladores no necesiten manipularlas."

Imágenes SVG y vectoriales

  • "Si es posible, uso archivos SVG (animados). gatsby-image solucionó mucho de esto. Sin embargo, cuando se examina a fondo lo que han hecho, es totalmente poco realista que un sitio web normal tenga que crear algo así para que las imágenes funcionen correctamente. El navegador debe asumir más de esta responsabilidad".
  • "¿Sería posible documentar cómo crear animaciones SVG con lottie.js?".
  • "La mayoría del tiempo tratamos de usar imágenes JPEG de gran resolución con tamaños bajos en nuestro sitio web para evitar los tiempos de carga. También nos aseguramos de usar SVG cuando sea necesario para proporcionar calidad para el diseño responsivo".
  • “Si es posible, intentamos usar gráficos vectoriales optimizados para todas las fotos, excepto las fotos”.

Otros formatos de imagen

  • "Necesitamos educar mejor a las personas para que dejen de usar GIF".

Carga diferida

  • "Ten en cuenta al usuario cuando consideres funciones como la carga diferida porque, para muchas de ellas, es molesta."
  • "Haz que el atributo de carga diferida funcione con la imagen de fondo."
  • "Los marcos de trabajo deberían generar un mejor procesamiento de los recursos desde el primer momento".
  • "Hace mucho tiempo que generamos conversiones a partir de la carga diferida. Denuncias de usuarios sobre millones de imágenes y sitios que aparecen como "NO CARGANDO". Eso fue entender que nuestro equipo lo resumió. Es difícil para los usuarios sin conocimientos técnicos describir los problemas".
  • "Me gustaría comprender mejor el uso de la API de Intersection Observer para la carga diferida en lugar de las técnicas tradicionales".
  • "Esto funciona bien: pwafire.org/developer/codelabs/progressive-loading".

Imágenes de fondo

  • "Suelo cargar imágenes como fondos en CSS."
  • "La etiqueta <img> genera problemas y es difícil controlar detalles específicos, en especial con el contenido enviado por los usuarios. Usamos <div> y el estilo de la imagen de fondo con mucha más frecuencia, ya que nos permite utilizar el tamaño y la posición del fondo, y evitar que la imagen se guarde con el clic derecho".

Transparencia

  • "Es 2019. ¿Por qué los archivos JPG siguen sin transparencia alfa?
  • "En realidad, solo uso archivos PNG para fotografías cuando necesito un fondo transparente".

Marcadores de posición de imagen de baja calidad (LQIP)

  • "Usamos LQIPS y es una excelente técnica para mantener el interés de los visitantes sin necesidad de cargar muy temprano las imágenes de alta calidad".

Rendimiento

  • "Recientemente, tuvimos un problema de rendimiento con las imágenes. A medida que el usuario se desplaza hacia abajo en nuestro sitio, mostramos las siguientes 60 tarjetas que incluyen una miniatura. Debido al límite de 6 conexiones en el mismo dominio, se bloquearon las miniaturas y a la siguiente solicitud de AJAX para obtener las siguientes 60 tarjetas si el usuario se sigue desplazando hacia abajo".
  • "Nos encantaría utilizar HTTP/2, pero la mayoría de nuestros clientes utiliza IE11. Por lo tanto, estamos explorando la fragmentación de dominios / la carga de solicitudes de datos AJAX JSON fuera de un dominio diferente”.

Tamaño

  • "Disculpa por el tamaño intrínseco; aprovechar la altura y el ancho me parece mejor".
  • "Buscando una forma de generar menos tamaños, ahora es de aproximadamente 12".
  • "El cambio de tamaño dinámico de las imágenes es realmente difícil e imposible sin JS".
  • "Una herramienta como responsivebreakpoints.com es buena para web.dev :)"."

Imágenes de alta calidad y resolución

  • "¿Cómo descargar imágenes comprimidas sin perder la calidad de DPI?"
  • "Somos una empresa de gestión de documentos. Nuestras apps admiten MILLONES de imágenes escaneadas de alta resolución, generalmente TIFF o PDF".
  • “Es un inconveniente. Para el formato de impresión, se necesitan archivos img de alta resolución, que deben optimizarse para la Web. Reducir el tamaño de las imágenes para la Web resulta complicado, pero es un problema si los autores solo proporcionan archivos livianos para imágenes destinadas a la publicación impresa. Terminamos enviando mensajes contradictorios sobre los requisitos para el envío de manuscritos con obras de arte. Luego, terminamos con flujos de trabajo complejos para procesar esos materiales".

Capacidad del navegador

  • "Sería muy útil el recorte de src responsivo automático del navegador como función [integrada], ya que lleva mucho tiempo recortar todas las imágenes a 4 tamaños y escribir todo el lenguaje de marcado. Si podemos subir una foto grande y escribir una etiqueta de imagen simple, los navegadores crearán automáticamente los múltiples atributos src que serían una función ganadora."
  • "Personalmente, me cuesta evitar el reprocesamiento de la página cuando el CSS establece la imagen con imágenes responsivas (ancho máximo: 100%; altura automática o altura: ancho: 100%; altura automática), especialmente en combinación con la dirección artística a partir de la etiqueta de imágenes o imágenes adaptables. La mejor manera de evitar parece usar el "truco de padding negativo" para una relación de imagen fija y, luego, posicionar la imagen dentro de este cuadro de relación de aspecto. Sería muy útil contar con una mejor compatibilidad con el navegador y un manejo de imágenes responsivas”.
  • "Desactiva la reproducción automática de GIFs recuperando solo el primer fotograma".

CDN y servicios de imagen

  • "Google debe proporcionar una CDN gratuita como Cloudflare".
  • "Quizás sería bueno disponer de más herramientas para configurar el escalamiento dinámico y las CDN con diferentes proveedores".
  • “Una sola imagen de gran tamaño comprimida es una solución muy buena sin costos de producción adicionales. Necesitas imágenes de alrededor de 1,000 píxeles de ancho para dispositivos móviles (500 píxeles de ancho de renderización) y ese es también el tamaño que necesitas para pantallas grandes o de escritorio que no sean Retina. Creo que las CDN de imágenes que cambian de tamaño no son una buena solución, aunque ya la he usado en el pasado. El CMS debería controlar el cambio de tamaño y eso es demasiado complejo de configurar, por lo que una única solución es un buen compromiso (por ahora)".
  • “CloudFlare ajusta automáticamente la escala de nuestras imágenes para que se ajusten mejor a la pantalla del usuario. Así podemos ahorrar tiempo de carga, ya que las imágenes se cargan en relación con la pantalla del usuario. Por ejemplo, si un usuario utiliza un teléfono, este no se cargará en un fondo del tamaño de una computadora."
  • “Cloudflare hace esto en segundo plano sin que tengamos que hacer nada más que marcar una casilla en nuestro panel de configuración”.
  • “Solo para reiterar, la única razón por la que puedo usar con éxito srcset, etc., es por la facilidad de Cloudinary. Sin embargo, Cloudinary se vuelve costoso, realmente rápido, lo que parece ser un obstáculo importante en la experiencia de desarrollo”.
  • "Necesitamos una forma de recortar imágenes automáticamente y de manera inteligente con facilidad para que se puedan trabajar con diferentes relaciones de aspecto en diferentes contextos".
  • "También uso imágenes de otros proveedores, como Unsplash, donde hay mucho menos control de la resolución, la calidad y la compresión".

CMS, plataforma y framework

  • "Cuando creo un sitio con un CMS, todavía me cuesta saber cuál es la mejor manera de usar imágenes. Los autores suelen configurar imágenes con diferentes dimensiones y esperan que estas no se reduzcan ni se adapten. No sé si puedo establecer el ancho máximo o el alto máximo en las imágenes".
  • "He estado usando gatsby-image en los últimos proyectos y nunca he mirado atrás".
  • "Las imágenes suelen ser la parte difícil, ya que los usuarios finales las colocan en el CMS, ya que pueden utilizar cualquier tamaño y formato. A veces, la imagen original tiene el formato ideal y las dimensiones no están disponibles".
  • “Es difícil mantener las imágenes porque nuestro sistema es de servicio automático para agregar controles, a menos que los problemas sucedan automáticamente sin afectar la resolución. Además, consideramos que las imágenes no se ven bien en los dispositivos móviles y en las computadoras de escritorio".
  • "Ayudo a las personas a optimizar sus sitios (WordPress). Los mayores problemas que he visto con imágenes son los siguientes: necesitan depender de una CDN o complementos para crear WebP. Los desarrolladores de temas deben codificar correctamente srcset/picture. La mayoría de los complementos de carga diferida se cargan lentamente, lo que genera una UX deficiente. Las imágenes de fondo son difíciles de cargar de forma diferida”.

Costo/beneficio

  • "Las nuevas prácticas son eficaces, pero aumentan el tiempo de desarrollo de los sitios".
  • "Muchas empresas de Fortune 500 no adoptaron con lentitud la falta de cumplimiento de los nuevos estándares, como srcset y WebP. Debido a esto, muchas empresas se resistieron al cambio como un costo de desarrollo innecesario para los sitios web actuales. El usuario final (UX) no habla ni informa ampliamente sobre las mejoras en el rendimiento. En todo caso, dificulta un poco guardar imágenes de la Web".
  • "Es costoso crear y administrar varios tamaños y versiones".
  • "Ocupan mucho espacio en nuestro servidor".

SEO

  • "Es difícil equilibrar una calidad de imagen aceptable y un tamaño de archivo. Por un lado, quiero una carga rápida para el beneficio de SEO, pero, por otro lado, las imágenes de baja calidad restarán valor a la IU y la UX".

La función de las imágenes en la Web

  • "Hay demasiados en la Web. Deja de utilizar imágenes inútiles que no mejoran el contenido escrito".
  • "¿Todavía recuerdas la época en la que la Web no tenía imágenes y compartimos selfies como arte ASCII?"

Herramientas, orientación, estándares y prácticas recomendadas: Frustraciones y solicitudes

  • [Un participante escribió una entrada de blog en respuesta a esta encuesta.]
  • "Parece que los requisitos cambian constantemente. Como desarrollador web, es muy frustrante para ti porque, en primer lugar, guardar las imágenes requiere mucho tiempo. Optimizamos lo mejor que podemos, revisamos el sitio y, meses después, Google decidió que las imágenes podrían estar aún más comprimidas o tener un formato diferente. Esto nos impide brindarle a nuestros clientes la mejor solución posible, que sea duradera y que genere un esfuerzo costoso para ellos y para nosotros. Algunos de nuestros clientes de pequeñas empresas simplemente no tienen el presupuesto necesario para que sigamos corrigiendo las imágenes y volviendo a guardarlas para que cumplan con los requisitos. No tenemos el presupuesto necesario para hacer este trabajo en sus paquetes de administración. Escribir el código para llamar a diferentes tamaños de imagen para distintos dispositivos también lleva mucho tiempo. Sería genial crear un sistema para guardar imágenes que fuera coherente por un período más largo".
  • "Sí, creo que se produjo un error en Lighthouse "Keep Request Counts Low And Files Sizes Small" (el recuento de solicitudes es bajo y el tamaño de los archivos es pequeño). Si un sitio publica a través de HTTP1.x, entonces seguro, pero si un sitio publica en HTTP2, la cantidad de solicitudes es menos importante o ni siquiera es un problema si se originan en el mismo nombre de host. Tengo un sitio web lite, pero cargamos 30 archivos WebP pequeños de aproximadamente 35 solicitudes en total, a través de HTTP2 en el mismo nombre de host. Lighthouse lo está marcando como un problema de "Keep Request Counts Low And File Sizes Small"; mientras que es superrápido y, debido a HTTP2 en el mismo nombre de host, la cantidad de solicitudes no es un problema. Y sí, los archivos ya son pequeños (la mayoría tiene entre 1 KB y 2 KB o menos). Podría cargar un objeto, pero se deben hacer más procesamientos CSS. Por lo tanto, te pedimos que actualices el informe "Keep Request Counts and Files Sizes" en Lighthouse para tener en cuenta HTTP2 sobre el mismo nombre de host".
  • "Fue todo un esfuerzo para las personas recordar comprimir sus imágenes".
  • "El comportamiento en varios navegadores sigue siendo impredecible, por lo que las soluciones más simples suelen ser las más seguras".