Importancia de las imágenes receptivas en WordPress Core

La popularidad de las imágenes receptivas está aumentando y es algo que nadie puede ignorar. Sin embargo, emplear la misma funcionalidad en un CMS popular como WordPress puede ser una experiencia desafiante. La tarea puede llevar mucho tiempo, aunque es posible que los usuarios escriban características dentro del tema. Pero las cosas han cambiado drásticamente desde que se introdujo WordPress 4.4, lo que facilita bastante a los desarrolladores y administradores la incorporación de la funcionalidad de imagen receptiva en sus temas.

Lo más destacado incluye la disponibilidad del complemento Responsive Images dentro del núcleo de WordPress. Esto significa que los usuarios ahora pueden disfrutar de la presencia de soporte de imágenes receptivas que viene como una característica predeterminada dentro de WordPress. Echemos un vistazo de cerca a cómo funciona realmente esta función y cómo se puede usar con cuidado para aprovechar el potencial del sitio de WordPress.

Funcionamiento de la característica

Todo el contenido y las imágenes estarán compuestos por atributos srcset y tamaños una vez que actualice a WordPress 4.4. Esto es principalmente para asegurar la disponibilidad de cada tamaño de imagen para mantener la dimensión de imagen solicitada real. Durante los casos en los que la relación de aspecto varía en comparación con la imagen solicitada original, los recortes personalizados se dejarán fuera del atributo srcset . Al mismo tiempo, se devolvería una imagen receptiva cuando se llama a una imagen a través de la función wp-get-attach-image.

Las imágenes receptivas actúan como una función de fondo en WordPress 4.4 debido a su funcionalidad automática que ocurre cada vez que se carga una imagen en WordPress a través de un cargador de medios. Este proceso da como resultado automático de fondo en srcset y tamaños atributos que se muestran cada vez que aparece una imagen en una página. Esto significa que no hay interfaces visibles en la nueva función de imágenes receptivas. Ninguna de las opciones, como la presencia de formularios para completar o casillas para verificar y opciones para alternar, está disponible debido a la falta de interfaces visibles.

Los desarrolladores de temas deberán asegurarse de que los atributos de tamaños precisos estén disponibles en las imágenes mediante la edición del archivo functions.php del tema. Es importante tener en cuenta que debido a srcset y tamaños atributos presentes en la etiqueta de la imagen es lo que realmente representa las imágenes sensibles en WordPress. El más difícil de predecir es el atributo de tamaños, aunque WordPress funciona bien cuando se trata de incluir todos los tamaños disponibles dentro del atributo srcset . Es el atributo del deber de los tamaños explicar al navegador qué tan ancha sería la imagen en todas y cada una de las ventanas gráficas disponibles. Sin embargo, los resultados pueden diferir según el estilo disponible con el tema del usuario, proporcionando el valor predeterminado razonable, a saber, 'tamaños = ”(ancho máximo: {{image-width}}) 100 vw, {{image-width}}”

Con el atributo de tamaños, los usuarios pueden lograr especialmente dos cosas. En primer lugar, garantiza la disponibilidad de un atributo de tamaño válido en la imagen, que ahora se ha convertido en un requisito previo en lo que respecta a las especificaciones. En segundo lugar, evita que el navegador proporcione una fuente de imagen más comparada con el ancho original que se ha solicitado. Sin embargo, el beneficio del atributo de tamaños predeterminados se reduce cada vez que cualquier CSS manipula el tamaño de la imagen con anchos de ventana que son completamente diferentes.

Los desarrolladores de temas pueden ajustar el atributo de tamaños correspondiente a cada imagen con la ayuda de ganchos de filtro para garantizar la entrega del atributo de tamaños perfectos durante cada punto de interrupción. Por lo tanto, es deseable asegurarse de que el tema no se base en el atributo de tamaños predeterminados cuando se trata de ofrecer un soporte de imágenes de respuesta precisa. La razón principal es el hecho de que los navegadores no pueden modificar o cambiar la fuente de la imagen por el atributo de tamaños predeterminados durante los casos en los que el tamaño de la ventana gráfica es menor en comparación con el tamaño de la imagen solicitada originalmente. Sin embargo, si la imagen ya se ha modificado con CSS en un punto de interrupción, tampoco se puede cambiar la fuente.

Si es un individuo que tiene acceso a una base de código de WordPress o si es un desarrollador de temas, entonces es una necesidad mayor que filtre las imágenes en los temas para entregar atributos de tamaño que sean precisos. Esto debería ser lo más importante que se debe hacer después del lanzamiento de la nueva versión.

Configuración de imágenes receptivas para su tema

Se introducen una serie de ganchos nuevos junto con las nuevas funciones que se pueden utilizar para proporcionar un nivel de soporte de imágenes receptivas que se adaptan a su tema. La anchura máxima de la imagen que ha de ser incluido dentro se pueden filtrar por el desarrollador tema a través de gancho max_srcset_image_width el atributo srcset. Los atributos srcset de la imagen se pueden filtrar conectándolos a wp_calculate_image_srcset, mientras que un desarrollador de temas puede personalizar el atributo de tamaños para ajustar los puntos de interrupción de la imagen en su tema mediante el filtrado de wp_calculate_image_sizes.

Las imágenes de contenido se pueden filtrar con wp_calculate_image_sizes, mientras que las miniaturas de las publicaciones / imágenes destacadas se pueden filtrar con la función wp_get_attachment_image_attributes. Se requiere la necesidad de dos funciones diferentes, ya que el tema cambia según la forma en que se muestran las imágenes destacadas en diferentes puntos de interrupción y es completamente diferente en comparación con la forma en que se muestran las imágenes de contenido en las mismas circunstancias. Por lo tanto, WordPress 4.4 ofrece a los desarrolladores de temas una mayor oportunidad para filtrar imágenes de varias maneras y, por lo tanto, ser lo más específico posible.

Todo esto destaca los beneficios instantáneos que los usuarios y los desarrolladores de temas podrán lograr con el soporte de imágenes receptivas a través de la actualización de WordPress 4.4. También permite a los desarrolladores de temas incluir imágenes claras y nítidas independientemente del tamaño de la ventana gráfica y la densidad de píxeles y, por lo tanto, mejoran el rendimiento del sitio web, ya que las páginas web pueden evitar el tiempo adicional necesario para cargar imágenes más grandes. A pesar de que es un procedimiento automático para los usuarios, los desarrolladores de temas son responsables de ajustar el atributo de tamaño de la imagen pasando tiempo en el archivo functions.php dentro del tema. Además, debe tenerse en cuenta que crear y fusionar el complemento de imágenes receptivas es más un esfuerzo de equipo.