- This topic has 10 replies, 2 voices, and was last updated 3 years, 1 month ago by
.
-
Posts
-
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.
Hi there,
That’s strange, so you have the width/height set in the settings, but it’s not respecting them?
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?
Now it works also in GTMetrix. I solved also the problem with the 1024×525 resolution.
Thank you for your help 🙂 .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
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.
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.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.
- You must be logged in to reply to this topic.