Cómo optimizar las imágenes en su sitio web de WordPress: una guía de paso por paso

Todos usamos imágenes e imágenes en general en nuestros sitios. Es inevitable hoy en día. Pero cuantas más imágenes cargamos, más influyen en la velocidad del sitio. Y un sitio lento puede conducir a muchos otros resultados negativos, que cubriremos brevemente en esta publicación. Por lo tanto, las imágenes pueden estar molestas si no las optimizamos, ya sea solas o con complementos. En este artículo, le mostraremos cómo deshacerse de los datos inútiles que se esconden en su WordPress de medios comprimiendo todas las imágenes sin afectar su calidad. Sus imágenes se verán iguales, solo su tamaño cambia.
Sin otras extensiones, descubramos las mejores formas de optimizar las imágenes en su sitio web de WordPress con el menor esfuerzo.
contenido
¿Qué es la optimización de imágenes?
¿Por qué necesitas la optimización de imágenes?
Cómo optimizar sus imágenes en su sitio web de WordPress
Optimizar las imágenes manualmente
Establezca la optimización de la imagen en el piloto automático
Cómo optimizar automáticamente sus imágenes de WordPress
Pruebas de optimización de imágenes: antes y después
Resultados antes de la optimización de imágenes
Resultados después de la optimización de imágenes
Otras formas de optimizar las imágenes
conclusión
¿Cuál es la optimización de la imagen al optimizar la imagen? Puede reducir todas las imágenes en su sitio de WordPress al tamaño mínimo, sin hacerlas visibles a simple vista.
Todos deberían prestar especial atención a la optimización de la imagen, porque es una de las formas más comunes para aumentar significativamente la velocidad de un sitio web. Lo que es bueno optimizar la imagen es que no requiere habilidades de desarrollo, por lo que es bastante fácil de lograr por cualquier propietario del sitio. Ahora, puede seguir cada imagen que cargue en su sitio y asegurarse de ajustarla y cambiarla manualmente, o puede usar un complemento que le optimice todas las imágenes en piloto automático. ¿Por qué necesitas la optimización de imágenes? Pero ahora hablemos un poco sobre por qué la optimización de imágenes es importante para su sitio y por qué no debería pensarlo dos veces antes de implementarla. El motivo principal para el que debe usar la optimización de imágenes en el sitio: su WordPress es que ayuda a mejorar Los tiempos de carga de la página en cada página web. Las imágenes pesan considerablemente, especialmente si las cobra en su dimensión completa. Es posible que no tenga en cuenta las consecuencias después de cada imagen cargada, pero con el tiempo, cada pequeño datos agregados a su sitio contribuye a una carga de página grande. Según Unbounce, las páginas que cobran más de dos segundos tienen una tasa de rechazo promedio del 9%, mientras que las páginas que duran cinco segundos tienen una tasa de rechazo del 38%. Esto se traduce en menos participación de los usuarios y menos tasas de conversión.
La optimización de imágenes mejora la clasificación de SEO. ¿Cómo es eso? Es solo una cosa de Google. Desde 2010, Google ha anunciado oficialmente que la velocidad de la página jugará un papel importante en el algoritmo de clasificación. Entonces, si tiene un sitio lento, las posibilidades de ver su sitio en la parte superior en serpientes caen. Lo que nos hace perder conversiones. Cuanto más bajo en Google, más disminuyen las conversiones. Si la clasificación SEO de su sitio mejora, entonces más espectadores o compradores ingresarán a su página y probablemente hará clic en un impulso. O, al menos, pase más tiempo en su sitio e interactúe con su contenido. Como puede ver, la optimización de la imagen está directamente relacionada con la velocidad del sitio, el SEO y las tasas de conversión. Un papel pequeño pero vital en esta cadena de negocios. La optimización de la imagen se puede hacer manualmente (tome una imagen y comprimirla siguiendo las mejores prácticas) o con un instrumento que se ocupará de todo el trabajo duro para usted. A continuación, discutiremos cómo puede optimizar automáticamente las imágenes de WordPress y evitar el trabajo adicional para hacerlo usted mismo. Cómo optimizar sus imágenes en su sitio de WordPress Optimizar las imágenes manualmente de todos modos, si es fanático del método “Hazlo usted mismo”, puede optimizar las imágenes … si tiene tiempo para ello. Es decir, si su perfil comercial implica el uso de muchas imágenes, entonces su trabajo será difícil, porque le llevará un tiempo precioso.
Puede cambiar el tamaño y cortar las imágenes usted mismo antes de cargarlas. Si desea hacer esto, es importante descubrir el tamaño máximo de mostrar sus imágenes para que no exceda el límite de tamaño que hará que las imágenes se vean pixeladas para sus visitantes. El tamaño máximo de la pantalla es en realidad la resolución más grande en la que La imagen se puede mostrar en un sitio, a la luz de todas las ventanas de visualización y pantallas de usuario que accederán a ella. Obtenga más información sobre cómo transmitir imágenes con las dimensiones correctas. Después de haber administrado la tarea menor de corte y cambio de tamaño, puede profundizar en la comprimir las imágenes con una herramienta en línea como Kraken o ImageSizer, que funciona tanto para JPG como para PNG. Encontrar el formato de imagen correcto también es importante, porque puede salvarlo. muchos megaoctets. Por ejemplo, el simple hecho de que use JPG para gráficos y logotipo puede costarle un espacio de disco adicional. ¿Por qué? Porque puede obtener el tamaño más pequeño posible de una imagen si la guarda en el formato correcto y esto depende del tipo de imagen. Si carga en gran medida imágenes con una amplia variedad de colores, JPG es el formato correcto. Pero si usa gráficos, ilustraciones o iconos en sus publicaciones (generalmente imágenes con solo unos pocos colores), es posible que desee cargarlos como PNG, porque este formato es mejor para mantenerlas en un tamaño mínimo. Si convierte una imagen PNG en un JPG, su tamaño aumentará y probablemente no parecerá claro. Es válido y viceversa. Smashing Magazine ha realizado algunas pruebas sobre cómo cambian las dimensiones para cada formato de imagen.
Establezca la optimización de imágenes en el piloto automático si ahorra más tiempo y la eficiencia total es lo que le importa, entonces simplemente puede instalar un complemento que hará todo lo anterior (y más) en segundos para usted. Optimole es un buen ejemplo de complemento fácil de WordPress con funcionalidad inteligente debajo del capó. En primer lugar, Optimole optimiza una imagen solo cuando el servidor lo solicita. Entonces, si carga una imagen, se optimizará cuando un usuario acceda a la página que la contiene correctamente. Después de instalar el complemento, solo debe dejar que haga su trabajo, pero no antes de establecer el método de optimización favorito-larga, mediano o bajo. En segundo lugar, el tamaño óptimo cambie cada imagen al tamaño óptimo para la ventana de vista de cada visitante, como para cargar rápidamente en cualquier dispositivo. Encontrará el tamaño y el tamaño perfectos según el tipo de dispositivo de cada visitante. En la misma nota, si la conexión del usuario es lenta, Optimole reducirá la calidad de la imagen para ese usuario, de modo que la página se cargará rápidamente y la imagen aparecerá rápidamente. En cuanto a nuestra experiencia con WordPress, este complemento viene con todas las características que un usuario necesita una herramienta de optimización de imágenes, todo envuelto y entregado a través de una interfaz simple y fácil de usar. Este es el tipo de complemento que solo está instalando y olvida que existe. Esto se debe a que funcionará solo en segundo plano, optando automáticamente por las imágenes, por lo que puede concentrarse en los proyectos más importantes de su negocio.
Cómo optimizar automáticamente sus imágenes de WordPress, le mostraremos cómo optimizar todas las imágenes en su sitio web de WordPress en AutoPilot. Todo lo que tiene que hacer es instalar un complemento, establecer sus preferencias y olvidarse de ello. Para hacer esto, instale y active Optimole de forma gratuita. Después de instalar y activar el complemento, debe registrarse por correo electrónico para generar una tecla API que ingresará en el tablero de WordPress. Cuando se confirme la tecla API, el complemento comenzará a funcionar. El siguiente paso es acceder a la configuración, activar las funciones que desea usar y seleccionar su nivel de compresión preferido. Puede ver a Optimole en el trabajo una vez que comience a cargar imágenes. Cada vez que suba una imagen, hará toda la compresión en el fondo sin intervenir o incluso notificarle al respecto. Si ya tiene imágenes en su sitio web de WordPress, Optimole las comprimirá y una vez que usted o sus usuarios las visiten. Transfiera sus imágenes originales a una nube y reemplace su conexión inicial con una personalizada después de que estén optimizadas. Las imágenes optimizadas son renderizadas por un CDN que las ofrece más rápido. Cuando visite una página con una imagen, notará que la imagen mostrará la URL personalizada de Optimole (derecha -clic -> Abra la imagen en la nueva pestaña). Los informes de imágenes optimizadas no aparecerán de inmediato, el complemento tarda unos minutos en actualizar los cambios. Para ver el progreso, vaya a Media -> Optimole.
También puede conectarse en el área del tablero en el sitio web de Optimole y consultar la sección de ancho de banda.
Pero antes de instalarlo, puede probar rápidamente el instrumento y mostrarle la condición de las imágenes que usa en su sitio. Optimole le dará un informe en el sitio sobre cómo mejorar las imágenes de su sitio y, por lo tanto, velocidad. Optimización de imágenes antes y después de ahora, para hacer algunas pruebas para ver cuán efectiva es la optimización automática de la imagen. WordPress, por defecto, también reduce las imágenes de alta resolución, pero veamos cómo puede reducirlas aún más con un enchufe de optimización de imágenes (que también adaptará cada imagen a una dimensión de pantalla máxima para que no aparezca en el visitante del dispositivo. de lo necesario). Entonces, haga un experimento antes y después, usando las mismas imágenes y vea Windows. Resultados Antes de la optimización de la imagen utilizando una prueba de prueba y un Veinte Veinte predeterminado, subimos algunas fotos de diferentes tamaños prestados. Incluí las imágenes en una publicación de blog regular, a través de un bloque de galería.

Ahora, si hace clic en cada imagen para ampliarla, notará que WordPress los ha definido. Entonces, las cuatro imágenes que subimos se redujeron de la siguiente manera: 7.47 MB ​​-> 676 KB 12.3 MB -> 762 KB 11.2 MB -> 384 KB 8 MB -> 794 KB Si carga la primera imagen en un tipo regular de publicación , sin la opción de ampliación, su tamaño de pantalla cambiará de 7.47 MB ​​a 452 kb.
WordPress, por defecto, redujo la imagen cargada en una sola publicación de 7.47 MB ​​a 452 kb. Si accede a la misma publicación de blog en el móvil, la imagen se reducirá a 92.61 KB. Por lo tanto, estos son los cambios que WordPress vale los valores por valores cuando accede a publicaciones de blog a través de escritorio y móvil. Puede ver cómo se comprime una imagen tanto para el tamaño completo como para la pantalla. Resultados Después de la optimización de la imagen ahora, tomemos un ejemplo concreto de cómo Optimol comprime sus datos ricos en datos. Tal como lo hice en la primera parte de la prueba (sin Optimole), creé un bloque de la galería cargando las mismas imágenes no optimizadas tomadas de Mystock.photos. Optimole tiene cuatro niveles de compresión. Si elige High, la compresión mantendrá la alta calidad de imagen posible. Si va con bajo, la compresión y la optimización serán más drásticas (porque reducirán el tamaño en mayor medida). Una vez que visita la publicación en el sitio web en vivo, Optimole inmediatamente toma el control y crea una alternativa comprimida para cada imagen que haga clic (cada imagen se puede ampliar). Con compresión de alta calidad, las imágenes se redujeron de la siguiente manera (estas son las mismas imágenes enumeradas en el mismo orden que en la prueba anterior): 7.47 MB ​​━> 557 KB 12.3 MB ━> 548 KB 11.2 MB ━> 220 KB 8 MB ━> 547 KB En el caso de compresión de baja calidad, los resultados son diferentes: 7.47 MB ​​━> 251 KB 12.3 MB ━> 269 KB 11.2 MB ━> 124 KB 8 MB ━> 302 KB Se parece a la primera imagen De la lista por nivel de compresión alto y bajo (nivel de calidad): nivel de alta calidad (557 kb)

Nivel de baja calidad (251 kb) a simple vista, puede ver que la calidad de la imagen no ha cambiado mucho. Ahora, si agrega una imagen a una publicación de blog sin la opción de ampliación, se reducirá automáticamente al tamaño máximo de visualización (el tamaño de pantalla máximo requerido para una publicación de blog). Por ejemplo, esta imagen única se convirtió de 7.47 MB ​​a 75.3 kb (compresión de alta calidad) mientras se muestra en una sola publicación de blog:

Imagen con una sola publicación comprimida a 75.3 kb 580 x 387 píxeles

Esto es bueno porque su servidor no tendrá que cargar el tamaño completo de la imagen cuando se prefiera un tamaño más pequeño. Pero esto está sucediendo en el escritorio. Para las pantallas móviles, Optimole creará versiones de imagen alternativas, incluso más pequeñas que su contraparte de escritorio. Entonces, si alguien le accede al sitio en su móvil, Optimole no proporcionará la versión de escritorio de la imagen que, incluso optimizada, aún se puede cargar en un dispositivo más pequeño. El complemento en realidad ofrece una alternativa móvil separada de esa imagen. Para ejemplificar, la misma imagen de la publicación en el blog de arriba se redujo a 20.15 kb para usuarios de teléfonos móviles (desde 7.47 MB ​​en el original).

Optimole utiliza métodos de compresión de pérdidas y pérdidas, que se establecen de acuerdo con el nivel de compresión que elija. Al perder la optimización, las imágenes no perderán datos significativos durante la compresión. Después de la optimización, se verán exactamente como su versión original. Por lo tanto, la optimización sin pérdida no reducirá en gran medida el espacio del disco, las diferencias de tamaño después de la compresión son casi cero. Por otro lado, hay una optimización de pérdidas, lo que en realidad reduce el tamaño de sus imágenes. Entonces, si desea que su base de datos sea mucho más fácil de lo que es ahora, puede optar por la optimización de pérdidas, porque sus visitantes no notarán la conversión. Otras formas de optimizar las imágenes Además del cambio de tamaño, hay varias otras formas hermosas de proporcionar imágenes más fáciles a los visitantes y mejorar el tiempo de carga del sitio. La carga perezosa es otro método agradable que ayudará a prevenir sus imágenes.

para ralentizar su sitio. Si tiene publicaciones o páginas ricas en imágenes, su exhibición en todo puede no ser una buena idea. La función de carga perezosa las mostrará gradualmente cuando el usuario ejecute la página. En cada desplazamiento, se muestra un nuevo lote de imágenes en el área visible de la pantalla del usuario, por lo que el servidor responderá mejor a todas las solicitudes. La red de entrega de contenido (CDN) es una característica que transmitirá sus imágenes a través de la ubicación del servidor más cercana al punto de acceso de sus visitantes, que se traduce en tiempos de carga más rápidos. Optimole viene con un servicio CDN integrado para sus imágenes que funcionan automáticamente. Cloudflare y StackPath son complementos independientes de WordPress que proporcionan servicios de CDN para toda su base de datos si necesita una optimización completa del sitio. Para guardar espacio en disco y mostrar archivos más ligeros, también puede convertir GIF en video. Si activa esta función en Optimole, iniciará automáticamente convertir cada archivo GIF que cargue. Los formatos de video disponibles son MP4 y WebM, y el complemento elegirá el más efectivo para cada caso particular durante la conversión. También hay algunas herramientas en línea que puede usar para convertir un GIF en MP4 antes de cargarlo en su sitio de WordPress. ¿Por qué se convierte? Porque los formatos GIF son más grandes que los formatos de video. El corte inteligente significa cortar el espacio o el fondo innecesario en una imagen y mantener el punto de interés.