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. Puede optar por utilizar menos imágenes, imágenes comprimidas, sprites o svg; la lista continua. Un lugar donde muchos sitios de WordPress se tropiezan es en la definición de tamaños de imagen, que es un aspecto crucial para optimizar los sitios de contenido pesado .

Los tamaños de imagen son vitales porque las imágenes se crean automáticamente según los tamaños que se dan cuando se cargan las imágenes. Esto garantiza que incluso si tiene una imagen original de 3000 píxeles de ancho, nunca se utiliza si una imagen de 600 píxeles es suficiente. Idealmente, un espacio de 600px de ancho debe usar una imagen de 600px de ancho en lugar de reducir una más grande.

En este artículo, te guiaré por los tamaños de imagen y cómo definirlos.

Cómo maneja WordPress las imágenes

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

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

Esto es muy beneficioso porque conserva el ancho de banda en el servidor y el tiempo de procesamiento en la computadora del cliente . Creo que no sorprende que la descarga de una imagen de 600 × 400 sea más rápida que la descarga de una imagen de 1200 × 800.

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

La imagen correcta en el lugar correcto

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

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

Además de esto, es posible que también desee mantener una miniatura / tamaño mediano / grande por separado, tal como se define en la configuración, para que pueda acceder fácilmente a las dimensiones específicas al agregar imágenes a las publicaciones.

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

Creando tamaños de imagen

Al usar la 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 puede 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á con el tamaño exacto que especifique .

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

Usar tamaños de imagen

Estos tamaños de imagen se pueden utilizar en una serie de funciones que se ocupan de recuperar los medios. Veamos las imágenes destacadas primero. the_post_thumbnail () se usa comúnmente para mostrar la imagen destacada de una publicación. 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 imagen a usar. Como he especificado "featured_thumbnail", se usará la versión 178 × 178 de este archivo.

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

Regeneración de miniaturas

Si ya tiene un sitio en su lugar, no podrá optimizar sus artículos retroactivamente 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 plugin Regenerate Thumbnails mejorará las cosas. Este complemento puede regenerar las miniaturas de todas sus imágenes, teniendo en cuenta todos los tamaños de imagen definidos. También puede dirigirse a una imagen específica, que es útil si solo tiene algunas, o si está haciendo algunas pruebas.

Una vez que las miniaturas se hayan regenerado, debería ver las versiones optimizadas cargadas en su sitio. Puede verificar esto viendo la fuente de la imagen. Si cargó 'example.jpeg' y ve 'example.jpeg' como fuente de su imagen destacada, algo no está bien. Si ve "example-178 × 178.jpeg", entonces todo está bien; la imagen optimizada se muestra.

Imágenes receptivas

Una dificultad para mantener un sitio optimizado es la capacidad de respuesta. Cuando veo un artículo en el iPad, una imagen en el poste de un tamaño grande se reducirá, ya que el ancho máximo será de 786 px o menos.

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

Mayor optimización de la imagen

Como mencioné en la introducción, hay innumerables formas de optimizar las imágenes. Desde los sprites hasta la compresión de imágenes, se pueden usar 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 plugins de WordPress para mejorar el rendimiento de la imagen, ¡sugiero que lo lea!

También sugiero echar un vistazo a las imágenes responsivas gratuitas de Hassle, que le muestran cómo agregar soporte para el elemento de la imagen, algo que querrá usar si quiere escribir su propio código.

Latte Art: 40 ejemplos muy deliciosos

Desde la década de 1980, la forma de arte creada al verter leche al vapor en un trago de expreso, también conocido como arte con leche, ha sido muy bien recibido en la sociedad moderna, que ansía elegancia y belleza. Con la fuerte necesidad de la sociedad, los Baristas, camareros de café, han buscado la creatividad y la evolución para el arte del latte desde entonces, lo que resulta en una gran cantidad de patrones e incluso variantes en la industria.¿Por

(Consejos de tecnología y diseño)

Los 7 pecados capitales de los empresarios que debes evitar

Hacer negocios es difícil hoy en día. La competencia siempre acecha y constantemente espías tus modos y métodos, los empleados dedicados son difíciles de encontrar, y las industrias modernas cambian más rápido que las actualizaciones de estado de los adolescentes en Facebook. El éxito parece elusivo, pero ¿es realmente así?Me atrevo

(Consejos de tecnología y diseño)