I tested it with two other themes, and if you will insert the image in elementor using "Full" image size, then the error from the GTMetrix will appear too.
That's because the issue is not related to the code/theme/plugin, but for the image resolution itself.
Dear Pablo , with do respect (and I knew that you are not part of support team now) , But I don't accept your answer ,
Because my site running Betheme and all I crated was with builder " blog/masonry-tiles/ in 2 column and 4 posts , and those post read the images featured image , It wasn't set manually !!!
We just write the post and used images for featured image and the blog settings is : Intro header with Header Image
all the images are maximum in 1920 * 1080 px and all images exported from photoshop in save for web with progressive's mode after that we used tinypng.com for compressing the image and after all , we upload the image in our post , why we get the error of : properly-size-images ???
In that page I just used slider (that was exported from one of your demos : https://themes.muffingroup.com/be/bar/ ) and added the blog / masonry-tiles , that's it.
Please help me to solve this issue and Understand what is going on , I relay Like your company and don't want to leave it or change the theme. but if I and your company couldn't solve our problem we have to leave.
It's clearly stated, that "Masonry Tiles" are using the original image, the theme or wordpress does not touch the featured image which is used using that style of blog template.
The GTXMetrix tells, that Properly size images issue is related to:
(...) images being uploaded at full resolution or with enormous dimensions.
Now lets get back to home page , here you add some post's and they load the images in 1080 x648 px and the proper size for that is 508 x 305 but in this box it still load the 1080 x648 px images!
Isn't it? Am I wrong?
So can you fix this error for your demo ? I mean in gtmetrix cannot show me the Proper Image size again.
The src="" tag is being loaded before the HTML render, then, when whole structure gets rendered, then wordpress srcset functionality replaces the image displayed, so it's not using original image from src.
The second quote I attached in this reply, shows you, that src is not displayed image.
Also, if website does not have srcset, then it's using the only src attribute, so original, uploaded by customer image.
As you can see, our images (uploaded on demos) are not passing the test completely, that's true, because we are not able to compress these images to not to lose proper quality of image - it's just too restrictive.
I tested it with two themes, exactly "Twenty Twenty" and "Twenty Twenty One" and the same problem appears (when using Elementor)
That's normal if you will select image size (Medium, let's say 300x300), then the issue will not appear anymore, because it will force the image to display on certain resolution.
But, if you will select the "Full" image size (original image), then the issue will appear too, because the problem is related to the image, not the code/theme/plugin of website.
The only solution for that behavior is to use smaller resolution of images, because the blog style you use is using the original image, so any theme function or script won't change that - this is hardcoded in the masonry script we use.
Also, even if you would change the blog template, there is no other way to make it fixed, because the gtmetrix tells, that problem is coming from the blog feature, which is connected with the srcset wordpress attribute.
Well, the resolution depends what kind of image do you need, but we usually use the 1080px, 768px width images, because they look briliant on mobile/tablet and they load faster, because of smaller resolution.
Also, we suggest to make tricks, when you want to display some images (but you do not need to lightbox them on click), then you can make a single image instead of few of them, see the example:
Of course, the GTMetrix will probably will display the error, because that image will weight a little bit than regular image, but it will be much smaller, than separate four images.
There is no single universal resolution, but Full HD images are not common used on websites, because they weight a lot.
I do not understand what you mean by :
Is that going happen if I change the code for " blog/masonry-tiles/ in 2 column and 4 posts" ?
We do not recommend to edit the theme code, and we do not provide help with this kind of modifications.
1) In that case, you won't be able to use two different images, by using featured image option.
To solve that problem, you have to use the "Builder" template and recreate the layout using one of the page builders to make it look like regular blog template.
It depends what you want to show on the image, as I said earlier, we usually use the 768px or 1080px wide images.
2) HTML content is just a page of the content built with one of the builders, including WPBakery, Muffin Builder, Elementor or Gutenberg.
When you save your page after creating it, then whole content from Page Builders is converted to HTML and saved into your page.
It says, what size of image is using specific style of Blog/Portfolio - as the label says, it's does not have any deeper sense.
"This size is being used for" - declared sizes in these fields:
"Original images" - the size of image you uploaded.
"Different Sizes" - size is independent of these settings and image size you uploaded, it's just important to be bigger or equal 1280x100 if you use the styles listed below the label.
Every product should have documentation, even if it's really simple.
There is nothing wrong, when the documentation is created, it's even better :)
Look at this screenshot, it should explain it better.
There is no bigger sense there, these fields are setting the default size of the images used in Blog and Portfolio feature.
The "Blog & Portfolio" section, means the size of the images which are used on the Main Blog/Main Portfolio Page, where all of the Blog/Portfolio posts are displayed.
But, "Single Post & Single Portfolio" set the size of image which is used on the Single Post / Single Portfolio page, where the content of single post is displayed.
This option (Different sizes: Blog: style Photo, blue color) we talked before is in proper place, because it's an image useed in Main Blog/Main Portfolio Page, but it inherits the featured image size from Single Post / Single Portfolio page.
Comments
I tested it with two other themes, and if you will insert the image in elementor using "Full" image size, then the error from the GTMetrix will appear too.
That's because the issue is not related to the code/theme/plugin, but for the image resolution itself.
Thanks
Dear Pablo , with do respect (and I knew that you are not part of support team now) , But I don't accept your answer ,
Because my site running Betheme and all I crated was with builder " blog/masonry-tiles/ in 2 column and 4 posts , and those post read the images featured image , It wasn't set manually !!!
We just write the post and used images for featured image and the blog settings is : Intro header with Header Image
all the images are maximum in 1920 * 1080 px and all images exported from photoshop in save for web with progressive's mode after that we used tinypng.com for compressing the image and after all , we upload the image in our post , why we get the error of : properly-size-images ???
In that page I just used slider (that was exported from one of your demos : https://themes.muffingroup.com/be/bar/ ) and added the blog / masonry-tiles , that's it.
Please help me to solve this issue and Understand what is going on , I relay Like your company and don't want to leave it or change the theme. but if I and your company couldn't solve our problem we have to leave.
Warm regard,
Av_admin.
It's clearly stated, that "Masonry Tiles" are using the original image, the theme or wordpress does not touch the featured image which is used using that style of blog template.
The GTXMetrix tells, that Properly size images issue is related to:
(...) images being uploaded at full resolution or with enormous dimensions.
https://gtmetrix.com/properly-size-images.html
So, if Blog: Masonry Tiles style is using the original image, then the only problem is connected with the image you uploaded.
What I recommend is:
Thanks
Lets forget the SRCSET tag and Look at here :
The test of your page , shows the properly image size and it means you need to reduces size in pixel and weight of your images:
RESOURCE SIZE show the weight are loaded in the page and POTENTIAL SAVINGS shows us those image can reduce the size and weight
this image https://themes.muffingroup.com/be/dietitian3/wp-content/uploads/2021/02/dietitian3-blog-pic2.jpg can reduces the size from 90.7kb to 70.6 kb , which means it will be around only 20kb
Now lets get back to home page , here you add some post's and they load the images in 1080 x648 px and the proper size for that is 508 x 305 but in this box it still load the 1080 x648 px images!
Isn't it? Am I wrong?
So can you fix this error for your demo ? I mean in gtmetrix cannot show me the Proper Image size again.
I explained you that in previous replies, please read them once more:
The src="" tag is being loaded before the HTML render, then, when whole structure gets rendered, then wordpress srcset functionality replaces the image displayed, so it's not using original image from src.
The second quote I attached in this reply, shows you, that src is not displayed image.
Also, if website does not have srcset, then it's using the only src attribute, so original, uploaded by customer image.
As you can see, our images (uploaded on demos) are not passing the test completely, that's true, because we are not able to compress these images to not to lose proper quality of image - it's just too restrictive.
Thanks
Pablo , I read all of them and I know that what is srcset , If I change these demo with other theme , the problem will be gone!
do you want I show you ?
I tested it with two themes, exactly "Twenty Twenty" and "Twenty Twenty One" and the same problem appears (when using Elementor)
That's normal if you will select image size (Medium, let's say 300x300), then the issue will not appear anymore, because it will force the image to display on certain resolution.
But, if you will select the "Full" image size (original image), then the issue will appear too, because the problem is related to the image, not the code/theme/plugin of website.
Greetings
No , Let's talk about in other way
This box is carted with your theme :
in my monitor (LG2053) it shows whit 507.97 x 304.75 px , maybe in other monitor will change , Yes?
as you can see in this example :
It should load the image in proper size , which means width="507.97" x height="304.75"
but now it load the size width="1080" height="648"
This is why you have update the code
And that's how it works, the wordpress srcset functionality manages that.
Of course, it won't be equal 507.97x304.75, but the closest image with that resolution (few pixels more or less) from srcset.
I showed you in previous reply, that image in src tag, does not show you which image is loaded right now (while srcset is filled), but srcset itself.
Indeed, we created the layout for that blog style, but the image itself is managed by the wordpress srcset functionality.
Thanks
Hi Dear Pablo and thanks for all of this information,
Now would you please cheek my home page (Phil has the address) and tell me what is problem and how can I fix that?
Because our writers always use maximum picture in 1920px. and always we use tinypng to compress images , but still we have problem.
Thanks
The only solution for that behavior is to use smaller resolution of images, because the blog style you use is using the original image, so any theme function or script won't change that - this is hardcoded in the masonry script we use.
Also, even if you would change the blog template, there is no other way to make it fixed, because the gtmetrix tells, that problem is coming from the blog feature, which is connected with the srcset wordpress attribute.
Thanks
There should be a way.
What is your suggestion for resolution ?
Because we use Intro header for blog , it need large image.
Is that going happen if I change the code for " blog/masonry-tiles/ in 2 column and 4 posts" ?
Well, the resolution depends what kind of image do you need, but we usually use the 1080px, 768px width images, because they look briliant on mobile/tablet and they load faster, because of smaller resolution.
Also, we suggest to make tricks, when you want to display some images (but you do not need to lightbox them on click), then you can make a single image instead of few of them, see the example:
Of course, the GTMetrix will probably will display the error, because that image will weight a little bit than regular image, but it will be much smaller, than separate four images.
There is no single universal resolution, but Full HD images are not common used on websites, because they weight a lot.
I do not understand what you mean by :
Is that going happen if I change the code for " blog/masonry-tiles/ in 2 column and 4 posts" ?
We do not recommend to edit the theme code, and we do not provide help with this kind of modifications.
Greetings
Nice,
This Item : https://themes.muffingroup.com/be/theme/blog/masonry-tiles/?mfn-s
Dos it have settings for reading size of image and change to another on or it's read directly from post?
You can change the featured image for the single post when reading (after entering the post) by changing the header image.
Also, you can completely remove the HTML content and create yours using Muffin Builder / Elementor / Gutenberg by turning on "Builder" template.
Thanks
1-You mean I add featured image and add another image for header ?
fi I do that , how can change the featured image for posts ? I mean what is the best size for that?
Unfortunately in this case we need to add 2 image and it's very bad because it uses more spaces in host!
2-what is HTML content ? there is only 3 way to publish the post , Muffin builder , visual composer or elementor / and the red part is Gutenberg
1) In that case, you won't be able to use two different images, by using featured image option.
To solve that problem, you have to use the "Builder" template and recreate the layout using one of the page builders to make it look like regular blog template.
It depends what you want to show on the image, as I said earlier, we usually use the 768px or 1080px wide images.
2) HTML content is just a page of the content built with one of the builders, including WPBakery, Muffin Builder, Elementor or Gutenberg.
When you save your page after creating it, then whole content from Page Builders is converted to HTML and saved into your page.
thanks
For builder image which size do you suggest ?
And for this design https://themes.muffingroup.com/be/theme/blog/masonry-tiles/?mfn-s which image will chosen ?
number 2 wasn't clear to me.
1) It depends, if you do not need wide image, then use the 768px, if more wide 1080px
It uses the original image which you uploaded.
2) Please, read about the HTML here, in the firefox documentation:
The HTML content is just a structure you made in your page builder
Thanks
Hi Pablo ,
Cloud you please explain each of theme with suitable size ?
Sorry, I do not understand what you mean.
Can you explain it greater?
Thanks
Yes , sure,
What is default size of these ?
And these :
And for SINGLE POST & SINGLE PORTFOLIO :
This size is being used for:
Original images:
Those information are not clear to me , I need more details or maybe video or picture.
It says, what size of image is using specific style of Blog/Portfolio - as the label says, it's does not have any deeper sense.
"This size is being used for" - declared sizes in these fields:
"Original images" - the size of image you uploaded.
"Different Sizes" - size is independent of these settings and image size you uploaded, it's just important to be bigger or equal 1280x100 if you use the styles listed below the label.
thanks
For "Different Sizes" If I uploaded 2000px * 1400px images, how will show that?
You have to set the image size, while editing the single portfolio item:
thanks
What about this:
It's taking the size from the Single Post featured image size, so from the section below it :)
Thanks
This page information are not good or it should be changed and updates ! According to that image...
The information should be clear and be in correct position.
Any product that needs a manual to work is broken. Elon Musk
By the way please explain each option for me because I'm confused and that not clear to me.
Thanks
Every product should have documentation, even if it's really simple.
There is nothing wrong, when the documentation is created, it's even better :)
Look at this screenshot, it should explain it better.
There is no bigger sense there, these fields are setting the default size of the images used in Blog and Portfolio feature.
The "Blog & Portfolio" section, means the size of the images which are used on the Main Blog/Main Portfolio Page, where all of the Blog/Portfolio posts are displayed.
But, "Single Post & Single Portfolio" set the size of image which is used on the Single Post / Single Portfolio page, where the content of single post is displayed.
This option (Different sizes: Blog: style Photo, blue color) we talked before is in proper place, because it's an image useed in Main Blog/Main Portfolio Page, but it inherits the featured image size from Single Post / Single Portfolio page.
Thanks
Hi Dear @Pablo
I want to fix and force our copywriter to upload the pictures in 1080*768 px
Is it possible to force them with theme settings and wordpress ?
I mean, I don't want to discuses with them because they can not understand that.
This is result for those pages that they uploaded big pictures. that are no index now , but I need to reduce the size of image.