[Resolved] Webp Images not rendering 100% width.

Home Forums Support Webp Images not rendering 100% width.

  • This topic has 3 replies, 2 voices, and was last updated 1 month ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1418636
    David

    Hi,

    I am working on optimising my website.

    I have installed the Imagify Plugin to automatically generate a webp version of any image I upload.

    I am selecting an option to replace the IMG with PICTURE tags automatically, and some of the images are no longer displaying 100% full width.

    I appreciate that perhaps some CSS might be able to resolve the issue? I’m wondering if you might be able to assist in any way with this?

    The images most obviously impacted are at the base of the homepage; (1) An on this day in history image and (2) A quote of the day image. Before making the change to point to make use of the PICTURE tag the images were rendering the full width(which can be seen outlined in a red border.

    Any help will be gratefully appreciated.

    Best Regards
    David

    #1418674
    David
    Staff
    Customer Support

    Hi there,

    those Picture element img tags are being output with a width and max-width attributes that are set to 300px.
    We can override this with some like so:

    picture img {
        width: 100%;
    }

    However, resizing an image using CSS will break the src-set properties. So it will only ever display the rescaled smaller image – not the larger image sizes available.

    I am not sure whether the Imagify plugin or the method you’re adding those images allows you to select a more appropriate size.

    #1418755
    David

    Hi David, thanks for your speedy reply.

    As you suspected; that worked for some images, and for others it worked when I didn’t necessarily want it to. The homepage images looked great, but I have removed the CSS for now.

    Thank you- you’ve given me something to work with, and I may have to revisit my overall solution here, including the plugin I’m using.

    Thanks so much. Have a great day.

    Best Regards
    David

    #1418773
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.