Comentarios de los encuestados sobre las diversas técnicas de optimización de imágenes
En esta publicación, se enumeran los comentarios de 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. La motivación 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 parecen ser una forma relativamente fácil de mejorar el rendimiento. Los datos de respuesta no aparecen aquí porque hubo fallas en la metodología de la encuesta.
Público
- Si eres desarrollador web, esta publicación puede 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, beneficios y limitaciones de cada técnica.
- Si eres un proveedor de servicios de imágenes o CDN de imágenes, esta publicación puede ayudarte a encontrar nuevas oportunidades de mercado.
- Si eres un desarrollador de CMS, marco de trabajo o herramienta de compilación, esta publicación puede darte ideas sobre nuevas funciones que puedes implementar.
Comentarios
WebP
- "Me gusta WebP, pero aún no está completamente listo. Además, nuestro 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 basarnos en apps o 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 admiten". [Nota: Sketch es compatible con WebP]
- "La solución de formato de próxima generación sería genial".
- "Deja de presionar WebP con tanta fuerza cuando la compatibilidad del navegador sea deficiente y considera la necesidad de 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 del navegador".
- "Primero, corrige la compatibilidad de los navegadores y actualiza los navegadores heredados o agrega correcciones heredadas. Luego, las personas se sentirán más inclinadas a adoptar nuevos tipos de imágenes como WebP..."
- "Incentiva a los desarrolladores de complementos o temas a que consideren brindar compatibilidad con WebP y otros tipos de imágenes de nueva generación, de modo que los que no son desarrolladores no deban jugar con ella".
Imágenes SVG y vectoriales
- “Si es posible, estoy usando SVG (animado). gatsby-image soluciona muchos problemas. Pero cuando profundizas en lo que han hecho, es completamente poco realista que un sitio web normal deba crear algo así para que las imágenes funcionen bien. El navegador debe asumir más de esta responsabilidad".
- "¿Sería posible documentar cómo crear animaciones SVG con lottie.js?"
- "En nuestro sitio web, intentamos usar imágenes JPEG de gran resolución con tamaños bajos la mayor parte del tiempo para evitar los tiempos de carga. También nos aseguramos de usar SVG cuando sea necesario para proporcionar calidad para el diseño adaptable".
- "Intentamos usar gráficos vectoriales optimizados para todas las fotos, excepto para las fotos, si es posible".
Otros formatos de imagen
- "Tenemos que 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, ya que para muchos es molesto”.
- "Haz que el atributo de carga diferida funcione con la imagen de fondo."
- “Los frameworks deberían procesar mejor los recursos desde el primer momento”.
- "Realizamos una conversión de la carga diferida hace mucho tiempo. Los usuarios informan que hay millones de imágenes y sitios que "NO SE CARGAN". Eso fue entendiendo cómo lo resumió nuestro equipo. Es difícil para los usuarios no técnicos describir problemas".
- "Deseo comprender mejor cómo utilizar la API de Intersection Observer para la carga diferida que con las técnicas tradicionales".
- "Para mí, funciona bien: pwafire.org/developer/codelabs/progressive-loading".
Imágenes de fondo
- "Suelo cargar imágenes como fondos en CSS."
- "La etiqueta
<img>
es problemática y es difícil de controlar en detalle, especialmente en el caso del contenido enviado por los usuarios. Usamos<div>
y el estilo de la imagen de fondo con mucha más frecuencia, ya que nos permite usar el tamaño del fondo y la posición del fondo, y evitar que la imagen se guarde con un clic con el botón derecho."
Transparencia
- "Es 2019. ¿Por qué los archivos JPG aún no tienen transparencia alfa?".
- "Solo uso archivos PNG para las 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 interesados a los visitantes sin cargar rápidamente 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, así como la próxima solicitud AJAX de obtener las próximas 60 tarjetas si el usuario sigue desplazándose hacia abajo".
- "Nos encantaría usar HTTP/2, pero la mayoría de nuestros clientes usan IE11. Por lo tanto, estamos explorando la fragmentación de dominios / la carga de solicitudes de datos JSON AJAX fuera de un dominio diferente".
Tamaño
- "Perdón por el tamaño intrínseco; me parece mejor aprovechar el alto y el ancho".
- "Buscando una manera de generar menos tamaños, ahora cuesta alrededor de 12".
- "El cambio de tamaño dinámico de las imágenes es realmente imposible y difícil sin JS."
- "Una herramienta como responsivebreakpoints.com es bueno para web.dev :)."
Imágenes de alta calidad y alta resolución
- "¿Cómo se descarga la compresión de imágenes sin perder la calidad de DPI?"
- "Somos una empresa de administración de documentos. Nuestras apps manejan MILLONES de imágenes escaneadas de alta resolución, generalmente en formato TIFF o PDF".
- "Es un inconveniente. Los archivos img de alta resolución son necesarios para el formato de impresión y deben optimizarse para la Web. Reducir el tamaño de las imágenes para la Web resulta complicado, pero resulta complicado si los autores solo proporcionan archivos livianos para las imágenes que se publicarán en formato impreso. Notamos mensajes contradictorios sobre los requisitos para el envío de manuscritos con obras de arte. Luego obtuvimos flujos de trabajo complejos para procesar esos materiales".
Capacidad del navegador
- "Sería muy útil usar la función src recortar desde el navegador como [integrada] porque lleva mucho tiempo recortar todas las imágenes a 4 tamaños y escribir todo el lenguaje de marcado. Si podemos cargar una fotografía 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 los reprocesamientos de páginas cuando CSS configura la imagen para 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 proveniente de imágenes o etiquetas de imagen adaptables. La mejor manera de evitar parece usar el "truco de padding negativo" para obtener una proporción de imagen fija y, luego, posicionar la imagen dentro de este cuadro de proporción. Sería de gran ayuda contar con una mejor compatibilidad con el navegador o un manejo de imágenes responsivo".
- "Inhabilita la "reproducción automática" de GIF recuperando solo el primer fotograma".
CDN y servicios de imágenes
- “Google debería proporcionar una CDN gratuita como Cloudflare”.
- “Quizás sería bueno contar con más herramientas para configurar el escalamiento dinámico y CDN con diferentes proveedores”.
- "Una única imagen sobrecomprimida de gran tamaño es una solución muy buena sin costo de producción adicional. Necesitas imágenes de aproximadamente 1,000 píxeles de ancho para dispositivos móviles (ancho de renderización de 500 px) y ese también es el tamaño que necesitas en pantallas grandes o de escritorio que no sean retina. Creo que las imágenes que cambian el tamaño de las CDN es una solución muy mala, aunque la usé antes. El CMS debe manejar el cambio de tamaño, y este es demasiado complejo de configurar. Una única solución es una buena opción (por ahora)".
- “CloudFlare ajusta la escala de nuestras imágenes automáticamente para que coincidan mejor con la pantalla del usuario. Podemos ahorrar tiempo de carga porque las imágenes se cargan en relación con la pantalla del usuario. Por ejemplo, si el usuario utiliza un teléfono, no se cargará en un fondo del tamaño de una computadora de escritorio.
- "Cloudflare hace esto en segundo plano sin que tengamos que hacer nada más que marcar una casilla en el panel de configuración".
- “Solo para reiterar, la única razón por la que puedo usar srcset correctamente, etc. es la facilidad de Cloudinary. Pero Cloudinary se vuelve costoso, muy rápido. Esto parece un gran obstáculo en la experiencia de desarrollo".
- "Necesitamos la forma de recortar imágenes automáticamente y de forma inteligente para que puedan trabajar con diferentes relaciones de aspecto en diferentes contextos".
- "También uso imágenes de otros proveedores, como Unsplash, donde hay menos control de la resolución, la calidad y la compresión".
CMS, plataforma y framework
- "Sigo teniendo dificultades para descubrir cuál es la mejor manera de usar imágenes cuando creo un sitio con un CMS. Los autores suelen configurar imágenes con diferentes dimensiones y esperan que las imágenes no se reduzcan ni se escalen. “No sé si es correcto establecer el ancho máximo o la altura máxima en las imágenes”
- "En los últimos proyectos, hemos usado gatsby-image y nunca miré atrás".
- “A menudo, las imágenes son la parte difícil, ya que el usuario final las coloca en el CMS. Pueden usar cualquier tamaño y formato. A veces, la imagen original con el formato de imagen ideal y las dimensiones no están disponibles”.
- "Es difícil mantener las imágenes porque nuestro sistema cuenta con autoservicio. Es difícil agregar controles, a menos que las circunstancias ocurran automáticamente sin afectar la resolución. Además, en nuestro caso, las imágenes no se ven correctas en dispositivos móviles en comparación con computadoras de escritorio".
- "Ayudo a las personas a optimizar sus sitios (WordPress). Los mayores problemas que he observado con respecto a las imágenes son la necesidad de depender de una CDN o de 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 mala UX. 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 la lista Fortune 500 adoptaron lentamente la falta de cumplimiento de los nuevos estándares, como srcset y WebP. Al ver esto, muchas empresas se resistieron al cambio como un costo de desarrollo innecesario para los sitios web actuales. El usuario final (UX) no analiza ni informa ampliamente las mejoras de rendimiento. En cualquier 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 la calidad aceptable de la imagen y el tamaño del archivo. Por un lado, quiero una carga rápida para el beneficio de la SEO, pero, por el otro, las imágenes de baja calidad perjudicarán la IU/UX".
El rol de las imágenes en la Web
- "Hay demasiados en la Web. Deja de usar imágenes inútiles que no mejoren el contenido escrito".
- "¿Todavía recuerdas la época en 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]
- "Los requisitos parecen cambiar constantemente. Como desarrollador web, es extremadamente frustrante porque guardar las imágenes en primer lugar lleva mucho tiempo. Optimizamos lo mejor posible, revisamos el sitio y, meses después, Google decidió que las imágenes podrían estar más comprimidas o necesitar un formato diferente. Esto nos impide proporcionar a nuestro cliente la mejor solución posible que dure y, en cambio, crea un esfuerzo costoso para ellos y para nosotros. Algunos de nuestros clientes de pequeñas empresas simplemente no tienen el presupuesto para que podamos seguir corrigiendo imágenes y volver a guardarlas para cumplir con los requisitos. No tenemos el presupuesto para hacer este trabajo dentro de sus paquetes de administración. Escribir el código para llamar a distintos tamaños de imagen para diferentes dispositivos también lleva mucho tiempo. Sería genial crear un sistema para guardar imágenes que fuera coherente durante un período de tiempo más largo".
- "Sí, creo que la opción "Mantener la cantidad de solicitudes es baja y los tamaños de archivo pequeños" era un error en Lighthouse. Si un sitio publica en HTTP1.x, no hay problema, pero si lo hace a través de HTTP2, la cantidad de solicitudes es menos importante o ni siquiera un problema si se originan en el mismo nombre de host. Tengo un sitio web básico, pero cargo 30 archivos WebP pequeños de alrededor de 35 solicitudes en total en HTTP2, en el mismo nombre de host. Lighthouse está marcando esto como un problema de "Mantener la cantidad de solicitudes bajas y tamaños de archivo pequeños", pero es superrápido y, debido a que HTTP2 en el mismo nombre de host no es un problema. Y sí, los archivos ya son pequeños (la mayoría son de entre 1 KB y 2 KB o menos). Podría cargar un objeto, pero luego se necesita más procesamiento de CSS. Por lo tanto, actualiza el informe “Mantener los recuentos de solicitudes bajos y tamaños de archivos pequeños” en Lighthouse para tener en cuenta HTTP2 sobre el mismo nombre de host”.
- "Ha sido muy difícil para las personas recordar comprimir sus imágenes".
- "El comportamiento entre navegadores sigue siendo impredecible, por lo que las soluciones más simples suelen ser las más seguras".