I’m wondering how to make ACF Image Field compatible with WordPress native lazy load.
Should I just modify from :
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
<img load="lazy" srcset="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
To sum up change src to srcset and add load=”lazy”
Is that correct according to you ?
Thanks a lot !
Do you know if I need to activate WordPress Lazyloading with a snippet to add to the functions.php of my custom theme ?
Or WordPress does it natively ?
I found this source that explain there is a function to add but i’m sceptic :
Suggesting to add it to functions.php
// Enable WordPress Default Lazy Load Functions for Images, Videos, Iframes add_theme_support( 'lazy-load' );
I have not had to enable this on any site. WP automatically adds lazy loading to images that are inserted into WP content areas, it automatcially adds the attribute unless you tell it not to.
lazy loading by adding
loading="lazy" to image tags is not a WP thing. This is a browser thing. Browsers not recognize this attribute. In WP is just means that WP is not added the attribute automatically when it generates an image tag.
Enabling the lazy load may be confused you
Sorry about that i will update the post next few days. Proper Title is add_theme_support for Lazy Load in fnctions.php is super easy and useful instead of using Plugin
Lazy-Loading Images in WordPress Core
The loading attribute currently supports two possible values:
The implementation seeks to enable lazy-loading images by default, providing the loading attribute with value lazy on the following img tags:
Note that loading=”lazy” will only be added if the respective tag does not yet include a loading attribute. In other words, to prevent an image from being lazy-loaded, it is recommended to specify loading=”eager”.
Source and more info in the Make WordPress
This is used to add( support ) the loading=”” in the templates and to be able to play with it
For example Lazy Load in WordPress since xxx Version is enabled by default. Mean everywhere lazy will be add to the images. I don’t need loading lazy for some specific parts of the template and the site. One of the most common errors by the Web Developers is to keep the lazy load enabled for all supported types in above the fold.
add_theme_support( ‘lazy-load’ );
means this will be supported as a tag for the custom template you build
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
© 2023 Advanced Custom Fields.