*

La web móvil tiene un problema de peso. Demasiados sitios móviles tardan en cargarse y más aquellos que están cargados de campanas y silbatos innecesarios, lo que lleva a una experiencia de usuario deficiente.

Los principales culpables son las imágenes, que representan el 68% del peso total de la página. Por lo que la recomendación es evitar el uso de imágenes que tengan un peso superior al necesario para mantener la calidad y lo otro, no colocar imágenes innecesarias o que no ayuden con la intención de la publicación.

Pero, ¿cómo puede asegurarse de que las imágenes en su sitio móvil sean livianas, respondan al dispositivo y usen el mejor formato para combinar velocidad y calidad? En esta oportunidad trataremos de buscarle respuesta a esas interrogantes, para así, lograr la optimización de imágenes para dispositivos móviles, incluidas imágenes receptivas y otros métodos inteligentes para detener imágenes que arruinan la experiencia del usuario móvil.

El acto de equilibrio de la optimización de la imagen

El problema con la optimización de imágenes es que no hay reglas duras y rápidas. La optimización de la imagen siempre será un acto de equilibrio cuidadoso entre la experiencia del usuario, el atractivo y el rendimiento de la página.

Raluca Budiu , Director de Investigación de Nielsen Norman Group, explica:

"Debido a que la pantalla es pequeña en el móvil, las imágenes demasiado pequeñas pueden ofrecer muy poca información, y las imágenes demasiado grandes pueden ralentizar demasiado la página. Recomendamos que comience con una imagen de tamaño modesto y permita que las personas hagan un acercamiento (o descarguen una imagen más grande de la imagen).

La mayoría de las veces, las imágenes grandes no son una buena idea: su densidad de información es baja y requieren que las personas esperen a que la página se cargue y / o que se desplace hacia abajo para obtener más contenido. Este es un problema común con los diseños responsivos de una columna: debido a que se supone que las imágenes llenan todo el ancho del contenedor, a menudo terminamos con imágenes enormes que llevan poca información en comparación con su tamaño ".

No existe una regla establecida sobre cuán pequeña debería ser una imagen para dispositivos móviles: se trata de una compensación entre la calidad y el tamaño de la página. Pero una buena guía es comparar con los 100 sitios más populares. Según httpArchive , el JPG promedio es de 29 KB y el PNG promedio es de 16 KB.

Reducir el peso de una imagen se debe en parte a guardar la imagen con el tamaño y la resolución apropiados (número de píxeles) y, en parte, a comprimir la imagen. Algunas herramientas creativas, como Photoshop, ofrecerán cierta compresión, pero a menudo no son suficientes, especialmente con tipos de imágenes más grandes, como PNG.

¿Deberías usar imágenes de diferentes tamaños para dispositivos móviles, tabletas y computadoras de escritorio?

Al diseñar sitios web separados para dispositivos móviles, tabletas y computadoras de escritorio, ya sea a través de URL dedicadas (site.com y m.site.com) o al servir sitios diferentes a través de una sola URL (diseño web adaptativo), está implícito que las imágenes deben ser tamaño adecuado para el dispositivo más grande en esa categoría.

La posición es quizás menos clara con el diseño web receptivo (RWD). Con RWD, el principio es servir el mismo sitio web a diferentes dispositivos, usando CSS para formatear el contenido de acuerdo con las capacidades del dispositivo y el tamaño de la pantalla.

Sin embargo, esto no significa que los sitios web deban necesariamente adoptar un enfoque de imágenes de talla única para todos, explica Alex Painter , consultor de rendimiento web en el Grupo NCC:

"Las páginas a menudo son lentas en los dispositivos móviles debido a que no se entregan las imágenes de tamaño adecuado para la ventana gráfica. La popularidad del diseño receptivo puede ser en parte culpable: la idea de que el mismo contenido pueda volver a fluir para que el diseño funcione en cualquier ventana gráfica puede enmascarar el hecho de que las imágenes no se han optimizado para dispositivos móviles.

Muchos sitios entregan las mismas imágenes en el escritorio que en el móvil, con versiones móviles reducidas a medida. Esto podría no ser inmediatamente obvio para los usuarios finales con dispositivos de alta gama en redes rápidas y confiables. Pero puede hacer que los sitios web sean completamente inutilizables para personas con teléfonos con especificaciones más bajas o con poca conectividad.

 Hay dos razones por las cuales este es un gran problema. El primero es simple: lleva más tiempo entregar una imagen innecesariamente grande a través de la red. El segundo a menudo se pasa por alto: el dispositivo móvil tiene que trabajar duro para a) decodificar yb) reducir la escala de la imagen. Esto es costoso en términos de potencia de procesamiento y memoria ".

Pero no tiene por qué ser así. Ayudado en parte por la defensa del Grupo Comunitario de Imágenes Receptivas , la especificación HTML ahora facilita a los desarrolladores la creación de varias imágenes alternativas para diferentes tipos de dispositivos: para adaptarse a diferentes tamaños de pantalla (ventana gráfica), resoluciones (cantidad de píxeles) o capacidad del dispositivo.

La página HTML le dice al navegador cuál de estas imágenes seleccionar para pantallas de hasta un ancho máximo y si la imagen debe ocupar todo o solo parte del ancho de la pantalla.

Anteriormente, algunos desarrolladores usaban JavaScript para especificar el uso de diferentes imágenes, pero usar el elemento HTML < picture > debería ser más eficiente, reduciendo el código adicional y las solicitudes que ralentizan los tiempos de carga de la página.

Alex Painter:

"Entregar la imagen correcta para la ventana gráfica ahora es razonablemente sencillo. Hemos tenido consultas de medios de CSS para imágenes de fondo durante algún tiempo, pero hasta hace poco las imágenes a las que se hacía referencia en el HTML eran un problema mayor.

Ahora, tenemos la especificación de imágenes receptivas: el elemento < picture >, con el atributo srcset [conjunto de fuentes de imágenes alternativas] y los tamaños que permiten definir qué imagen debe entregarse para qué ancho de ventana (o para permitir el navegador para hacer la elección más apropiada de una selección de imágenes).

La especificación ahora está muy bien soportada por los navegadores, y los desarrolladores deberían idealmente usarla en lugar de usar JavaScript para lograr el mismo fin ".

¿Quién está usando imágenes receptivas?

Un vistazo al código fuente de los principales sitios web como Amazon, Facebook y la BBC confirma que ninguno está usando el elemento < picture > para mostrar imágenes receptivas.

¿Se beneficiarían de hacerlo? Servir diferentes imágenes para cada plataforma ofrece potencialmente varias ventajas:

  • Permite que el sitio web muestre una imagen más grande y de mayor resolución en el escritorio.

    Reduce el tamaño de la imagen y el peso total de la página, acelerando así el tiempo de carga móvil.

    Permite que el sitio móvil muestre una imagen ampliada en el dispositivo móvil.

Encontrar el mejor formato para tus imágenes

Los formatos más comunes para imágenes usadas en sitios móviles / compatibles con dispositivos móviles son JPEG 46%, PNG 28%, GIF 23% y SVG 1% según httpArchive .

Usar un formato de imagen inapropiado puede aumentar el tamaño del archivo y la calidad del efecto cuando las imágenes se escalan para diferentes tamaños de pantalla.

Hay dos tipos de imágenes web: raster y vector. El primero está compuesto de puntos (como una fotografía digital), mientras que el segundo está compuesto de líneas y formas. JPEG, PNG y GIF son ráster. SVG es un vector. SVG es un formato más reciente que no se utiliza con tanta frecuencia (aún), pero se recomienda para sitios de diseño que responden por este curso en Imágenes receptivas de Google y Udacity.

Hay pro y contras para cada uno, y cada diseñador web tiene una opinión diferente y formatos favoritos. Necesita investigar su propia política de empresa, pero en general:

JPEG es el más comúnmente utilizado para fotografías web
GIF es común para animaciones, así como gráficos simples, iconos y logotipos
PNG es común para gráficos de alta calidad, logotipos, iconos y otras ilustraciones y fotos con efectos gráficos
SVG es bueno para gráficos y logotipos, encabezados de página, cosas que están diseñadas por un ilustrador.
Para obtener más información sobre los tipos y tamaños de formato, consulte la guía de Google para  optimizar imágenes .

Alternativas a las imágenes tradicionales

Las páginas web se componen de muchas imágenes pequeñas, como iconos y botones. Si se realizan con imágenes GIF / PNG / JPEG individuales, todo se agrega al tamaño de la página y cada una requiere una solicitud de navegador individual, lo que puede ralentizar el tiempo de carga de la página.

Tres métodos que pueden ayudar a mantener el tamaño de la página y las solicitudes de imágenes son:

Sprites CSS : combina una colección de gráficos más pequeños en un solo archivo CSS. Los sprites NB Overloading con gráficos demasiados o demasiado grandes serán contraproducentes.
Fuentes de icono : es una biblioteca de iconos enviada como un único archivo.
Formas de CSS : son formas creadas con CSS, en lugar de una imagen tradicional

Técnicas de diseño web para mejorar el tiempo de carga percibido

Cuando haya recortado el peso de cada imagen, eliminado las imágenes innecesarias y optimizado el resto, pero la página todavía no se está cargando lo suficientemente rápido, ¿qué hace?

Asegúrate de que las cosas más importantes se carguen primero, dice Raluca Budiu:

"Cuando se carga una página, asegúrese de que el texto se cargue primero, para que las personas puedan comenzar a escanear el contenido. A medida que se cargan las imágenes, no baraje el contenido ya cargado: hará que los lectores pierdan su lugar en la página y, a veces, incluso harán clic en el enlace incorrecto porque el objetivo correcto se movió inesperadamente ".

Hay una diferencia entre el tiempo de carga percibido y el tiempo de carga real. Todo lo que le importa al usuario es que el contenido que está mirando esté disponible. No quieren mirar a una pantalla vacía mientras el buscador busca imágenes que nunca verán.

Hay tres técnicas comunes para lograr esto. Robert Gaines , un desarrollador de aplicaciones y web basado en Kansas, EE. UU. Explica:

 "1. La carga diferida usa JavaScript para detener la carga de imágenes y otros activos hasta que el contenido principal de una página web haya terminado de cargarse. La carga diferida reduce la cantidad de tiempo que demora el contenido principal de una página web, pero reduce la necesidad de recortar imágenes que de lo contrario ralentizarían una página web.

2. Lazy Loading carga activos cuando y como son necesarios. Así que el contenido se carga primero sobre el doblez, luego debajo del doblez a medida que el usuario se desplaza. Con las galerías de imágenes, como búsquedas de productos en sitios de venta minorista, se utilizan imágenes en miniatura, las imágenes más grandes solo se cargan cuando se hace clic en una miniatura correspondiente.

3. La carga progresiva de imágenes primero carga imágenes de baja calidad mientras se está procesando una página web y luego las reemplaza con imágenes de alta calidad después de que el contenido primario haya terminado de cargarse. La carga de imágenes progresiva equilibra el rendimiento con atractivo visual. A diferencia de la carga diferida, no deja que los usuarios esperen a que las imágenes secundarias se carguen después del contenido principal ".

Herramientas como Photoshop permiten que las imágenes se guarden como archivos JPEG progresivos, o PNG entrelazado, que se cargarán de la manera descrita.

Linkback: http://afiliadostop.net/index.php?topic=8933.0
0 Puntos
No Tienes Permisos Para Dar Puntos
Este tema no recibió puntos.

* Share Topic

Share via facebook Share via twitter

* Similar Topics

xx
Como optimizar socrates a moviles Ayuda

Iniciado por ibqjuan

3 Respuestas
1159 Vistas
Último mensaje mayo 05, 2015, 01:06:04 am
por Guillermo R.
xx
Cómo optimizar las imágenes para SEO. Parte II

Iniciado por Frank Rey

0 Respuestas
1255 Vistas
Último mensaje marzo 06, 2016, 05:31:11 am
por Frank Rey
xx
Cómo optimizar las imágenes para SEO. Parte I

Iniciado por Frank Rey

0 Respuestas
1162 Vistas
Último mensaje marzo 06, 2016, 05:23:52 am
por Frank Rey
xx
Cómo optimizar imágenes para la construcción de enlaces

Iniciado por Frank Rey

0 Respuestas
289 Vistas
Último mensaje marzo 16, 2018, 09:46:58 am
por Frank Rey