This 'error' is because GTMetrix only read the src attribute value of the images, which is the image size that's being uploaded to the featured image options (850x540 pixels). But those are not the image sizes that are being served on desktop. We uses responsive images script and have a different image sizes for mobile, tablet and desktop. Those different image sizes are provided and being served from the srcset attribute of the img tag.
So in fact, the images are already optimized scaled but GTMetrix doesn't read the srcset that contains the different image sizes.
The fix you're linking to is not really suitable for this case. They are displaying a different sized image for the the first post in the loop with a if / else statement. But this doesn't make sense for responsive view.
To give you the best answer as possible; If you want to bypass this (so your GTMetrix score will be higher) you need to make some changes in the widget-latest-news and widget-featured-page files (which you will find in the /inc/widgets folder of the theme). By removing the srcset="" attribute from the image tag the images will be displayed from the default src="" attribute. Downside of this is that 2 things could happen;
1. You add a image which is resized for desktop view (for example 360x190px). Now GTMetrix will give you a better score. But when looking on mobile you will notice that the image is stretched out and has a very low quality. This is because on mobile (for example a iPhone 6) the image width is around 850 in pixels
2. You add a image that has the size of 850x450 pixels. Now the image will look good on all different devices. But GTMetrix will give you the same error about 'image is resized'.
TLDR; My advice is to ignore the GTMetrix error about the images in the featured page widget and latest news widget. The images are already optimized and scaled in size but GTMetrix doesn't read/see the srcset attribute, or at least doesn't read the images sizes in that attribute.
If you want to have a high GTMetrix score the easiest way is to compress your images (with a plugin or Compresor, Minify scripts and styles (this could cause issues with scripts, this is not theme but plugin related). Remove query strings from scripts and styles and use a CDN, something like Cloudflare
Hello,
when i upload featured image to blog post and it shown in index. GTmetrix shown this error:
We use eww image optimizer plugin and W3 total cache, can u help us to improve our gtmetrix result? Thank you in advance.
i saw one usefull way to fix that, but its for other theme. U can see post here -> http://learnedia.com/customize-colormag-wp-theme/
Hi there,
This 'error' is because GTMetrix only read the src attribute value of the images, which is the image size that's being uploaded to the featured image options (850x540 pixels). But those are not the image sizes that are being served on desktop. We uses responsive images script and have a different image sizes for mobile, tablet and desktop. Those different image sizes are provided and being served from the srcset attribute of the img tag.
So in fact, the images are already optimized scaled but GTMetrix doesn't read the srcset that contains the different image sizes.
The fix you're linking to is not really suitable for this case. They are displaying a different sized image for the the first post in the loop with a if / else statement. But this doesn't make sense for responsive view.
To give you the best answer as possible; If you want to bypass this (so your GTMetrix score will be higher) you need to make some changes in the widget-latest-news and widget-featured-page files (which you will find in the /inc/widgets folder of the theme). By removing the srcset="" attribute from the image tag the images will be displayed from the default src="" attribute. Downside of this is that 2 things could happen;
1. You add a image which is resized for desktop view (for example 360x190px). Now GTMetrix will give you a better score. But when looking on mobile you will notice that the image is stretched out and has a very low quality. This is because on mobile (for example a iPhone 6) the image width is around 850 in pixels
2. You add a image that has the size of 850x450 pixels. Now the image will look good on all different devices. But GTMetrix will give you the same error about 'image is resized'.
TLDR; My advice is to ignore the GTMetrix error about the images in the featured page widget and latest news widget. The images are already optimized and scaled in size but GTMetrix doesn't read/see the srcset attribute, or at least doesn't read the images sizes in that attribute.
If you want to have a high GTMetrix score the easiest way is to compress your images (with a plugin or Compresor, Minify scripts and styles (this could cause issues with scripts, this is not theme but plugin related). Remove query strings from scripts and styles and use a CDN, something like Cloudflare
If you have any questions, feel free to ask
Best regards,
Barry
QreativeThemes.com | WordPress Themes