I need to preload some images off-screen while page is loading and also - in a seperate case - serve smaller versions (ie cropped) of the same images to mobile.
What is the best way of doing this, preferably without a plugin?
2 Answers
You can add lazy loading to your image tags...
<img src="/path/to/image" width="640" height="480" alt="My image" loading="lazy">
-
-
1It's a standard HTML attribute for the IMG tag.Bluedreamer– Bluedreamer2025-07-17 00:03:26 +00:00Commented Jul 17 at 0:03
-
Agreed + the src-set attribute to serve smaller images for devicesliamcrean– liamcrean2025-07-29 08:51:23 +00:00Commented Jul 29 at 8:51
You can use the native image manipulations to generate cropped images for mobile. Than you can use css to display the smaller ones to small screens. But it might be cleaner to use Mo Variables (free addon) to detect if a mobile device visits the page and only load the correct image {if is_phone}load small image{/if} {if is_desktop}load large image{/if}
Same goes for preloading i guess
-
thanks for this. Very helpful. I can't find Mo Variables though... I used to have it on Devotee I think but that site is dead now... You know where I can find it? Is not on EE Addons eithersegovius– segovius2025-07-15 10:54:13 +00:00Commented Jul 15 at 10:54
-
1here it is: github.com/rsanchez/mo_variablesJelle Dijkstra– Jelle Dijkstra2025-07-15 11:17:10 +00:00Commented Jul 15 at 11:17
-
Native HTML can do this now with srcset so there's no need for an addon. Then all you need is a EE image manip for each breakpointliamcrean– liamcrean2025-07-29 08:51:18 +00:00Commented Jul 29 at 8:51