Cómo hacer que las imágenes de WordPress respondan
WordPress es una plataforma realmente poderosa. Hacer un tema receptivo e integrarlo es bastante fácil una vez que conoces los conceptos básicos de la temática. Las imágenes receptivas, por otro lado, no son algo que WordPress maneje de inmediato. Podría ir por la ruta de generar manualmente cada tamaño de imagen, luego en el editor de HTML podría escribir manualmente la etiqueta de la imagen, los atributos de srcset y cada imagen. Esto no solo llevará tiempo, sino que podría ser un problema para cualquier usuario administrador que no sea alfabetizado en HTML.
Afortunadamente hay una manera de hacer que WordPress haga todo el trabajo pesado. Puede generar todos los tamaños de imagen a partir de una sola carga de imagen y luego, a través de un complemento, implementar la etiqueta de imagen y los atributos srcset en cualquier lugar que el autor elija para insertar una imagen.
Paso 1: modifique functions.php para generar más tamaños de imagen
Cada vez que cargas una imagen, WordPress la guarda en su tamaño original. También genera automáticamente 3 copias redimensionadas en estos tamaños estándar (la altura o el ancho pueden cambiar en función de la relación de imagen):
- Miniatura (150 × 150)
- Medio (300 × 300)
- Grande (1024 × 1024)
Esta es una característica realmente poderosa ya que se puede personalizar para hacer cualquier tamaño de imagen. Esto significa que no necesita hacer copias múltiples de una imagen en diferentes tamaños. Simplemente sube una sola imagen y WordPress crea las copias redimensionadas.
Esto se hace modificando el archivo functions.php. Para agregar nuevos tamaños de imagen, debe agregar llamadas a la función add_image_size . Aquí hay un ejemplo que agrega cuatro nuevos tamaños de imagen:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Cada llamada a la función incluye un nombre (para que WordPress pueda identificar el tamaño) y un ancho. Los nuevos tamaños serán de 300, 600, 1200 y 2400 píxeles de ancho. Con la función add_image_size es posible que WordPress también establezca la altura o recorte la imagen, pero el ejemplo anterior mantendrá la relación de aspecto de la imagen original. (Se puede encontrar más información sobre la función add_image_size en WordPress Codex .)
El ejemplo anterior solo muestra cuatro nuevos tamaños de imagen agregados, pero es posible que desee agregar más o menos ... esto se basará en el diseño de su tema. Ahora, cada vez que se sube una imagen a WordPress, generará los nuevos tamaños de imagen. El siguiente paso es incluirlos en el HTML.
Paso 2: instala el complemento RICG de imágenes receptivas
Para que WordPress muestre todos los tamaños de imagen, se debe instalar un nuevo complemento: el Imágenes de respuesta RICG enchufar. Una vez que esté instalado y activado, todos los tamaños de las imágenes se incluirán en la etiqueta de la imagen a través del atributo srcset.
Normalmente, cuando se agrega una imagen a una página en WordPress, el HTML de salida se ve así:
Hay una sola imagen en el atributo src.
Una vez que se instala el complemento, el HTML se verá así:
Todos los nuevos tamaños de imagen se han agregado a través del atributo srcset .
El complemento también incluye Picturefill.js , un polyfill de imagen receptivo que agrega soporte tanto para el elemento de imagen como para los nuevos atributos de respuesta para el elemento img. Esto, junto con los atributos srcset que ahora se incluyen en la etiqueta de la imagen, es lo que hace que sus imágenes sean receptivas.
Tus imágenes ahora son receptivas
Ahora las imágenes en su sitio web responderán: el navegador elegirá la imagen más adecuada para descargar.
Los usuarios en dispositivos con pantallas más pequeñas obtendrán las imágenes más pequeñas. Su sitio web se cargará más rápido ya que estas imágenes se descargarán más rápido, necesitarán menos ancho de banda para los usuarios. Los usuarios en dispositivos con pantallas más grandes obtendrán las imágenes más grandes. No aparecerán pixelados o de menor calidad.
Solo hay un posible problema con este método: solo funcionará con las imágenes cargadas en WordPress después de que se haya instalado el complemento RICG Responsive Images. Si está trabajando en un nuevo sitio web, puede que esto no sea un problema. Sin embargo, si se trata de un sitio web existente con contenido existente, los nuevos tamaños de imagen que agregó en functions.php no se generarán. Afortunadamente, no necesita volver a agregar todas las imágenes; hay un complemento que puede ayudar.
Paso 3: Instalar el complemento para volver a generar los tamaños de imagen (opcional)
los Regenerar miniaturas el complemento pasará por todos los archivos adjuntos de imágenes existentes y volverá a generar los nuevos tamaños de imagen en función de los nuevos creados en functions.php; es un ahorro de tiempo real y solo requiere el clic de un solo botón.
Una vez instalado, ve a Herramientas -> Regenerar. Las miniaturas hacen clic en el botón "Regenerar todas las miniaturas". Aparecerá una barra de estado y verá la información sobre cuántas imágenes se han cambiado de tamaño.
Ahora, todas las imágenes existentes en su sitio web se mostrarán correctamente utilizando la etiqueta de imagen a través del atributo srcset .
Usos de imágenes destacadas imagen del dispositivo y imagen de dispositivo móvil a través de Shutterstock.