Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1311421

    Hello,
    we use the full width slider of the avia layout builder. We would like to add the scrset attribute for the image in order to show smaller images on smaller displays. Unfortunately we haven’t found a solution for this yet. Do you have a solution for this? To improve the loading speed of the page this would be a very important topic. I look forward to hear from you.

    Best regards

    Chris

    #1311497

    Hi Chris,

    I have assumed that you are using a FULL WIDTH slider and not the FULL SCREEN slider. The Full screen slider uses background css images and requires a different solution to below. I’ll send you some css if you need it.

    Unofficial response but something I have been working on for a while and have the following solution:

    Turn on Responsive images in the Enfold performance panel – This activates Srcset. The full width slider uses this function. As long as you have the right size thumbnails set up it will serve the smaller size images on different screensizes. Make sure you clear your cache.

    The default WordPress Srcset implimentation serves images per screen size width – So for a full width element – Fully optimised requires the thumbnail sizes below.
    On a 360px wide screen it will serve a 360px wide image.

    I personally use the Shortpixel Regenerate Thumbnails Advanced Plugin to add some extra sizes. It is free and compatible with Enfold.
    Please be CAREFUL if you remove other thumbnails as it may affect your site design depending on the other Enfold default sizes used throughout the site.

    I personally recommend adding or making sure the following sizes are covered:
    360px wide – Google speed testing – Small Mobiles
    450px wide – All other mobiles
    768px wide – Ipad Portrait
    1024px wide – Ipad landscape
    1440px wide – macbook pro/720p screens
    Upload size 1920px wide Native size – 1080p – (4K screens normally apply a zoom by default)

    If your slider has no minimum height set then this should automatically work as the image will scale in uniform.

    If you set a minimum height then you may need to upload a taller image to compensate as Srcset uses the screen width not the height to determine which image to serve. The image may become blurred on smaller screens as the image will be stretched to the min-height.

    • This reply was modified 1 week, 4 days ago by  thinkjarvis.
    #1312992

    thanks for your answer!! I take a look and responsive images are activated in enfold settings. I also use the Full width Slider. But the Srcset-Tag is not loaded. (Screenshot). Any ideas?

    Unbenannt

    • This reply was modified 5 days, 19 hours ago by  Chris_85.
    #1313008

    Hi Chris,

    Post deleted I have given you wrong info. Please see new post below.

    • This reply was modified 5 days, 17 hours ago by  thinkjarvis.
    #1313020

    Hi,

    thank you very much for your response.

    Can you send me a screenshot of this setting. I dont have it. i use the enfold version 4.8.3

    Thanks,

    Chris

    #1313021

    I appologise I have given you wrong information.

    I was refering to Lazy load I forgot that Srcset is controlled globally.

    You only need to turn on the setting in the theme control panel.

    Enfold > Performance >
    Capture

    Note that it will only work if you have appropriate image sizes for it to downsize to.

    • This reply was modified 5 days, 17 hours ago by  thinkjarvis.
    #1313026

    Make sure you have cleared your cache. It doesnt look like Responsive images is turned on in your performance panel in the screenshot you sent.

    If it doesnt work wait and see if one of the forum mods picks up your request for help.

    #1313033

    Hi, thanks for your answer.

    i had acitvated the responsive Imgages in the global settings. I also have different image sizes to downscale imagesizes. But it is not working.
    I look forward to got some help with this request.
    Thanks

    #1313035

    Can you try creating a new slider on a test page to see if there is an error with the current element?
    Use the same images and see if it works?

    #1313060

    I also tryed this. There i have the same issue, no SCRSET Tag is added.

    Thanks,

    Chris

    #1313789

    Hi,

    Thank you for the update.

    Would you mind posting the login details in the private field? We would like to check the plugins and the theme settings. Please make sure to upgrade the theme to the latest version, 4.8.5.

    Best regards,
    Ismael

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.