homefinance blog
Las imágenes son uno de los activos más importantes en su sitio y deben ser una parte integral de su estrategia de contenido. Ayuda a contar una historia y comunicarse con los clientes en más que palabras. Pero, ¿qué sucede si no usa el tamaño de imagen correcto? ¿Qué sucede si esas imágenes no están optimizadas para pantallas móviles, que ahora es la forma más popular de acceder a Internet? ¿Cómo asegurarse de que sus fotos se estén cargando en un momento decente? Tenemos algunas buenas prácticas para optimizar imágenes y medir el rendimiento. Esta publicación le mostrará cómo remediar todos esos problemas de imagen, para que se vea muy bien en cualquier dispositivo y no afecte su rendimiento.
Por qué transmitir imágenes optimizadas para dispositivos móviles 1. Las imágenes afectan el rendimiento de las imágenes de WordPress de su sitio consumen una cantidad significativa de espacio en disco y ancho de banda, como puede ver en nuestro ejemplo a continuación, donde las imágenes ocupan el 48, el 25% del tamaño de mi contenido.
Verificar el tamaño del contenido de acuerdo con el tipo de contenido – Fuente: Pingdom
Cuando se trata de páginas móviles, la velocidad y el tamaño son importantes. Estamos en 2022 y no es suficiente tener solo una presencia móvil. La velocidad móvil del sitio de su marca debería convertirse en una prioridad. Cada agente de marketing necesita un “presupuesto de velocidad móvil”, porque los dispositivos móviles son la plataforma más utilizada: las personas usan sus teléfonos móviles para buscar, navegar y comprar más que nunca.
Pero, a medida que las marcas continúan invirtiendo en imágenes de alta calidad para sus sitios, arriesgan y ralentizan la velocidad del sitio. Si bien las imágenes pueden hacer que un sitio web sea más atractivo y más atractivo visualmente, puede ralentizar el tiempo de carga móvil, lo que lleva a menos conversiones y oportunidades de ingresos perdidas. Google ha realizado algunos estudios y descubrió que un segundo puede afectar hasta el 20% de sus conversiones. 1 de cada dos visitantes dejará su sitio móvil si tarda más de tres segundos en cargarse. Esto puede ser mucho dinero que va directamente a sus competidores. Impacto de un sitio móvil lento – Fuente: Piense con Google
Mary Ellen Coe-President Google Customer Solutions, también explica que las empresas deben considerar la velocidad de los sitios móviles como un motor en crecimiento. Los visitantes estarán más ansiosos por involucrarse y comprar en un sitio amigable de WordPress con dispositivos móviles. Además, veremos cómo afecta exactamente el rendimiento de la imagen la puntuación de rendimiento general. Para medir el rendimiento móvil, Lighthouse tiene en cuenta los siguientes seis valores:
Es posible que se pregunte dónde el problema es “el peso de las imágenes frente al tiempo de carga” entre estos KPI. Este problema no se mencionará explícitamente. En cambio, puede encontrar oportunidades para mejorar el rendimiento móvil relacionado con las imágenes en el informe del faro, a saber:
Ampliar correctamente las imágenes (implementar imágenes receptivas)
Codificar las imágenes de manera efectiva
Posponga las imágenes fuera de la pantalla (implementa la carga perezosa)
Servir imágenes en formatos de nueva generación, use WebP donde sea posible
Use formatos de video para contenido animado, convierta GIF en formatos de videosugie: al optimizar y comprimir imágenes, se acercará a la recomendación del faro y acercará los seis KPI al área verde. Esto tendrá un impacto positivo en la nota de rendimiento general. 2. Las imágenes móviles tienen un impacto diferente en el escritorio todos los días, cada vez más personas usan sus teléfonos inteligentes para acceder a Internet, lo que significa que si su sitio web no está optimizado, pierde millones (o incluso miles de millones) de clientes potenciales. La optimización no solo le dará una ventaja sobre los competidores que aún no lo han hecho, sino que también tiene muchos beneficios, como mejorar la experiencia del usuario, hacer que todo sea más rápido y más fácil de usar, lo que, a su vez, mejora la satisfacción del cliente.
Los dispositivos móviles proporcionan un tamaño de pantalla más pequeño que el escritorio o las computadoras portátiles, lo que significa que las imágenes deben dimensionarse para que se ajusten correctamente en el espacio de la pantalla. Cuando las imágenes no se redimensionan correctamente, el contenido es difícil de leer en pantallas pequeñas, reduciendo la experiencia del usuario. El siguiente gráfico ilustra perfectamente las preferencias de diseño para cada dispositivo:
Optimización de imágenes y texto para dispositivos móviles – Fuente: Google Search Central
Izquierda: el texto es pequeño y difícil de leer, y la pequeña imagen en la esquina superior izquierda no es atractiva.
Derecha: el contenido encaja perfectamente en la pantalla. La imagen principal también está bien escalada. Sentimos que quiero leer más y continuar el desplazamiento. Además, ¿escuchaste sobre la nueva actualización de experiencia en la página de Google? La actualización de la experiencia de la página de Google es el último factor de clasificación SEO. Incluye un conjunto de KPI que mide cómo los usuarios perciben la experiencia de interacción con su página web. ¿Y adivina qué? ¡Incluye compatibilidad móvil! La experiencia en la página que ofrecerá determina su posición en la clasificación en Google, por lo que es otra razón crucial para optimizar su contenido móvil. Importancia de compatibilidad con SEOS-Source móvil: Señales de búsqueda para la experiencia de la página
Por lo tanto, es más importante que nunca que el diseño de su sitio web también esté adaptado para dispositivos móviles. ¿Quiere saber si su sitio es rápido en su móvil? ¿Tiene curiosidad por saber qué imágenes afectan más su actuación? Esto nos lleva a nuestra próxima sección. Cómo medir el impacto de las imágenes móviles Hay cuatro herramientas de rendimiento populares que puede usar para medir el impacto de las imágenes en la velocidad móvil, a saber:
Google PageSpeed Insights (PSI)
Gtmetrix
Pingdom
Consola de búsqueda de Google
Para todos, simplemente ingrese una URL para probar el tiempo de carga de la página, ejecute el análisis y encuentre los bloqueos. Proporcionemos una descripción general de cada uno de ellos.
1. Google PageSpeed Insights PageSpeed Insights es una herramienta gratuita lanzada por Google para medir su rendimiento de su sitio de WordPress en dispositivos móviles y de escritorio. Los informes se basan en la tecnología del faro y sugieren cómo mejorar el rendimiento de una página. El PSI ayuda a medir vitales web básicos, un conjunto de factores específicos que Google considera importantes en la experiencia general de una página web. No verá ningún valor que indique expresamente nada sobre la optimización de imágenes móviles. En su lugar, Lighthouse verifica sus páginas con las mejores prácticas de rendimiento móvil y proporciona una lista de optimizaciones de imágenes:
Lista de optimizaciones de imágenes recomendadas por Lighthouse – Fuente: PSI
¿Le gustaría aprender más sobre cómo mejorar los valores del faro? WP Rocket escribió una guía detallada sobre cómo mejorar los vitales de la web central. 2. GTMETRIX GTMTRIX también es una herramienta para analizar el rendimiento del sitio creado por GT.NET. La misión de GTMetrix es analizar el rendimiento de su sitio y brindarle una lista de consejos útiles para mejorarlo.
El KPI principal medido por GTMTRIX es similar al PSI: encontramos una nota general, los tres vitales centrales y los otros valores del faro. Además, puede ver el tiempo de carga completo y los valores TTFB.
Gtmetrix le dice cómo el contenido de la página se divide en imágenes, videos, JS, CSS, etc. Luego, para identificar qué imágenes deben optimizarse, puede usar la sección de cascadas. Seleccione la pestaña “Imágenes” para verificar qué imágenes deben comprimirse o redimensionarse más.
Gráfico de cascada para imágenes – Fuente: Gtmetrix
Nota: Para ejecutar una prueba móvil en particular en GTMTRIX, necesitará la versión Pro. Solo entonces puede tener acceso a pruebas móviles, tanto a través de una solución de hardware real. 3. Pingdom Pingdom puede informar si se detiene un sitio web debido a la división de la red o falla de los servidores DNS en cualquier parte del mundo. Monitoree la condición de su sitio web y su rendimiento (con una nota de A a F). Además de la nota de rendimiento general, los KPI medidos principales son del tamaño de la página, el número de solicitudes HTTP y el tiempo de carga. Una de las secciones interesantes es “el tamaño del contenido de acuerdo con el tipo de contenido”. A partir de ahí, puede ver qué ocupa la mayor cantidad de espacio en su página: imágenes, código, etc.
Tamaño del contenido según el tipo de contenido – Fuente: Pingdom
Nota: Al igual que GTMetrix, necesitará la versión Pro para probar su sitio en su móvil. 4. La consola de búsqueda de Google, incluso si no es el rendimiento en sí, la herramienta de prueba para dispositivos móviles de consola de búsqueda es una manera fácil de probar si una página en su sitio es compatible con dispositivos móviles.
Fuente: Los resultados de la prueba de la consola de búsqueda de Google incluyen los siguientes elementos:
Una captura de pantalla de cómo se muestra la página para Google en un dispositivo móvil
Una lista de cualquier problema de uso móvil que pueda afectar a un visitante que visita su sitio en dispositivos móviles, como pequeñas dimensiones de fuente (difícil de leer en un móvil) o el uso de flash (no aceptado por la mayoría de los dispositivos móviles).
Recibirá una respuesta sí o no con otros recursos e informes que puede usar para remediar los problemas. Con dispositivos móviles
Para optimizar sus imágenes móviles en el bloque, simplemente vaya al panel de Imagify: Media → Optimizar a granel, para que pueda optimizar todas las imágenes de su sitio con un solo clic. Modo manual: use un editor como WordPress Biblioteca o herramientas nativas de Windows/Mac para cambiar su tamaño de sus imágenes. Esto puede consumir mucho tiempo si tiene muchas imágenes. Referencia manual a una imagen – Fuente: Biblioteca de WordPress
¿Cómo crear más versiones de diseño para dispositivos móviles?
Un buen consejo, si su proyecto web aún no ha comenzado, sería construir todo su sitio directo para dispositivos móviles. Es más probable que el frotar aparezca en pantallas más pequeñas, porque tiene muchas cosas que cabe en una pantalla más pequeña: imágenes, texto, videos, urgencias y más. De hecho, es más fácil confiar en el diseño móvil y luego aplicarlo a la versión de escritorio, en lugar de al revés. Para tener un diseño móvil, debe priorizar las opciones de menú importantes, hacer todo lo fácil de alcanzar, incluidas imágenes y galerías, resaltar el CTA principal y proporcionar funciones de filtración utilizables. Solución: use un generador de página de WordPress que le permita crear un diseño de escritorio y móvil diferente. Veamos un ejemplo con un elemento en el que podemos mostrar diferentes tamaños de imagen en el móvil:
Función receptiva – Fuente: Elementor Sitio web Builder
También hay una pestaña dedicada “receptiva” que le permite elegir deshabilitar cualquier sección (incluidas las imágenes) en el móvil:
La pestaña Receptiva y la sección de visibilidad móvil – Fuente: Elementor Sitio web Builder ¿Cómo encontrar el mejor tamaño de archivo de tamaño? No hay reglas concretas sobre el mejor tamaño del archivo en el móvil. Simplemente queremos que el navegador cargue la imagen correcta donde sea que el visitante esté en el escritorio o el móvil. Hay dos criterios a considerar: tamaño de la ventana de vista de escritorio (1280 px), tableta (640 px) y móvil (320 px)
Tamaño de imagen en relación con la ventana
Algunas herramientas de diseño, como el boceto, vienen con estructuras alámbricas y plantillas prefabricadas para su uso para cada dispositivo. A continuación, seleccionamos la plantilla de retrato móvil y, como puede ver, viene de forma predeterminada con un tamaño de 320*1024.
Diseño móvil – Fuente: plantillas de boceto
Como regla general, también puede seguir el diseño receptivo desde ImageKit:
Ejemplo de informe en Desktop vs Mobil – Fuente: ImageKit
2. Comprima las imágenes móviles después del cambio de tamaño, la compresión de la imagen es la segunda técnica de alto nivel que debe seguir para cargar imágenes móviles más pequeñas. Comprimir una imagen para dispositivos móviles simplemente significa reducir el tamaño de su archivo. Esto se logra minimizando la dimensión en la imagen de la imagen sin perder nada de su calidad. ¡Lo mejor de ambos mundos! Aquí hay algunas soluciones rápidas y eficientes para comprimir las imágenes móviles.
Use un complemento de WordPress:
Optimole: ofrece compresión, carga perezosa y corte avanzado
Imagify: optimiza y comprime imágenes con un solo clic. Imagify reduce el tamaño del archivo, pero no comprometa la calidad, como puede ver a continuación:
| Imagen original sin tamaño de archivo de imagen: 335 kb | Imagen comprimida con Imagify Ultra Mode New Dimension Archivo: 45 kb % de ahorro: 86.57 % | |||||||||
 ! Compresión de imagen – Fuente: versión de escritorio de Imagify  3. Elija un formato de imagen efectivo para la elección móvil de formato de archivo adecuado tendrá un impacto positivo en la reducción del tamaño de la imagen en el móvil. JPG no siempre es la respuesta. Intente usar el formato webp tanto como pueda. Este formato moderno ahorra en promedio con ~ 25% más de espacio de almacenamiento que los archivos JPEG o PNG. Otra gran cosa sobre el formato WebP es que la biblioteca de WordPress ahora la acepta (incluso si siempre tiene que convertir sus imágenes en la webp). Si desea obtener más información, lea nuestra guía detallada que explique cómo convertir sus imágenes en formato webp. Vamos a superar un ejemplo práctico. Las tres imágenes a continuación tienen la misma resolución: 600 x 600 px. Sin embargo, descompongamos las dimensiones de acuerdo con cada formato: JPG es 99.8 KB PNG tiene 217 kb WebP tiene 56.2 KB (lo que lo convierte en el formato de archivo más fácil sin comprometer la calidad en el móvil). Comparación de formatos con tamaño en dispositivos móviles – Fuente: ImageKit Para resumir, Google ha hecho una lista de los más efectivos formados de acuerdo con el tipo de imágenes que usa en su móvil:  Lista de corriente de Google para elegir la fuente de formato correcta: piense con GoogleLument para usar el formato WebP en las imágenes móviles: Use el complemento Imagify, si desea convertir las imágenes de su sitio en WordPress Direct WebP. Para hacer esto, vaya a Configuración → Imagen y ejecute en la sección “Formato de optimización WebP”:  Conversión de imagen a WebP – Fuente: Imagify  4. Implementar la carga perezosa La implementación de la carga perezosa en sus imágenes ayudará a su página móvil a cargar más rápido. ¿Por qué? Porque la carga perezosa pospone la carga de elementos grandes (como imágenes) que no se necesitan inmediatamente en el móvil. Esto también abordará la recomendación “Publicar las imágenes fuera de pantalla en su sitio” en Google PageSpeed Insights. Soluciones para implementar el script de carga perezosa: Use uno de estos complementos gratuitos de WordPress: Carga perezosa por WP Rocket: incluso puedes elegir qué fotos no quieres “cargar perezoso”. El complemento muestra imágenes y marcos de iframe en una página solo cuando se ve en su visitante, ¡guardando muchas solicitudes HTTP! Óptimo Optimizar automáticamente  2. Use un complemento premium que aumente su rendimiento general: Complemento de caché de cohetes WP, con optimización CSS y JS y, por supuesto, características integradas de carga perezosa:  Pestaña de medios – Fuente: WP Rocket Dashboard 5. Use una red de entrega de contenido de imagen CDN (CDN) son un elemento indispensable para optimizar las imágenes móviles. ¡Según Web.dev, la transición a una imagen CDN puede traer ahorros del 40-80% en el tamaño de la imagen! Gtmetrix ilustra el principio de CDN bastante bien. Como puede ver, un CDN crea una distancia de conexión más corta entre el usuario y el servidor original. Esta conexión más rápida es posible gracias a un servidor de Londres, por ejemplo. La solución para implementar un CDN: use un servicio como RocketCDN y/o CloudFlare, para que todos puedan acceder rápidamente a su contenido, independientemente de su ubicación. RocketCDN ayudará a que sus imágenes se entreguen más rápido en los dispositivos de escritorio y móviles. Hicimos una prueba en GTMetrix y podemos ver que ahorramos algo de tiempo de carga (casi 1 segundo) gracias al Rocketcdn.  Disminuir el tiempo de carga total después de usar RocketCDN – Fuente: GTMetrix 6. No pase por alto las conexiones lentas del móvil, otra razón para optimizar las imágenes es considerar a los usuarios móviles que aún tienen 3G. Debe crear imágenes más pequeñas para tales usuarios. Con una conexión lenta, las imágenes pueden tener más dificultades para mostrarse rápidamente. Para corregir las imágenes correctamente, comprimirlas e implementar la carga perezosa para aquellos debajo del pliegue. Optimización de las imágenes móviles con Imagify Si tiene muchas imágenes en dispositivos móviles, puede llevar mucho tiempo cambiar el tamaño y comprimir cada una de ellas manualmente. ¿Imagina si, en la parte superior, quieres convertirlos todos en formato WebP para aumentar el rendimiento? ¡Este es exactamente el momento en que Imagify entra en juego! En primer lugar, Imagify le permite cambiar el tamaño y comprimir imágenes existentes y nuevas en dispositivos móviles. La compresión a granel tiene lugar en tres niveles diferentes: normal, agresivo y ultra: dependiendo de la forma en que use, puede ahorrar mucho en el tamaño del archivo de imagen. Recuerde que podrá reducir el tamaño de sus imágenes sin perder ¡calidad! Entonces Imagify le permite convertirlos todos en el formato WebP simplemente marcando estas dos casillas. Esto hará que el tamaño del archivo de imagen sea más pequeño en dispositivos móviles (y escritorio). Formato web de la imagen Hace unas semanas, hicimos una lista de los mejores complementos de optimización de imágenes que puede usar para acelerar su sitio web de WordPress. Permítame compartir sus resultados interesantes que he obtenido con Imagify: Realizo una auditoría de velocidad usando Imagify y esta imagen de 450 kb: estas fueron las conclusiones clave sobre cómo Imagify ayudó a reducir las imágenes móviles: Mi foto todavía se veía genial después de la compresión Guardamos el 55% del tamaño del archivo
Además, Imagify soluciona algunos de los problemas informados por PSI. Eche un vistazo a nuestros problemas relacionados con las imágenes antes y después de usar el complemento: | ||||||||||
| mi sección de diagnóstico antes de | mis auditorías después de imagificar | |||||||||
|
 ! Es bueno. Imagify también tiene una aplicación basada en la web para el cambio de tamaño y compresión de bloques. Simplemente tire y coloque las imágenes: Imagify las comprimirá y estará disponible para descargar en las próximas 24 horas. Mientras usaba la aplicación basada en la web Imagify, noté dos cosas: Una de mis imágenes PNG se ha redimensionada y comprimida con 85% (usando el modo de compresión ultra)  El otro se redujo en un 30% (usando el modo normal)  Compresión de imagen – Fuente: Instrumento web de imagen     
Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.
Tags Cómo optimizar las imágenes para dispositivos móviles (2022) Check AlsoCum să îmbunătățești designul site-ului web utilizând Logo Carusel și Testimonial CaruselCum să îmbunătățești designul site |
