August 8, 2020 at 11:50 am #18060
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.August 8, 2020 at 5:04 pm #18076
That’s strange, so you have the width/height set in the settings, but it’s not respecting them?August 9, 2020 at 3:52 am #18078
I inserted now image size 380×195 in the 3 cards above the header, but nothing changed.August 9, 2020 at 12:46 pm #18087
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?August 9, 2020 at 2:44 pm #18089
Now it works also in GTMetrix. I solved also the problem with the 1024×525 resolution.
Thank you for your help 🙂 .August 9, 2020 at 3:30 pm #18091
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. ScreenshotAugust 10, 2020 at 1:47 pm #18126
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.August 10, 2020 at 2:41 pm #18140
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.August 11, 2020 at 4:42 pm #18175
Not sure I understand – are you trying to define the container width in Elementor?August 12, 2020 at 6:54 am #18193
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.August 12, 2020 at 2:27 pm #18208
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.
- You must be logged in to reply to this topic.