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

Tome cualquier imagen en su blog de WordPress o Joomla. Si califica la calidad, lo más probable es que la imagen sea lo suficientemente grande como para que tenga que reducirse para adaptarse a los dispositivos de escritorio de sus lectores, y mucho menos en dispositivos móviles. La calidad está muy bien, pero casos como este tienen un precio considerable.

Para acomodar tantas pantallas diferentes como sea posible con una sola imagen, debe usar una grande. A su vez, eso se traduce en archivos grandes que deben descargarse en su totalidad, incluso en dispositivos pequeños. Hay una solución: servir imágenes escaladas dependiendo del dispositivo de visualización, ya sea de escritorio, tableta o dispositivo móvil.

Sirviendo Imágenes Escaladas en WordPress y Joomla con CSS

¿Cuánto espacio ocupan las imágenes en las páginas web? No existen reglas estrictas y rápidas, pero considerando su importancia y ubicuidad, la respuesta es definitivamente mucha. Si está sirviendo imágenes que terminará reescalando de todos modos, solo tiene sentido ser económico y servir a sus usuarios de WordPress o Joomla con imágenes que ya están reducidas para acelerar los tiempos de carga de su sitio web.

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

El srcset complementa la pestaña src habitual . Como lo implica el nombre del atributo, en lugar de especificar una sola imagen, se usa para especificar una lista de imágenes escaladas y el ancho cuando se debe usar cada una. Se utiliza junto con él el atributo de tamaños , con el que puede definir cuándo mostrar las imágenes según el ancho de la ventana gráfica.

Puede leer más sobre estos atributos aquí , pero la buena noticia es que durante los últimos años, WordPress cambia automáticamente la escala de sus imágenes y ofrece los tamaños adecuados a sus lectores. El resultado es asombroso: una imagen vertical con 511Kb se reduce a 42Kb en dispositivos móviles.

Optimización y cambio de escala automático con ImageRecycle

Cuando se trata de tamaños de imágenes, cuanto más pequeñas, mejor, siempre que no se comprometa la calidad. Aunque WordPress le ayuda con el uso de srcset , hay más que puede hacer para minimizar el tamaño de las imágenes, sobre todo reescalando y comprimiendo imágenes.

ImageRecycle es un complemento que puede ImageRecycle escala y comprimir imágenes simultáneamente, y está disponible tanto en WordPress como en Joomla. Lo mejor de todo es que puede utilizar ImageRecycle para ImageRecycle escala y comprimir imágenes automáticamente.

El cambio de escala es especialmente útil si utiliza imágenes de archivo en su blog de WordPress o Joomla. Estas imágenes suelen ser desproporcionadamente grandes para dar cuenta de todos los usos, incluidos los medios impresos. En la web, es muy poco probable que alguna vez necesite utilizar su resolución completa. Con ImageRecycle , puede ImageRecycle a escalar automáticamente imágenes grandes a una altura o anchura máxima al cargarlas.

El cambio de escala se complementa con la compresión, que optimiza el tamaño de la imagen sin sacrificar la calidad. Con la compresión con pérdida, puede reducir el espacio de la imagen hasta en un 80%. Esto se aplica no solo a las imágenes originales, sino también a las imágenes reescaladas por WordPress. Una vez más, ImageRecycle puede hacer esto automáticamente por usted.

Lo que 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 cambio de ImageRecycle y la optimización de ImageRecycle , puede tener imágenes de alta calidad que se adaptan a los dispositivos de sus lectores.