¿Ha ejecutado su sitio web a través de una herramienta de prueba de rendimiento solo para que le digan que necesita «servir imágenes escaladas»? Básicamente, la herramienta le dice que necesita cambiar el tamaño de las dimensiones de sus imágenes para que coincidan con la forma en que se muestran en su sitio.
Afortunadamente, WordPress tiene algunas herramientas geniales para ayudarte. Puede usar un complemento de optimización de imágenes para servir automáticamente imágenes escaladas, o escalar imágenes usted mismo usando una serie de técnicas diferentes. Hacer esto contribuirá en gran medida a optimizar los tiempos de carga de su página y mejorar sus tasas de rebote.
Esta es la razón por la que necesita publicar imágenes escaladas
Una imagen escalada es esencialmente una que ha sido dimensionada para ajustarse a las dimensiones exactas para las que la está utilizando. Por un lado, una imagen demasiado pequeña y ampliada se verá borrosa. Por otro lado, mientras que un navegador reducirá una imagen que es demasiado grande, aumenta innecesariamente el tamaño del archivo de la página.
Además, las imágenes grandes hacen que el navegador dedique tiempo y recursos para cargarlas en lugar de cargar la página lo más rápido posible. Esto puede ralentizar significativamente los tiempos de carga de su página y afectar negativamente el rendimiento de su sitio web.
Por ejemplo, si su tema muestra una imagen de 100 x 100 px, querrá cargar una imagen que tenga exactamente 100 x 100 px. Si carga una imagen de 50 x 50 px, se verá borrosa cuando se amplíe a 100 px. Por otro lado, si carga una imagen de 200 x 200 px, se verá muy bien, pero no es necesario aumentar el tamaño de su página porque solo se muestra a 100 px.
Por supuesto, las páginas más lentas pueden ahuyentar a los visitantes . No solo pueden promover una experiencia de usuario (UX) menos que favorable , sino que también pueden aumentar su tasa de rebote a medida que los usuarios se frustran y hacen clic fuera de su sitio.
Es por eso que casi todas las herramientas de prueba de rendimiento destacan la necesidad de servir imágenes escaladas:
Tres complementos para ayudarlo a servir imágenes escaladas en WordPress
La buena noticia es que una de las formas más sencillas de servir correctamente imágenes escaladas es usar un complemento para ayudarlo . Las siguientes opciones simplifican la optimización de sus imágenes pesadas y limpian sus páginas infladas. ¡Vamos a ver!
1. Optimol
Nuestra primera oferta es Optimole. Este práctico complemento optimiza sus imágenes y las entrega en el tamaño perfecto para diferentes dispositivos. Por lo tanto, no solo lo ayuda a mostrar imágenes escaladas, sino que también puede escalarlas automáticamente al tamaño óptimo según el dispositivo del usuario.
Tiene un proceso de configuración mínimo, lo cual es excelente si necesita la máxima calidad con el mínimo esfuerzo.
Además de escalar y comprimir sus imágenes, Optimole también las sirve desde una red global de entrega de contenido (CDN) con tecnología de Amazon CloudFront, lo que acelera sus tiempos de carga en todo el mundo.
Con el plan gratuito, puede optimizar y escalar imágenes ilimitadas hasta ~5000 visitas mensuales. Después de eso, los planes pagos comienzan en solo $9 por mes.
2. aplastar
Otro complemento que puede usar para servir imágenes escaladas correctamente es Smush. Esta es una opción popular y altamente calificada que optimiza sus imágenes al escanear cada una, eliminar los datos innecesarios y luego establecer un tamaño ideal. Una vez finalizada, cada imagen se guarda en su Biblioteca de medios .
Para escalar sus imágenes, puede hacer que cambie automáticamente el tamaño de las imágenes por encima de ciertas dimensiones para que coincidan con los requisitos de su sitio.
Además, el complemento tiene la capacidad de ‘comprimir’ hasta 50 imágenes a la vez, y puede configurarlo para optimizar automáticamente cada una a medida que se carga. Además, puede configurarlo para comprimir imágenes en cualquier directorio, incluidas las almacenadas en servicios en la nube.
Por esta razón, la versión gratuita es un excelente lugar para comenzar y optimizará imágenes ilimitadas, aunque las imágenes individuales no pueden exceder los 5 MB de tamaño.
3. Píxel corto
Nuestra recomendación final es ShortPixel. Este complemento es la elección perfecta para aquellos que buscan una solución de escalado y compresión de imágenes de calidad con un presupuesto ajustado. Puede optimizar hasta 100 imágenes por mes de forma gratuita. Además, es simple y fácil de usar.
Específicamente, ShortPixel puede ayudarlo a escalar automáticamente las imágenes de WordPress a medida que las carga a las dimensiones que especifique.
ShortPixel también viene con compresión de imágenes sin pérdida y con pérdida para imágenes JPEG , PNG y GIF ; también puede optimizar archivos PDF. Le brinda la opción de convertir imágenes automáticamente ( incluido WebP ) a medida que las carga o manejarlas manualmente.
Como se mencionó anteriormente, la versión gratuita le permite optimizar hasta 100 imágenes por mes. Más allá de eso, los planes pagos comienzan en $4.99 por mes para optimizar hasta 5000 imágenes por mes.
Cómo servir imágenes escaladas en WordPress sin usar un complemento (3 métodos)
Si prefiere servir imágenes escaladas sin un complemento, hay otras formas de hacerlo. Por ejemplo, puede recortar imágenes en su biblioteca de medios, ajustarlas en la configuración de medios de administración o usar un editor de imágenes como GIMP o Photoshop de código abierto .
Sin embargo, antes de discutir cómo servir imágenes escaladas sin usar un complemento, debemos mencionar una función nativa que viene con WordPress llamada srcset . Esta característica central hace que sus imágenes respondan a diferentes tamaños de pantalla. Funciona ofreciendo al navegador tres opciones diferentes, que luego utilizará la más optimizada para ese usuario. Por supuesto, esto ayuda un poco con los tiempos de carga de la página, pero escalar imágenes le dará aún más rendimiento.
Hablando de eso, echemos un vistazo a nuestro primer método: recortar imágenes en WordPress.
1. Recorta imágenes en tu biblioteca de medios
Su primer puerto de escala para lograr este método es dirigirse a su back-end de WordPress. En una de tus publicaciones o páginas, comienza haciendo clic en la imagen que deseas escalar y selecciona Editar imagen :
Desde allí, deberá ir a la pantalla Biblioteca multimedia , elegir su imagen y hacer clic en el enlace Editar imagen . En la siguiente pantalla está la opción para escalar su imagen:
Se le presentarán las dimensiones originales de la imagen y un cuadro para ingresar sus nuevas dimensiones escaladas. Sin embargo, tenga en cuenta que los nombres de archivo a menudo se guardan con una cadena de caracteres adicionales, lo que puede afectarlo si está utilizando una estrategia de SEO de imágenes específica.
2. Ajuste los tamaños de imagen en la pantalla Configuración > Medios
También puede escalar sus imágenes ajustando la configuración en WordPress directamente. Para hacer esto, navegue a WordPress, luego vaya a Configuración > Medios :
Aquí puede cambiar el ancho y el alto para los tamaños de imagen en miniatura, mediano y grande.
WordPress creará automáticamente versiones escaladas de cada imagen utilizando estos tamaños. Puede elegir qué tamaño desea insertar desde el editor de WordPress.
Sin embargo, debe tenerse en cuenta que, aunque puede mejorar los tiempos de carga de la página en algunos casos con esta configuración, no optimizarán perfectamente sus imágenes en todas las circunstancias. Para esto, podría considerar el último método manual.
3. Usa un editor de imágenes (como GIMP o Photoshop )
Por supuesto, nuestro último método para escalar sus imágenes manualmente es usar un editor de imágenes fuera de línea. Puede pensar en este método como el más obvio, aunque podría decirse que es la opción más eficiente disponible. Por ejemplo, en Photoshop, puede dirigirse a Imagen en la barra de herramientas y seleccionar Tamaño de imagen :
Aparecerá una pantalla emergente con la dimensión básica de su imagen. Luego podrá escalar la imagen como desee antes de subirla a WordPress.
Además del ancho y la altura, también tiene otras opciones aquí. Por ejemplo, la resolución de la imagen se puede establecer más alta o más baja según sus necesidades (72 PPI suele ser el estándar para la web).
Conclusión
En este artículo, discutimos cómo escalar imágenes manualmente y ofrecimos tres complementos útiles para hacerlo. Como resumen rápido, son:
- Optimole : este complemento ofrece un método de configuración y olvido para servir imágenes escaladas.
- Smush : una solución popular y altamente calificada para la optimización de imágenes.
- ShortPixel : para aquellos que prefieren una opción ligera, este complemento es la elección perfecta.
¿Tiene alguna pregunta sobre el servicio de imágenes escaladas o lo que significa servir imágenes escaladas? ¡Pregúntales en la sección de comentarios a continuación!
