Sirva imágenes con la escala adecuada 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 tener que reducirla para que quepa en los dispositivos de escritorio de sus lectores, y mucho menos en los dispositivos móviles. La calidad está muy bien, pero casos como este tienen un precio elevado.

Para acomodar tantas pantallas diferentes como sea posible con una sola imagen, debes usar una grande. A su vez, eso se traduce en archivos de gran tamaño que deben descargarse en su totalidad incluso en dispositivos pequeños. Existe una solución: servir imágenes escaladas según el dispositivo de visualización, ya sea computadora de escritorio, tableta o 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: srcset , tamaños y medios . Estos atributos, todos compatibles con la mayoría de los navegadores web modernos, le permiten especificar qué versiones de imágenes mostrar según el tamaño de la ventana gráfica.

El srcset complementa la src . 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 en el que se debe usar cada una. Junto con él se utiliza el de tamaños , con el que puede definir cuándo mostrar imágenes en función del 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 de 511Kb se reduce a 42Kb en dispositivos móviles.

Cambio de escala automático y optimización 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.

Cambiar la 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 cabida a todos los usos, incluidos los medios impresos. En la web, es muy poco probable que alguna vez necesites utilizar su resolución completa. Con ImageRecycle , puede reducir automáticamente la escala de imágenes grandes a una altura o ancho máximo 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 usted considera unos pocos kilobytes adicionales puede significar una valiosa pérdida de tiempo para sus lectores. La buena noticia es que no tienes que sacrificar la calidad por los tiempos de carga. Con un uso más inteligente de CSS y el reescalado y optimización de ImageRecycle , puede tener imágenes de alta calidad que se adaptan a los dispositivos de sus lectores.