En este artículo, trataremos de encontrar el mejor plugin de compresión de imágenes de WordPress.
El repositorio de WordPress está lleno de plugins gratuitos y también hay algunos plugins premium disponibles para casi todo, ahora depende del usuario seleccionar uno según sus necesidades.
En este artículo trataremos de encontrar el mejor plugin de compresión de imágenes de WordPress. Consideraremos algunos de los plugins más famosos disponibles para comprimir las imágenes.
Como ya sabes, las imágenes en cualquier sitio web son el mayor contribuyente al tamaño del sitio web, por lo tanto es importante que las imágenes están optimizadas y comprimidas correctamente, ya que tendrán un impacto en la experiencia del usuario y seo.
Reducir el peso de las imágenes es una parte esencial a la hora de optimizar WordPress para acelerar la velocidad de carga.
La mayoría de los propietarios de sitios web no conocen las opciones del optimizador de imágenes de WordPress disponibles para ellos, o ignoran el hecho de que las imágenes aumentan el tamaño de su sitio porque sienten que el elemento visual que añaden las imágenes es importante para el compromiso del usuario.
Esto es cierto, por supuesto, pero el rendimiento del sitio se resiente.
Gracias a algunos de los mejores plugins del optimizador de imágenes de WordPress que se enumeran a continuación, sin embargo, usted puede obtener lo mejor de ambos mundos.
Puede optimizar sus imágenes utilizando plugins para que se carguen más rápido y no tengan un impacto negativo en el rendimiento de su sitio.
Con toneladas de diferentes plugins del optimizador de imágenes de WordPress, puede ser difícil seleccionar el perfecto para sus necesidades. Es exactamente por eso que hemos probado y seleccionado los mejores optimizadores de imágenes de WordPress.
Hemos preseleccionado los mejores plugins del optimizador de imágenes de WordPress que los propietarios de sitios deberían tener en cuenta.
Ahora echemos un vistazo para ver exactamente por qué estos plugins en particular son mejores que el resto, y en qué áreas de la optimización de imágenes de WordPress se destacan en particular.
Resumen contenido
- 0.1 Mejores plugins para comprimir y optimizar imágenes en WordPress
- 0.1.1 Optimole
- 0.1.2 Imagify
- 0.1.3 Smush Image Compression and Optimization
- 0.1.4 EWWWW Image Optimizer
- 0.1.5 ShortPixel Image Optimizer
- 0.1.6 Robin Image Optimizer
- 0.1.7 reSmush.it
- 0.1.8 Imsanity
- 0.1.9 Hammy
- 0.1.10 PB Responsive Images
- 0.1.11 BJ Lazy Load
- 0.1.12 WP Rocket
- 0.1.13 SEO Optimizer Pro
- 0.1.14 Optimus
- 0.1.15 Compress JPEG & PNG images
- 0.1.16 Plugin Compress JPEG & PNG Images para WordPress
- 0.1.17 Plugin EWWW Image Optimizer
- 0.1.18 Imsanity
- 0.1.19 ShortPixel Image Optimizer
- 0.1.20 WP Smush
- 0.1.21 Resultados
- 0.2 ¿Prefieres optimizar imágenes de WordPress sin usar plugins?
- 0.3 Entonces, ¿cuál es el mejor optimizador de imágenes para WordPress?
- 1 Imagify vs WP Smush vs ShortPixel: ¿Cuál es el mejor para optimizar las imágenes de WordPress? Comparación de la cabeza a la cabeza
- 1.1 Por qué es inteligente optimizar las imágenes de tu sitio WordPress
- 1.2 Imagify vs WP Smush vs ShortPixel: En pocas palabras
- 1.3 Imagify vs WP Smush vs ShortPixel: Una comparación completa
- 1.4 Beneficios de la optimización de imágenes
- 1.5 Cómo Optimizar las Imágenes para el Desempeño?
- 1.6 ¿Cuáles son los SVGs y los beneficios de usarlos?
- 1.7 Construya para Móviles
- 1.8 Mejores prácticas para el uso de imágenes en la Web
- 1.9 Reflexiones finales
Mejores plugins para comprimir y optimizar imágenes en WordPress
Para encontrar el mejor plugin de compresión de imágenes, tendremos que establecer algunos parámetros y en este caso lo serán:
- Tamaño de la imagen después de la compresión.
- Calidad de imagen después de la compresión.
- Características disponibles en el plugin.
- Vamos a probar los plugins usando tres imágenes diferentes de diferentes tamaños.
- El tamaño de las imágenes que utilizaremos son 250*250, 640*426, 800*600.
Las imágenes que usaremos son:
Tamaño de la imagen: 250*250 (Yo uso WP Smush, por lo tanto esta imagen ya está comprimida usando WP smush y no es la imagen por defecto que usamos para probar el plugin)
Tamaño de la imagen: 640 × 426 (Yo uso WP Smush, por lo tanto esta imagen ya está comprimida usando WP smush y no es la imagen por defecto que usamos para probar el plugin)
Tamaño de la imagen: 800*600 (Yo uso WP Smush, por lo tanto esta imagen ya está comprimida usando WP smush y no es la imagen por defecto que usamos para probar el plugin)
Tamaño predeterminado de las imágenes:
- 250*250 = 34 kB
- 640*426 = 77 kB
- 800*600 = 75 kB
No cambiaremos nada en la configuración predeterminada de estos plugins durante la prueba.
Optimole
Optimole es uno de los plugins de optimización de imágenes más fáciles de encontrar. Tiene una interfaz simple y limpia que incluso los nuevos usuarios de WordPress pueden entender fácilmente.
Todo lo que tienes que hacer es instalar el plugin y éste hace la mayor parte del trabajo en segundo plano, optimizando las imágenes de tu sitio web y mostrándolas todas en el panel de control.
Proporciona todos los ajustes para la imagen desde el tamaño hasta la calidad de compresión.
La mejor parte de este plugin en particular es que tiene un sistema de monitorización en profundidad para los usuarios. Lo que les muestra exactamente lo que está pasando con las imágenes, cuánto han sido comprimidas, para que conozcan el impacto de la optimización.
El plugin es gratuito para imágenes de hasta 1 GB en un mes. Si tiene un sitio web con más imágenes, puede optar por el plan de $29 al mes de 15 GB. Considerado como uno de los plugins más completos, es perfecto para cualquier usuario que desee optimizar fácilmente las imágenes de su sitio web.
Imagify
Imagify es probablemente uno de los plugins más simples de esta lista. El plugin tiene un módulo bien categorizado que es fácil de usar con opciones como Configuración, Opciones de visualización y Optimización.
Usted sabe exactamente qué hacer clic para obtener la información que necesita sin tener que pasar por diferentes menús.
La plataforma ofrece a los usuarios tres configuraciones diferentes para la optimización de la imagen: Normal, Agresivo y Ultra. Cada uno de los cuales comprime más la imagen de Normal a Ultra.
Usted tiene la opción de especificar el tamaño tal como el ancho de las imágenes que desea para que el plugin redimensione automáticamente todas las imágenes al tamaño específico
Al igual que Optimole, usted obtiene un límite mensual de 1 GB de forma gratuita, después de lo cual hay planes que comienzan desde $4.99 por mes. Este plugin es ideal para usuarios que desean opciones de compresión adicionales con una interfaz fácil de usar.
Smush Image Compression and Optimization
Smush Image Compression and Optimization ofrece una elegante interfaz que proporciona a los usuarios toda la información básica que necesitan.
Les da la opción de elegir si quieren optimizar tanto las fotos antiguas como las nuevas o elegir una de las dos. Obviamente, como desea mejorar el rendimiento de su sitio web, optará por ambos.
También te indica, una vez realizada la optimización, cuánto espacio has acabado ahorrando.
Smush permite a los usuarios optimizar y cambiar el tamaño de las imágenes, mientras que también tiene una opción de optimización masiva. Esto les permite optimizar hasta 50 imágenes a la vez para el plan gratuito.
Ahorrándoles tiempo. Cuando no se utiliza la opción de envío masivo, no hay límite en el número de imágenes que se pueden optimizar de forma gratuita.
EWWWW Image Optimizer
EWWWW Image Optimizer no tiene las interfaces más fáciles de usar.
No sólo parece anticuado, sino que también tiene numerosas pestañas con muchas opciones para que los usuarios lo revisen.
Pero para la mayoría de los usuarios la configuración por defecto con la que viene el plugin será suficiente, por lo que no tendrá que preocuparse demasiado por la configuración.
Los usuarios tienen acceso a optimizar una cantidad ilimitada de imágenes con el plugin de forma gratuita. Ofrece optimización no sólo para imágenes sino también para archivos PDF.
Puede seleccionar la cantidad que desea comprimir para cada archivo de modo que pueda tener una configuración de compresión para un JPG diferente de la que tendría para un PNG y así sucesivamente.
Sin embargo, hay un problema, el plugin utiliza su servidor para hacer todo el proceso, lo que puede ponerlo a prueba si decide optimizar muchos archivos a la vez.
Este plugin es perfecto para usuarios que desean una plataforma gratuita que les permita optimizar las imágenes para su sitio web.
ShortPixel Image Optimizer
ShortPixel Image Optimizer se considera un plugin de gama media cuando se trata de la interfaz.
Se parece mucho a la interfaz que se encuentra en Imagify, pero con muchas más pestañas y opciones, que para algunos pueden ser un poco más complicadas. Usted tiene la opción de seleccionar cuánto desea optimizar sus imágenes desde un rango de Pérdida, Brillante, hasta Sin Pérdida.
El plugin también tiene características para optimizar la integración de PDF y Cloudflare. ShortPixel se puede utilizar gratuitamente hasta 100 créditos de imagen al mes.
Si planeas optimizar más imágenes en él, el plan comienza en $4.99 por hasta 5,000 créditos de imagen en un mes.
Esta plataforma es ideal para usuarios que tienen conocimientos previos sobre el redimensionamiento y la optimización de imágenes y que desean sacar el máximo provecho del proceso.
Robin Image Optimizer
Robin Image Optimizer es otro popular optimizador de imágenes que optimiza automáticamente las imágenes que se cargan y puede reducir el tamaño hasta en un 80% manteniendo la calidad.
La plataforma trabaja en segundo plano para optimizar cualquier imagen que subas.
El tamaño máximo de la imagen que puede subir para su optimización es de 5 MB en la plataforma. También permite a los usuarios con una opción de optimización manual de la masa para optimizar las imágenes en masa en el sitio web.
reSmush.it
reSmush.it permite a los usuarios optimizar las imágenes individualmente y en masa. La interfaz puede parecer un poco complicada, pero después de un solo uso, se vuelve más fácil.
El plugin optimizará las imágenes automáticamente y le permite subirlas individualmente o en grupo. Lo único es que puedes subir imágenes de menos de 5 MB.
El plugin no te permite elegir un tamaño de compresión específico, lo que puede ser un problema para los usuarios que quieren ver cuánto más pueden optimizar una imagen. Pero en general, el plugin es ideal para cualquier usuario que desee un simple optimizador de imágenes de WordPress.
Imsanity
Imsanity de su imagen de icono puede parecer extraño, pero está lejos de serlo.
Es un plugin fácil de usar que funciona automáticamente para cambiar el tamaño de las imágenes que subes a tu sitio de WordPress.
Como dice el plugin, redimensiona las imágenes a un tamaño más «sano». También ofrece a los usuarios una opción de redimensionamiento masivo para que pueda redimensionar fácilmente las imágenes existentes en su sitio casi al mismo tiempo. El plugin funciona en segundo plano, todo lo que tienes que hacer es asegurarte de que los ajustes están de acuerdo con tus necesidades y dejar que el plugin haga todo el trabajo.
Una característica única que Imsanity le ofrece para convertir archivos BMP a JPG, haciendo que sea más fácil reducirlos.
Hammy
Hammy trabaja para tomar las fotos que usted ha publicado en su sitio web para redimensionarlas y optimizarlas a un tamaño más pequeño.
Se asegura de que las imágenes estén optimizadas tanto para los usuarios de escritorio como para los usuarios móviles por igual, de modo que ambos usuarios obtengan la experiencia óptima cuando visiten su sitio web.
El plugin funciona tanto para las páginas como para los mensajes, pero no optimiza las imágenes en los mensajes personalizados. Así que si planeas incluir muchos mensajes personalizados, puedes optar por otro plugin del optimizador de imágenes de WordPress.
PB Responsive Images
PB Responsive Images es ligeramente único, ya que utiliza un grupo de la comunidad en lo que respecta al redimensionamiento.
El plugin optimiza automáticamente la imagen a la que se propone en el grupo Responsive Images Community.
El plugin es un poco más complicado de usar, por lo que no se recomienda para principiantes.
Pero sí proporciona a los usuarios suficientes funciones para garantizar que todas las imágenes de su sitio web estén optimizadas para que el sitio funcione correctamente.
BJ Lazy Load
El objetivo principal de BJ Lazy Load es hacer que los sitios carguen más rápido mientras se ahorra ancho de banda a los usuarios.
Como su nombre lo indica, le da la opción de carga perezosa, colocando un marcador de posición en lugar del contenido mientras que también carga perezosa las imágenes seleccionadas.
Para los usuarios que han usado Lazy Load, encontrará que este plugin es un poco más fácil ya que la interfaz es menos complicada pero aún así le ofrece más opciones de personalización.
WP Rocket
WP Rocket es un plugin completo que trabaja para mejorar el rendimiento general de su sitio web junto con la carga de imágenes perezosas y la caché.
Mientras que el plugin no es adecuado para cualquiera que quiera cambiar el tamaño de las imágenes, lo que hace es ofrecer una opción de carga perezosa.
Con el plugin instalado tienes una configuración de un solo clic para que las imágenes no se carguen hasta que el usuario se desplace hacia él. Esto permite que la página web cargue imágenes y contenido que están en la vista del usuario más rápido.
SEO Optimizer Pro
SEO Optimizer Pro ayuda a asegurar que sus imágenes son amigables para SEO. Mientras que ofrece reemplazar la etiqueta alt y el título de las imágenes, también redimensiona las imágenes para que se carguen más rápido.
El plugin tiene una interfaz única que permite a los usuarios controlar el tamaño y otros elementos de la imagen para que estén completamente optimizados para SEO y rendimiento.
Optimus
Optimus puede reducir el tamaño de su archivo de imagen hasta un 70%, lo que le ahorra mucho espacio y puede mejorar drásticamente el rendimiento de carga de su sitio, en lo que respecta a las imágenes.
El plugin funciona en segundo plano tan pronto como las imágenes se cargan en el sitio web.
El plugin viene con tres opciones diferentes, la versión gratuita le permite subir imágenes con un tamaño máximo de 100 KB, que puede ser pequeño para la mayoría de las imágenes de hoy.
Lo que significa que usted tendrá que ir con el HQ ($29 al año) o HQ Pro ($149 al año), los cuales permiten un tamaño máximo de imagen de 10 MB.
Compress JPEG & PNG images
Con sólo una página de configuración, Compress JPEG & PNG images facilita a los usuarios la optimización de imágenes para su sitio web. Tan pronto como subes una imagen a tu sitio web, el plugin se pone a trabajar y optimiza la imagen para que el rendimiento de tu sitio web no se vea afectado.
Usted tiene la opción de no sólo comprimir sino también redimensionar las imágenes a un tamaño específico que desee.
También viene con soporte para WooCommerce, lo que facilita el cambio de tamaño de las imágenes de los productos en su sitio de comercio electrónico.
El plugin es gratuito para un máximo de 500 cargas al mes. Después de lo cual, hay un cargo de $.009 por imagen. Esta plataforma es para cualquiera que busque un plugin diminuto y sencillo para la optimización de imágenes.
Plugin Compress JPEG & PNG Images para WordPress
Compress JPEG & PNG Images ofrece una manera fácil de acelerar un sitio web.
Una vez que subas nuevas imágenes a un sitio web, el plugin optimizará todas ellas automáticamente.
Por otro lado, puedes utilizar el plugin para optimizar las imágenes existentes en la biblioteca de medios de su sitio WordPress.
Podrá optimizar múltiples imágenes existentes en su sitio a la vez.
Todo lo que tiene que hacer es hacer uso de la llamada opción de optimización de volumen fácil.
Es bastante fácil cambiar el tamaño de las imágenes originales grandes en un sitio web con el plugin.
Tu trabajo consiste en establecer el ancho y la altura máximos para una imagen que necesita ser optimizada.
Eso es todo.
Sin embargo, lo más importante es que las imágenes comprimidas por el plugin no pierdan su calidad.
Para poder usar este plugin tendrá que obtener la clave de la API, la cual obtendrá de forma gratuita.
Limitan el número de archivos que puede comprimir cada mes, que es de 500, incluyendo todos los diferentes tamaños de la misma imagen, usted puede elegir qué tamaños de imagen debe ser comprimido.
Da la opción de comprimir imágenes antiguas.
Tamaño Después de comprimir las imágenes con Compress JPEG y PNG Images
- 250*250 =27 kB (Impacto en la calidad de imagen = ninguno)
- 640*426 = 52 kB
- 800*600 = 60 kB
Plugin EWWW Image Optimizer
EWWWW Image Optimizer es otro gran plugin gratuito de optimización de imágenes WordPress.
Las imágenes se pueden optimizar de dos maneras diferentes.
El plugin te da la oportunidad de elegir entre opciones de alta compresión o de compresión perfecta de píxeles. Con EWWWW Image Optimizer podrá optimizar todas las imágenes en un sitio de WordPress de forma rápida y sencilla.
¿Le gustaría optimizar múltiples imágenes en el sitio de WordPress a la vez?
Todo lo que tienes que hacer es aprovechar la opción de Optimización a granel.
El plugin también le da una excelente oportunidad para cambiar el tamaño de todas las imágenes de su sitio web.
Aproveche la opción de redimensionamiento automático y el plugin hará un gran trabajo para usted.
Como resultado, las imágenes se redimensionarán automáticamente y se ajustarán al tamaño de la página y del dispositivo.
Proporciona la opción de Optimización Masiva.
Proporciona muchas otras opciones predeterminadas.
Tamaño Después de comprimir las imágenes con EWWW Image Optimizer
- 250*250 =33 kB (Impacto en la calidad de imagen = ninguno)
- 640*426 =74 kB
- 800*600 =74 kB
Imsanity
Optimización de imágenes masivas.
Funcionalidades básicas sin límites.
Tamaño Después de comprimir las imágenes con Imsanity
- 250*250 =34 kB (Impacto en la calidad de imagen = ninguno)
- 640*426 =77 kB
- 800*600 =75 kB
ShortPixel Image Optimizer
ShortPixel Image Optimizer es un plugin de WordPress increíblemente popular que tiene más de 80.000 instalaciones activas.
El plugin es ampliamente utilizado por los fotógrafos. Está claro que es probable que este número crezca significativamente en la característica más cercana.
Con este plugin WP podrás comprimir imágenes de diferentes formatos – GIF, PNG y JPG.
Incluso puede comprimir documentos PDF con el plugin.
Supongamos que necesita comprimir imágenes grandes en formato PNG.
En este caso, puede utilizar el plugin para convertir imágenes PNG en imágenes JPG. Como resultado, obtendrá imágenes de pequeño tamaño.
Tendrá que obtener su clave de API gratuita.
100 imágenes al mes.
Proporciona la opción de mantener las imágenes originales en una carpeta separada.
Tamaño Después de comprimir las imágenes con ShortPixel Image Optimizer
- 250*250 =34 kB (Impacto en la calidad de imagen = ninguno)
- 640*426 =77 kB
- 800*600 =75 kB
WP Smush
Smush Image Compression and Optimization es conocido por ser el galardonado optimizador de imágenes.
El plugin en sí es fácil de usar.
Esto significa que nunca te será difícil optimizar imágenes en tu sitio de WordPress con Smush Image Compression and Optimization.
El plugin te permite optimizar cualquier imagen en cualquier directorio de tu sitio de WordPress.
Otra cosa importante que debe tener en cuenta es que Smush Image Compression and Optimization funciona muy bien con todos los plugins de WordPress de la biblioteca de medios más importante, como WP Media Folder, WPML Media Translation Add-on, NextGen Gallery, WPML y muchos otros.
Tamaño más pequeño = Sitio Rápido.
Esta es una de las fórmulas más importantes para mantener su sitio rápido (que obviamente es considerada por los motores de búsqueda mientras se clasifica su sitio en los resultados de búsqueda), por lo tanto mantener el tamaño de su sitio como pequeño puede ser es importante, y en la mayoría de los sitios alrededor del 40% del tamaño del sitio está cubierto por imágenes y comprimirlas puede mejorar la velocidad de su sitio.
Comprimir todas y cada una de las imágenes con una herramienta puede ser agitado, por lo tanto, la mejor manera puede ser utilizando un plugin de WordPress que comprime automáticamente las imágenes sin afectar a la apariencia de la imagen en el fondo y puede hacer esto con la ayuda de Smush.it.
Puede descargar el plugin o instalarlo directamente desde el repositorio de WordPress, para instalar la búsqueda de «WP Smush.it».
Smush.it comprime automáticamente las imágenes en segundo plano sin ninguna interferencia en tu trabajo, las imágenes se comprimen cuando las subes, también puedes comprimir todas las imágenes subidas previamente con la ayuda de la opción bulk smush.it.
Sin embargo, Smush.it sólo opera y comprime imágenes cuyo tamaño no exceda 1MB.
Tamaño Después de comprimir las imágenes con WP Smush
- 250*250 =33 kB (Impacto en la calidad de imagen = ninguno)
- 640*426 =74 kB
- 800*600 =74 kB
Estos fueron los resultados, y está claro que el resultado para la mayoría de los plugins no es impresionante en absoluto.
Como dije no cambiamos nada en la configuración por defecto, y el resultado mostrado arriba es para el tamaño original de la imagen.
Casi no hubo cambios en la calidad de las imágenes, eran casi similares a las originales o podemos decir que no eran cambios visibles en las imágenes después de comprimir la imagen usando el plugin.
Realicé la prueba una vez más para verificar los resultados.
Esta vez usé una imagen relativamente grande.
Tamaño de la imagen 960 × 640
Resultados
- Original = 244 kB
- WP Smush = 228 kB
- ShortPixel Image Optimizer = 244 kB
- Imsanity= 244 kB
- EWWW Image Optimizer = 228kB
- Compress JPEG & PNG images = 165kB
Una vez más, no hubo casi ningún cambio visible en la calidad de la imagen por cualquier plugin.
Ahora, obviamente, Compress JPEG & PNG images es el ganador.
El plugin ha mostrado resultados prometedores en comparación con otros pero viene con una limitación de comprimir sólo 500 imágenes al mes y para comprimir más imágenes usando el plugin, tendrás que ir por la versión pagada.
¿Prefieres optimizar imágenes de WordPress sin usar plugins?
Para los usuarios que prefieren no abultar su sitio WordPress con un plugin, tiene la opción de usar el programa ImageOptim.
El programa puede ser instalado en su computadora y le da la opción de optimizar manualmente cualquier imagen que usted planea subir a su sitio web. Es decir, las imágenes se optimizan antes de subirlas.
Esto ayuda a mantener su sitio web un poco más ligero ya que los plugins pueden, por supuesto, ralentizar un poco su sitio, pero la ventaja de los plugins de compresión y rendimiento por lo general supera con creces cualquier inconveniente de rendimiento, por supuesto.
Si prefieres una versión online y gratuita, te recomiendo las webs tinypng o tinyjpg en función del formato de imágen que quieras comprimir.
Entonces, ¿cuál es el mejor optimizador de imágenes para WordPress?
Escoger entre estos 15 plugins del optimizador de imágenes de WordPress puede ser difícil. Todos funcionan bien, pero algunos dan resultados ligeramente mejores.
La locura es grande si usted tiene a otros que agregan imágenes a su sitio ya que esto estrangulará lo grande (dimensión) que la imagen puede ser.
Los usuarios que quieran un plugin de última generación que les dé más control sobre las imágenes optimizadas, así como tener las imágenes alojadas en una CDN privada, deberían optar por Optimole.
Si desea una solución»todo en uno» que acelere todo su sitio, entonces WP Rocket es probablemente la mejor opción para usted.
Con respecto a las imágenes específicamente, no las optimiza, sino que las almacena en caché y aplica una carga perezosa para asegurar que su sitio web cargue más rápido.
¿La solución definitiva? Deje que WP Rocket se encargue de su sitio en general, y añada Optimole a la mezcla para una optimización de imagen rápida como el rayo.
Imagify vs WP Smush vs ShortPixel: ¿Cuál es el mejor para optimizar las imágenes de WordPress? Comparación de la cabeza a la cabeza
Por qué es inteligente optimizar las imágenes de tu sitio WordPress
Las imágenes son la clave de casi todos los sitios web. Mejoran la apariencia de su sitio, pueden ser utilizados para mostrar sus productos o trabajo, y mucho más. Sin embargo, cuantas más imágenes tenga en su sitio, más trabajo tendrá que hacer el navegador de un visitante para cargar sus páginas.
Esto se debe a que los tamaños de los archivos de imagen pueden ser bastante grandes, y todos esos datos se acumulan rápidamente. En consecuencia, su sitio puede ralentizarse a medida que le agrega medios de comunicación, lo que es perjudicial para atraer y retener visitantes. La solución, como habrás adivinado, es la optimización de la imagen.
Cuando usted optimiza las imágenes de su sitio, estás haciendo que tus tamaños de archivo sean más pequeños y menos gravosos. Al mismo tiempo, esto puede lograrse sin una notable reducción en la calidad de las imágenes. Afortunadamente, todo lo que necesitas para lograr esto es el plugin de WordPress correcto – que es por lo que estamos comparando Imagify vs WP Smush vs ShortPixel en esta revisión.
Imagify vs WP Smush vs ShortPixel: En pocas palabras
A lo largo del resto de este artículo, vamos a ver tres populares plugins de optimización de imágenes: Imagen vs WP Smush vs ShortPixel. Sin embargo, si tiene prisa, vamos a desglosar los detalles principales de cada herramienta por adelantado.
Todas estas estadísticas se refieren a las versiones gratuitas de los plugins (excepto la última fila de precios, que da el costo de las versiones premium):
| Criterios | Imagínate | WP Smush | ShortPixel |
|---|---|---|---|
| Optimizaciones de imagen (por mes) | Aprox. 250 | Ilimitado | 100 |
| Tamaño máximo de archivo | 2MB | 1MB | Sin límite |
| Facilidad de uso (de 5) | 5 | 5 | 5 |
| Rendimiento (de 5) | 4 | 2 | 5 |
| Precios (a partir de) | $4.99 por mes | 49 por mes | $4.99 por mes |
Esto es sólo una instantánea, por supuesto. Siga leyendo para conocer la historia completa sobre la tarifa de Imagify vs WP Smush vs ShortPixel en una comparación directa.
Imagify vs WP Smush vs ShortPixel: Una comparación completa
Antes de que podamos ver cómo Imagify vs WP Smush vs ShortPixel se comparan entre sí, necesitamos presentarlos. Echemos un vistazo a estos plugins, uno por uno.
Smush Image Compression and OptimizationAuthor
wp-smushit.2.8.1.zip
Versión actual: 2.8.1
Última actualización: 10 de septiembre de 2018
de Plugin de
.org
Compresión y optimización de imágenes Smush
En primer lugar, WP Smush es quizás el plugin de compresión de imágenes más popular para WordPress.
Esta herramienta es desarrollada por el equipo de WPMU DEV, y cuenta con unos potentes servidores para reducir rápidamente sus imágenes. También es compatible con una amplia gama de plugins de mejora de bibliotecas multimedia, lo que puede ser una ventaja útil.
Imagine a Image OptimizerAuthor
imagine.1.8.1.1.1.zip
Versión actual: 1.8.1.1
Última actualización: 31 de julio de 2018
Página de Plugin de
.org
Optimizador de imágenes Imagify
Tiene mucho sentido utilizar Imagify Image Optimizer para la compresión de imágenes en un sitio web de WP.
¿Su sitio tiene muchas imágenes que necesitan ser optimizadas?
El plugin de WordPress tiene la opción de Optimizador de volumen.
Esta gran característica le permite optimizar todas las imágenes de un sitio web en un corto período de tiempo.
Necesitará hacer 1 clic sólo para realizar el trabajo.
Si tiene una versión gratuita de Imagify Image Optimizer podrá optimizar sólo hasta 25MB de imágenes al mes.
Sin embargo, necesitará considerar una versión pagada del plugin si necesita hacer más trabajo de optimización de imágenes.
Cabe destacar que Imagify Image Optimizer se actualiza constantemente.
Así, la funcionalidad del plugin mejora constantemente.
A continuación, tenemos Imagify.
También es una opción popular; este plugin ofrece varios niveles de compresión, por lo que puede lograr un sólido equilibrio entre rendimiento y calidad.
También optimiza las imágenes en miniatura y en retina, lo cual es un buen toque.
ShortPixel Image OptimizerAutor
optimizador de imagen de píxel corto.4.11.2.zip
Versión actual: 4.11.2
Última actualización: 12 de septiembre de 2018
Página de Plugin de
.org
Optimizador de imagen ShortPixel
Por último, pero no menos importante, está ShortPixel.
Esta es una opción más simple y ligera, lo que es genial si sólo quieres optimizar tus imágenes rápidamente y sin demasiados problemas.
Al mismo tiempo, ofrece una buena cantidad de personalización en términos de cómo se comprimen sus imágenes.
Ronda 1: Comparación de características clave y precios
En un sentido muy básico, estos tres plugins de WordPress hacen lo mismo. Todas comprimen sus imágenes de modo que son menos agotadoras para el rendimiento de su sitio, al tiempo que intentan mantener una calidad tan alta como sea posible. Además, estas herramientas comprimirán tanto las imágenes existentes como las nuevas que cargue.
Esto puede hacer que sea un poco confuso cuando intentas comparar Imagify vs WP Smush vs ShortPixel y elegir un ganador. Sin embargo, cada uno ofrece un conjunto de características algo diferente. Además, mientras que los tres plugins son gratuitos en sus versiones base, sus niveles premium vienen en una variedad de niveles de precio.
WP Smush
Características principales:
- Establece las dimensiones máximas para las imágenes de su sitio, y las cargas se reducirán automáticamente cuando sea necesario.
- Comprime imágenes en cualquier carpeta o directorio de su sitio, no sólo en su biblioteca multimedia.
- Optimiza las imágenes JPEG, GIF y PNG de una en una o de forma masiva (hasta 50 archivos a la vez).
- Convierte PNGs a JPEGs automáticamente, guarde copias de sus imágenes de tamaño completo como copia de seguridad y optimice imágenes de hasta 32MB (sólo premium).
Determinación de precios:La versión Pro de WP Smush ofrece una gama más amplia de características, simplificando la tarea de optimización de imágenes y dándole más opciones de personalización. Sin embargo, necesitarás ser miembro de WPMU DEV para poder acceder a él, lo que te costará 49 dólares al mes (pero viene con una serie de otros plugins y herramientas útiles).
Imagínate
Características principales:
- Optimiza las imágenes normales, las miniaturas y las imágenes de retina de WP Retina 2x.
- Comprime todos tus archivos de imagen existentes en masa.
- Elige entre tres niveles de compresión: Normal, Agresivo y Ultra.
- Almacena sus imágenes originales a tamaño completo en una copia de seguridad segura, para que puedan restaurarse en cualquier momento.
Determinación de precios:En este caso, las versiones gratuita y premium del plugin ofrecen el mismo conjunto de características. La diferencia radica en cuántos archivos puede optimizar. El plugin gratuito le permite optimizar 25MB de datos por mes (que son aproximadamente 250 imágenes), mientras que los planes de pago comienzan a $4.99 por mes por 1GB de datos (aproximadamente 1,000 imágenes).
ShortPixel
Características principales:
- Comprime todas sus imágenes con un solo clic.
- Optimiza imágenes fuera de la biblioteca de medios, como las que se añaden a través de otros plugins.
- Comprime archivos JPEG, PNG, GIF, WebP y PDF, ya sea en formato con o sin pérdidas.
- Cambia el tamaño de las imágenes automáticamente para establecer las dimensiones antes de que se optimicen.
Determinación de precios:Al igual que Imagify, los niveles premium y gratuitos de ShortPixel ofrecen la misma funcionalidad. Sin embargo, la versión gratuita sólo le permite optimizar hasta 100 imágenes al mes. Alternativamente, usted puede pagar $4.99 para optimizar 5,000 imágenes por mes (lo cual debería ser más que suficiente para la mayoría de los sitios).
Ronda 2: Comparar facilidad de uso y rendimiento
Ahora que hemos visto lo que cada plugin tiene que ofrecer en teoría, echemos un vistazo a cómo es usar realmente Imagify vs WP Smush vs ShortPixel. En esta sección, vamos a repasar cómo optimizar una imagen usando la versión gratuita de cada plugin.
El objetivo es doble. En primer lugar, te proporcionaremos una visión general de la facilidad de uso y personalización que se ofrece al utilizar Imagify vs WP Smush vs ShortPixel. Además, echaremos un vistazo a la calidad resultante de las imágenes comprimidas para ver qué tan bien se mantienen después de ser optimizadas. ¡Vamos a trabajar!
IMAGIFY
A continuación, se le llevará al panel de control de Imagify, donde podrás personalizar la configuración del plugin (por ejemplo, seleccionando un nivel de compresión):
Puede optimizar sus imágenes aquí si lo desea. Alternativamente, tome la clave de API en el correo electrónico que recibió después de registrarse para obtener una cuenta e introdúzcala en su panel de control de WP. Esto le dará acceso a las mismas opciones dentro de WordPress:
Elegimos el ajuste medio, Agresivo, y comprobamos los resultados de una imagen PNG y JPEG cargada en nuestro sitio de prueba:
Imagine que comprime la imagen en un 39,7%, y como puede ver la calidad se ha mantenido bien. Hay una ligera borrosidad en la segunda foto, pero es en gran parte imperceptible.
Ahora, para la prueba PNG:
Este se redujo en un 36,0%, y la reducción de la calidad también es muy leve.
En general, el plugin hizo un gran trabajo reduciendo el peso de nuestras imágenes de prueba sin afectar su calidad. Además, la personalización que se ofrece aquí es una característica útil
Short PixelLike
Imagify, la configuración de ShortPixel toma unos pocos pasos rápidos. En la nueva pestaña Configuración > ShortPixel de WordPress, tendrás que solicitar una clave de API gratuita:
tendrás que crear una cuenta con ShortPixel y, a continuación, introducir tu clave en la página anterior. A continuación, se le presentará la página de configuración completa:
Puede elegir un tipo de compresión, decidir si deseas realizar una copia de seguridad de las imágenes, establecer un tamaño máximo de archivo, etc. De hecho, todo el proceso y conjunto de opciones aquí es notablemente similar a Imagify.auto-optimize siempre está activado con este plugin. Por lo tanto, simplemente sube una nueva imagen a su biblioteca de medios para comprimirla. Sin embargo, no verás el mismo nivel de información sobre cuánto se ha reducido el tamaño del archivo con ShortPixel; tendrás que comprobar la nueva imagen directamente si quieres ver los resultados.
Para una comparación justa, optamos de nuevo por el ajuste medio (Brillante):
La imagen fue comprimida en un 50.0% esta vez. Una vez más, está un poco borrosa, pero es muy similar a la imagen original (e indistinguible de la foto comprimida de Imagify):
Esta se redujo en un 62,3%. Sólo hay la más mínima reducción en la calidad de la imagen original, pero el resultado es un poco más claro y brillante que el Imagify PNG comprimido.
Redujo el tamaño de los archivos de nuestras dos imágenes de prueba en un porcentaje mayor, manteniendo al mismo tiempo un nivel de calidad similar o superior.
WP Smush
Después de activar el plugin WP Smush, obtendrás inmediatamente algunas opciones para personalizar cómo funciona la función de compresión de imágenes. Luego, irás directamente a la nueva pestaña del plugin:
Si seleccionas la opción de compresión automática, sólo tienes que subir una imagen para optimizarla. Cuando lo hagas, verás algo de información sobre cuánto ha sido comprimido el archivo, veamos algunos ejemplos de imágenes optimizadas usando WP Smush. En primer lugar, la foto JPEG original una vez más:
El proceso de compresión fue muy rápido en este caso, aunque el tamaño del archivo sólo se redujo en un 1,6%.
Como resultado, la calidad no ha cambiado, lo mismo se aplica a nuestra imagen de prueba PNG.
En total, las tarifas de WP Smush son relativamente bajas en comparación con las dos opciones anteriores. No tuvo ningún efecto real en nuestras imágenes de prueba, y no ofrece una manera de personalizar el nivel de compresión.
En esta revisión no estamos seguros de qué esperar, ya que los tres plugins de optimización de imágenes que hemos visto son opciones populares y bien revisadas.
Sin embargo, en nuestra comparación de Imagify vs WP Smush vs ShortPixel, ShortPixel resultó ser el claro ganador, y nos pusimos en contacto con Alex Florescu de ShortPixel, quien nos dijo lo siguiente sobre la importancia de elegir el plugin de optimización de imágenes adecuado:
Antes de terminar, repasemos los aspectos más destacados de cada plugin una vez más. Recuerde que estas son las versiones gratuitas – su kilometraje puede variar cuando se trata de los plugins premium:
- Imagínate: Ofrece muchas opciones de personalización e hizo un trabajo sólido al comprimir las dos imágenes de prueba.
- ShortPixel: Proporciona una característica muy similar a Imagify, pero optimiza nuestras imágenes de prueba de forma más eficiente y con una calidad similar o ligeramente mejor.
- WP Smush: No le permite personalizar el nivel de compresión de sus imágenes, y tuvo poco o ningún efecto en nuestras imágenes de prueba.
¿Has usado alguno de estos plugins de optimización de imágenes de WordPress antes, y qué piensas de ellos?
Beneficios de la optimización de imágenes
Optimizar las imágenes para la web tiene muchas ventajas que desafortunadamente son descuidadas por la mayoría de los desarrolladores y propietarios de la web. Veámoslos uno por uno y veamos lo que cada uno puede aportar al rendimiento de su sitio web.
Sitio web de Lighter
Las imágenes pesadas ocupan más espacio en disco de su servidor web y su recuperación desde el servidor para mostrarlas en un navegador requiere más ancho de banda. Esto puede no ser un problema para los sitios alojados en un servidor con un gran espacio de disco y capacidades de ancho de banda, pero se suma a los gastos de alojamiento.
Al optimizar las imágenes se puede ahorrar tanto el espacio de disco en el servidor como el ancho de banda que implica la visualización de esas imágenes. También mejora la velocidad a la que se cargan las imágenes en la página web, incluso con las conexiones lentas a Internet, como la red 2G en los dispositivos móviles.
Rendimiento mejorado
Los sitios web más ligeros funcionan bien en comparación con los sitios web pesados, ya que tardan menos tiempo en cargar todos los activos y las funciones deseadas se cargan correctamente para servir a una característica específica de esa página web. Las imágenes optimizadas para la web siguen las mejores prácticas adecuadas para todo tipo de navegadores y múltiples tamaños de pantalla que mejoran el rendimiento de su sitio web.
Experiencia de usuario mejorada
Cuando el sitio web se carga rápidamente y funciona correctamente, su experiencia general de usuario es elevada para los visitantes que navegan por ese sitio web. Los visitantes disfrutan, retienen y es más probable que vuelvan a visitar el sitio web, que se carga más rápido y les permite obtener la información deseada más rápidamente.
Se puede mejorar la experiencia del usuario implementando las mejores prácticas mientras se estructura su página web y optimizando las imágenes. Se trata de mostrar los datos de una manera fácil de usar al usuario final.
Beneficios de SEO
No sólo los visitantes, sino también el motor de búsqueda como Google ama los sitios web de carga rápida y en una de sus entradas oficiales en el blog, incluso declararon que la velocidad de la página también sería un factor de clasificación en su nuevo algoritmo de clasificación.
Cuando optimizamos las imágenes para el rendimiento también estamos trabajando en mejorar su ranking SERP. Google da preferencia a aquellos sitios web que cargan más rápido y penalizan los sitios de carga lenta. De esta manera el motor de búsqueda se asegura de que los visitantes se presenten con los sitios que están optimizados para la velocidad para evitar la mala experiencia del usuario.
Vamos a ponerlo a prueba
Para ver el trabajo en acción, creamos un pequeño entorno de prueba propio, en el que añadimos ocho imágenes JPEG de tamaño 1MB. A continuación se muestran los resultados de las pruebas de antes y después de optimizar las imágenes para el rendimiento.
Antes de la optimización:
Después de la optimización:
Después de optimizar las imágenes logramos acelerar el tiempo de carga de 1,66 segundos a 1,41 segundos y el número de solicitudes se reduce de 26 a 13. Esto no es mucho, ya que sólo teníamos ocho imágenes, pero imagina la diferencia que puede suponer para el rendimiento del sitio el tener cientos de imágenes.
Cómo Optimizar las Imágenes para el Desempeño?
Ahora que hemos entendido los beneficios de optimizar las imágenes para el rendimiento, nuestro siguiente paso sería aprender las formas de optimizar las imágenes para un mejor rendimiento.
Estas técnicas pueden ser utilizadas tanto individual como colectivamente dependiendo del nivel de rendimiento que se desee alcanzar con ellas.
Elección del formato de archivo correcto
Hay varios tipos de formatos de archivo disponibles para las imágenes que se utilizan en la web. Elegir el formato adecuado para su sitio web es esencial.
PNG (Gráficos de Red Portátiles): Este formato de imagen generalmente utiliza compresiones sin pérdida (discutidas más adelante). La calidad de la imagen es alta, al igual que el tamaño del archivo. Es uno de los formatos de archivo más populares que se utilizan en la web.
JPEG (Grupo Mixto de Expertos Fotográficos): La calidad de imagen de este formato de archivo es inferior a la de PNG, pero también tiene un tamaño de archivo reducido. Utiliza algoritmos de compresión con y sin pérdida y es ampliamente utilizado en cámaras digitales y en la web.
GIF (Graphics Interchange Format): Este formato de imagen sólo utiliza compresión sin pérdidas y es ideal para imágenes animadas debido a su pequeño tamaño de archivo.
JPEG es un formato de archivo de uso común debido a su pequeño tamaño de archivo y a la flexibilidad que ofrece para definir la calidad de imagen de su elección. PNG también es muy popular y se utiliza cuando necesitamos un fondo transparente que no es posible con el formato de archivo JPEG. Los archivos PNG son de alta calidad ya que no están tan comprimidos como los JPEG, por lo tanto, se utilizan en menor cantidad y para imágenes más pequeñas.
Los GIFs se están volviendo populares en la web para mostrar imágenes animadas, especialmente en medios sociales y blogs. Es una manera efectiva de transmitir un mensaje corto o una broma a través de imágenes.
También se pueden utilizar otros formatos de archivo como WebP, que es casi un 30% más pequeño en tamaño y soportado por el 75% del navegador moderno.
Redimensionamiento y compresión de imágenes
La compresión de imágenes es esencial para optimizar las imágenes para la web. Sin embargo, esto puede ser difícil y si no se hace bien puede afectar la calidad de la imagen.
Veamos cómo redimensionar correctamente una imagen para la web sin perder su calidad y cómo reducir aún más su tamaño con compresión de calidad.
Redimensionamiento de imagen
Cuando hablamos de redimensionar una imagen, estamos hablando de redimensionarla y no sólo de encogerla implícitamente usando HTML y CSS que se aplica cuando la página web es renderizada por el navegador.
<h2>XYZ Product Detail</h2> <!– NO UTILIZAR esto ya que cargará la imagen a tamaño completo y el navegador hará el redimensionamiento –> <img src=»image.jpg» alt=»imagen a tamaño completo» width=»400″ height=»400″
/
> UTILIZAR una imagen redimensionada donde el redimensionamiento se hace desde el servidor y no hay necesidad de redimensionamiento del lado del navegador–> <img src=»resized_800x1000_image.
p
or
ejemplo, si desea utilizar una imagen de dimensiones 2800 x 4000 px como imagen de visualización de un producto de tamaño 400 x 400 px, en lugar de definir sus atributos de altura y anchura en su código HTML, redimensione la imagen antes de que el servidor la envíe al navegador. Esto no sólo reducirá el tiempo de carga de su página web, sino que también ahorrará espacio en disco y ancho de banda de su hosting.
Del mismo modo, muchos desarrolladores pasan por alto la necesidad de redimensionar las imágenes con respecto al diseño del sitio web. Las imágenes que fueron dimensionadas para el diseño antiguo pueden no ser de las dimensiones correctas para el nuevo diseño. Por ejemplo, si anteriormente usaba la imagen de banner de tamaño 1400 x 1600px pero su nuevo diseño sólo tiene espacio para una imagen de 900 x 1200 px, puede ahorrar unos cuantos KBs con sólo redimensionarla a las dimensiones apropiadas.
Dimensiones de la imagen
Un error muy común es que sólo las imágenes de gran tamaño de píxel garantizan la mejor calidad en la página web y a veces la gente incluso utiliza imágenes de 2000 a 5000 px aunque el tamaño más comúnmente utilizado para las pantallas grandes es de 1926 px de ancho.
Calidad de imagen
La calidad de una imagen representa su representación visual en la página web. Reducirlo correctamente no afecta a su calidad, sino que reduce el tamaño del archivo, que es exactamente lo que necesitamos para optimizarlo para la web.
La calidad de una imagen se puede reducir del 100% al 0% dependiendo de sus necesidades. Cuanto mayor sea la calidad, mayor será el tamaño del archivo. Normalmente, reducir la calidad de una imagen entre un 10% y un 20% no tiene ningún impacto visible en la calidad de la imagen, pero reduce el tamaño del archivo en unos pocos KBs.
La calidad de una imagen puede ser comprimida ya sea reduciendo la calidad manualmente usando un software de edición de fotos o usando ImageKit, que es una herramienta que convierte imágenes al formato WebP y las comprime cuando es posible.
Entender la compresión con y sin pérdida
Vimos anteriormente en la sección de formato de archivo que una imagen puede ser comprimida en compresiones Lossy o Lossless. Explorémoslos uno por uno para entender ambas técnicas.
Pérdida
En este tipo de compresión, cuando la imagen se comprime pierde su información. Estos datos perdidos pueden no ser notados por el usuario pero pueden reducir significativamente el tamaño del archivo. Al descomprimir este tipo de archivo, sólo se puede recuperar parte de la información original. La compresión con pérdida es utilizada por el formato de archivo JPEG, que normalmente tiene un tamaño de archivo pequeño, y al utilizar este formato de archivo el usuario puede definir la pérdida de datos sin comprometer la calidad de una imagen.
Sin pérdidas
En la compresión sin pérdida cuando se comprime una imagen, toda su información está intacta y al descomprimirla, no se pierde ninguna información. Dado que toda la información está presente, este tipo de compresión no afecta a la calidad de la imagen, pero es necesario descomprimirla antes de renderizarla.
Tanto las compresiones con y sin pérdida se pueden realizar con Adobe Photoshop, Affinity Photo o FileOptimizer.
Herramientas de optimización de imágenes
Hay toneladas de software de edición de imágenes gratuito y de pago disponible que se puede utilizar para optimizar las imágenes para el rendimiento. Todo se reduce a su preferencia y al tipo de optimización que busca.
Aquí está la lista de algunas herramientas populares y efectivas de optimización de imágenes:
- Adobe Photoshop
- Optimizador JPEG
- NET
- JPEG Mini
- OptiPNG
- Reciclaje de imágenes
- Optimizador de archivos
- ImageOptim
- Trimage
- org
¿Cuáles son los SVGs y los beneficios de usarlos?
Scalable Vector Graphics o SVG para abreviar es un vector escalable que se utiliza principalmente para imágenes, logotipos y texto simples. El archivo SVG contiene texto que define las líneas, curvas y formas. Veamos algunos de los beneficios de usar SVG junto con otras imágenes.
- Los SVGs son independientes de la resolución y pueden escalarse fácilmente para cualquier tamaño de pantalla.
- Son programables y pueden configurarse fácilmente para lograr los resultados deseados. Por ejemplo, crear cuadros y gráficos dinámicamente.
- Son indexados por los motores de búsqueda igual que las imágenes PNG o JPEG.
- Por lo general, tienen un tamaño de archivo más pequeño en comparación con sus competidores.
Las SVG son excelentes y tienen varios casos de uso. Es el formato soportado por la mayoría de los navegadores y dispositivos web.
Construya para Móviles
Si te tomas en serio la optimización de imágenes para mejorar el rendimiento del sitio web, entonces es un error descuidar los dispositivos móviles. Casi el 60% del tráfico mundial proviene de dispositivos móviles, ya que cada vez más personas confían en sus dispositivos móviles para navegar por Internet.
Tener un sitio web amigable para móviles es una necesidad en estos días, ya que ninguna empresa querría perder el tráfico procedente de los usuarios de móviles. Las imágenes utilizadas en estos sitios web pueden ser optimizadas para móviles mediante el uso de imágenes con capacidad de respuesta. De este modo, la lista de variantes se entrega al navegador de una imagen concreta adecuada para varios tamaños de pantalla.
Además, la relación de píxeles del dispositivo o DPR (Device Pixel Ratio) juega un papel importante en la visualización de imágenes de alta calidad en dispositivos pequeños. Los dispositivos con pantallas de alta densidad tienen más píxeles por pulgada cuadrada en comparación con una pantalla normal.
Para evitar que las imágenes queden borrosas en estos dispositivos, utilice una imagen de tamaño 2x en las pantallas con DPR 2, una imagen de tamaño 3x en las pantallas con DPR 3 y una imagen de tamaño 1x normal.
Mejores prácticas para el uso de imágenes en la Web
Hasta ahora hemos aprendido a optimizar las imágenes para el rendimiento y las herramientas que se pueden utilizar para redimensionar y comprimir estas imágenes para la web. Antes de llegar a la conclusión, veamos algunas de las mejores prácticas y técnicas adicionales para optimizar las imágenes.
- Cambia el tamaño de las imágenes adecuadamente antes de subirlas al servidor.
- Comprimir imágenes para reducir el tamaño de archivo innecesario.
- Utilice SVG siempre que sea posible.
- Utilice efectos CSS3.
- Cambie el tamaño de las imágenes en lugar de definir el ancho y el alto en HTML.
- Utilice fuentes web en lugar de colocar textos dentro de la imagen.
- Utilice formatos de archivo (JPEG, PNG y GIF) de forma adecuada.
- Usar texto alternativo.
Red de Entrega de Contenido
Content Delivery Network (CDN) es una técnica inteligente y efectiva para servir contenido estático incluyendo imágenes a su audiencia global. Los servidores CDN están repartidos por todo el mundo y en lugar de obtener datos cada vez desde el servidor web, entregan el contenido copiado desde el nodo más cercano a la ubicación del usuario.
CDN simplemente minimiza la distancia entre el servidor web y el usuario que navega por el sitio web desde el otro extremo del mundo. Esto no sólo entrega el contenido más rápido, sino que también reduce el número de solicitudes enviadas al navegador web.
Carga perezosa
Lazy Loading permite a la página web cargar las imágenes sólo cuando el usuario está navegando a esa área particular de la página. En lugar de cargar todas las imágenes a la vez, los sitios web que utilizan Lazy Loading pueden cargar imágenes en segmentos, dándoles más tiempo y recursos para cargar la página inicial a alta velocidad.
El almacenamiento en caché del navegador permite que el sitio web almacene sus datos estáticos en el navegador del usuario, de modo que la próxima vez que solicite los mismos datos, éstos se servirán instantáneamente desde el almacenamiento local. Esta técnica es útil para mejorar la experiencia del usuario, pero requiere cierto cuidado cuando se implementa en el sitio web utilizando páginas dinámicas como el carrito de la compra en una tienda de comercio electrónico.
Reflexiones finales
Optimizar las imágenes para el rendimiento es crucial, ya que más del 50% del peso de la página web se debe a las imágenes. En el artículo anterior, comprendimos los beneficios de optimizar las imágenes y exploramos las formas de hacerlo. También aprendimos a optimizar las imágenes para móviles y en WordPress usando tres plugins famosos y, por último, aprendimos las mejores prácticas para optimizar las imágenes para un mejor rendimiento y una mejor experiencia del usuario.