Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Resolved] Image size of cards

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Image size of cards

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #18060
    Bernhard
    Participant

    Hello,
    my problem refers to my homepage Tourist in Rome.

    After inserting cards in the new layout I found the page blown up some Megabyte. I tested with GTmetrix and with webpagetest.
    The problem is that the images in cards are loaded in full resolution and are then scaled in the browser. For example, the 3 cards above the header are loaded with their full resolution 1140×585 (the featured image size in my posts or pages is 1140×585 or 672×345) and not with the necessary size. Container width is 1140 divided for 3 images would require a resolution of less than 380×195 each. There are 300kB loaded for a row and displayed are scaled images which shall be around 100kB.

    In the new layout I have a total of 26 cards. All images loaded with the full resolution means a weight of ~ 2,6 MB. If the images would be resized, the weight would be less than 1/3, means around 870kB.

    In the upload directory I found automatically resized images in resolution 300×154 which is the same for all featured images.

    I’m wondering if it would be possible to use these resized images to show in cards or if there is another solution to load the images in a more appropriate resolution.

    #18076
    Tom
    Keymaster

    Hi there,

    That’s strange, so you have the width/height set in the settings, but it’s not respecting them?

    #18078
    Bernhard
    Participant

    Hi,
    I inserted now image size 380×195 in the 3 cards above the header, but nothing changed.

    #18087
    Bernhard
    Participant

    I made some more tests. GTMetrix says it loads the full resolution and Webpagetest says, it loads 380×195. But Webpagetest loads in addition the same files with the resolution 1024×525. This is probably, because I have a different layout for desktop and mobile.

    Is it possible to force cards to open only the defined resolution?

    #18089
    Bernhard
    Participant

    Now it works also in GTMetrix. I solved also the problem with the 1024×525 resolution.
    Thank you for your help 🙂 .

    #18091
    Bernhard
    Participant

    Now I have the following problem on mobile: the title is wider than the image and at the right and left border is a grey background. Screenshot

    #18126
    Tom
    Keymaster

    That just looks like the image isn’t wide enough for the area. You’ll either need to increase the image width or decrease the post list width.

    #18140
    Bernhard
    Participant

    The image width is now set to fit perfect for the desktop view.
    I checked in Elementor and in the simulation it shows the image full width and cutted at top and bottom. I don’t see a way in Elementor to define a different size for the area. Elementor sees the list as one object and the distances between the cards are handled in the list.

    #18175
    Tom
    Keymaster

    Not sure I understand – are you trying to define the container width in Elementor?

    #18193
    Bernhard
    Participant

    I can only define the place in the layout and Elementor changes the size of the container according to the display type. In some cases, on mobile, Elementor shows only one column instead of 2 or 3 and then in some cases the area, where the cards are shown, is wider.
    When I started to define the image size in WPSP I took the resolution how the images are scaled on desktop. But on mobile it is different.
    To solve the problem I use now a bigger image resolution and I hope this will work now.

    #18208
    Tom
    Keymaster

    Yea, that’s the way to do it – set the image size as large as it’s going to be, and then allow it to resize down as needed.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.