Optimice sus imágenes con tamaños de imagen predefinidos [Consejo de WordPress]

Optimizar las imágenes en un sitio web es una tarea desalentadora. Puedes elegir usar menos imágenes, imágenes comprimidas, sprites o svg; la lista continua. Un lugar donde muchos sitios de WordPress se confunden es en la definición de tamaños de imagen, que es un Aspecto crucial de la optimización de sitios pesados ​​de contenido..

Los tamaños de imagen son vitales porque las imágenes se crean automáticamente de acuerdo con los tamaños dados cuando se cargan las imágenes. Esto asegura que incluso si tiene una imagen original de 3000px de ancho, nunca se utiliza si una imagen de 600px es suficiente. Idealmente, un espacio de 600px de ancho debería usar una imagen de 600px de ancho en lugar de escalar una imagen más grande.

En este artículo te guiaré por qué tamaños de imagen son y como definirlos.

Cómo maneja WordPress las imágenes

Si alguna vez ha insertado una imagen en un artículo de WordPress, debería haber llegado con el selector de tamaño de imagen. Esto le permite insertar versiones pequeñas, medianas y grandes de las imágenes. Los tamaños reales para estos Se puede modificar en la configuración de WordPress..

Cada vez que subes una imagen a través de WordPress, genera versiones de estas imágenes y las almacena por separado. Por ejemplo, si carga una imagen de 1200 × 800, WordPress puede crear versiones de 100 × 100, 600 × 400 y 900 × 600. Cuando inserte una imagen y elija "medio", se utilizará la versión del medio real, en lugar de una versión reducida del original..

Esto es enormemente beneficioso porque conserva el ancho de banda en el servidor y el tiempo de procesamiento en la computadora cliente. Creo que no es de extrañar que descargar una imagen de 600 × 400 sea más rápido que descargar una imagen de 1200 × 800.

Si se utiliza una imagen más grande que debe reducirse, El navegador necesita encargarse de los cálculos. para que esto suceda Si bien esto no tomará horas, puede ser notable en sitios web con gran cantidad de imágenes..

La imagen correcta en el lugar correcto

El objetivo final debería ser siempre use tamaños de imagen apropiados. Si necesita una imagen de 440 × 380, entonces tome una imagen con ese tamaño exacto del servidor. Hay dos lugares principales en los que utilizará imágenes cargadas: imágenes destacadas e imágenes en la publicación. Recomendaría centrarse primero en las imágenes destacadas..

En todos los artículos, excepto en los más dirigidos visualmente, no importa si la imagen de un post es de 220px o 245px de ancho. La versión que tengas disponible sería igualmente utilizable. Sin embargo, las imágenes destacadas generalmente se muestran en tamaños comunes. Para listas de artículos puede usar una miniatura de 178 × 178, para encabezados de artículos puede usar una imagen de 1200 × 600 de ancho.

Además de estos, es posible que también desee mantener una miniatura / tamaño mediano / grande por separado como se define en la configuración para le da acceso fácil a dimensiones específicas al agregar imagenes a publicaciones.

Entonces, todo se reduce a esto: ¿no sería genial si tuviéramos dos tamaños de imagen adicionales que podríamos usar para las imágenes destacadas? Estos tamaños de imagen se crearían junto con el resto cuando se carga una imagen. La buena noticia es que WordPress lo tiene cubierto con una función bastante simple.

Creación de tamaños de imagen

Utilizando el Función add_image_size () Puede definir todos los tamaños de imagen que su sitio web necesita. Vamos a crear los dos ejemplos mencionados anteriormente. Coloque el código a continuación en el archivo functions.php de su tema o en el archivo de un complemento.

 add_image_size ('Featured_thumbnail', 178, 178, true); add_image_size ('Featured_wide', 1200, 600); 

Como puedes ver, esta función toma cuatro parámetros. El primer parámetro le permite establecer un nombre para el tamaño. El segundo parámetro es el ancho máximo, el tercero, la altura máxima. El cuarto parámetro establece el recorte duro. Si se establece en verdadero, La imagen se creará en el tamaño exacto que especifique..

Una vez que se haya agregado a su tema o complemento, WordPress creará dos nuevas versiones de cada archivo que cargue..

Uso de tamaños de imagen

Estos tamaños de imagen se pueden usar en una serie de funciones relacionadas con la recuperación de medios. Veamos primero las imágenes destacadas. the_post_thumbnail () Se utiliza comúnmente para mostrar la imagen destacada de un post. El siguiente código se puede colocar en un bucle de WordPress:

 the_post_thumbnail ('Featured_thumbnail'); 

El primer parámetro de esta función le permite especificar el tamaño de la imagen a usar. Desde que especificé "Featured_thumbnail", se utilizará la versión de 178 × 178 de este archivo..

Hay una serie de otras funciones tales como wp_get_attachment_image ()y wp_get_attachment_image_src () que también utilizan el parámetro de tamaño de imagen. Siempre que utilice una función de este tipo, debe especificar un tamaño de imagen apropiado.

Regenerando miniaturas

Si ya tiene un sitio en su lugar, no podrá optimizar sus artículos retrospectivamente simplemente definiendo un tamaño de imagen. Los tamaños de imagen solo se tienen en cuenta cuando se carga una nueva imagen, por lo que no se aplican a las imágenes que ya están en el sistema..

No temas, el complemento Regenerar miniaturas hará que todo sea mejor. Este complemento puede regenerar las miniaturas de todas sus imágenes, teniendo en cuenta todos los tamaños de imagen definidos. También puede apuntar a una imagen específica, lo cual es útil si solo tienes unos pocos, o estás haciendo algunas pruebas.

Una vez que se regeneren las miniaturas, debería ver las versiones optimizadas cargadas en su sitio. Puedes ver esto viendo la fuente de la imagen. Si subiste 'example.jpeg' y ves 'example.jpeg' como la fuente de tu imagen destacada, algo no está bien. Si tú ves “ejemplo-178 × 178.jpeg” entonces todo está bien; Se muestra la imagen optimizada..

Imágenes Responsivas

Una dificultad para mantener un sitio optimizado es la capacidad de respuesta. Cuando vea un artículo en el iPad, se reducirá la escala de la imagen en la publicación de un tamaño grande, ya que el ancho máximo será de aproximadamente 786 píxeles..

La solución más fácil es usar un plugin como Hammy. Hammy funciona según el ancho del contenido de su tema (a diferencia del ancho de la ventana del navegador) y puede servir imágenes optimizadas basadas en eso. Esto es especialmente útil para usuarios móviles donde la potencia de procesamiento y el ancho de banda pueden ser un problema.

Optimización de imagen adicional

Como mencioné en la introducción, hay innumerables formas de optimizar las imágenes. Desde sprites hasta compresión de imágenes, se pueden utilizar muchas técnicas para disminuir los tiempos de carga que vienen de la mano con las imágenes. Ashutosh KS ha escrito un excelente artículo que muestra 9 complementos de WordPress para mejorar el rendimiento de la imagen. Le sugiero que lo lea.!

También sugiero echar un vistazo a las imágenes receptivas sin problemas, que le muestran cómo agregar soporte para el elemento de imagen, algo que querrá usar si desea escribir su propio código..