Sirva imágenes escaladas correctamente en su sitio web WordPress o Joomla

Toma cualquier imagen de tu blog de WordPress o Joomla. Si valoras la calidad, lo más probable es que la imagen sea tan grande que deba reducirse para que quepa en los dispositivos de escritorio de tus lectores, y mucho menos en los móviles. La calidad está muy bien, pero casos como este tienen un precio elevado.

Para que una sola imagen sea compatible con tantas pantallas diferentes como sea posible, es necesario usar una de gran tamaño. Esto se traduce en archivos grandes que deben descargarse en su totalidad, incluso en dispositivos pequeños. Existe una solución: ofrecer imágenes escaladas según el dispositivo de visualización, ya sea de escritorio, tableta o móvil.

Cómo servir imágenes escaladas en WordPress y Joomla con CSS

¿Cuánto espacio ocupan las imágenes en las páginas web? No hay reglas fijas, pero considerando su importancia y ubicuidad, la respuesta es definitivamente mucho. Si publicas imágenes que de todas formas tendrás que reescalar, lo lógico es ser económico y ofrecer a tus usuarios de WordPress o Joomla imágenes ya reducidas para acelerar la carga de tu sitio web.

CSS está ahí para ayudar con un conjunto de atributos relativamente desconocidos, pero invaluables: srcset , sizes y media . Estos atributos, todos compatibles con la mayoría de los navegadores web modernos, permiten especificar qué versiones de imagen se mostrarán según el tamaño de la ventana gráfica.

El srcset complementa la src . Como su nombre indica, en lugar de especificar una sola imagen, se usa para especificar una lista de imágenes escaladas y el ancho de cada una. Junto con él, se usa el sizes , que permite definir cuándo mostrar las imágenes según el ancho de la ventana gráfica.

Puedes leer más sobre estos atributos aquí , pero la buena noticia es que, desde hace algunos años, WordPress reescala automáticamente tus imágenes y ofrece los tamaños adecuados a tus lectores. El resultado es asombroso: una imagen vertical de 511 KB se reduce a 42 KB en dispositivos móviles.

Reescalado y optimización automáticos con ImageRecycle

En cuanto al tamaño de las imágenes, cuanto más pequeñas, mejor, siempre que no se vea comprometida la calidad. Aunque WordPress te ayuda con srcset , hay otras opciones para minimizar el tamaño de las imágenes, como reescalarlas y comprimirlas.

ImageRecycle es un plugin que puede reescalar y comprimir imágenes simultáneamente, y está disponible tanto para WordPress como para Joomla. Lo mejor de todo es que puedes usar ImageRecycle para reescalar y comprimir imágenes automáticamente.

El reescalado es especialmente útil si usas imágenes de stock en tu blog de WordPress o Joomla. Estas imágenes suelen ser desproporcionadamente grandes para todos los usos, incluyendo medios impresos. En la web, es muy poco probable que necesites usar su resolución completa. Con ImageRecycle, puedes reescalar automáticamente imágenes grandes a una altura o anchura máxima al subirlas.

Como complemento al reescalado, se incluye la compresión, que optimiza el tamaño de la imagen sin sacrificar la calidad. Con la compresión con pérdida, se puede reducir el espacio de la imagen hasta en un 80 %. Esto aplica no solo a las imágenes originales, sino también a las reescaladas por WordPress. ImageRecycle una vez más, lo hace automáticamente.

Lo que usted ve como unos pocos kilobytes adicionales puede significar una valiosa pérdida de tiempo para sus lectores. La buena noticia es que no tiene que sacrificar la calidad por los tiempos de carga. Con un uso más inteligente de CSS y el reescalado y la optimización de ImageRecycle, puede tener imágenes de alta calidad que se adaptan a los dispositivos de sus lectores.