plugins – is there a way to preload specific images for desktop users only? (excluding mobile users)


My website has a few .PNG images animated at the very start of my Contact page.
Those images are a bit heavy (because they have transparent background), so the animation starts with some of them loading during the animation, looking pretty bad.

So, to fix it, I must add this line <link rel="preload" as="image" href="url-of-the-image.png"/> to the <head>.

To achieve it, I’m using Snippets plugin. If I’m not mistaken, the snippet should like this:

add_action( 'wp_head', function () { ?>

function my_custom_js() {
    echo '<link rel="preload" as="image" href=href="url-of-the-image.png"/>';

<?php } );

The thing is that the very same page (my Contact page) is different for mobile devices: it doesn’t use those .PNG images because it would be too much loading time for a phone.

This leads to my question: Is there a way to exclude mobile devices from the preloading tag I must add to the head?

Ernest 1 year 2021-09-29T12:09:34-05:00 0 Answers 0 views 0

Leave an answer