- This topic has 9 replies, 2 voices, and was last updated 2 years, 9 months ago by
.
-
Posts
-
I have some featured image question to hopefully get answered so I can finish of the site.
1/ when I select a size other then FULL in the customiser featured image section. The webpage code doesn’t post all the SRCSET sizes. Does this mean that the featured images are not responsive?
2/ I’ve notice that my sites that have a page hero element and have the featured image in that element. Google isn’t showing the thumbnail in mobile searches. Have you see this issue before?
3/ If I uploaded a image of 2000px x 2000px. And I’ve set a bunch of sizes to be created automatically. But I then select “full size” for the featured image in the customiser, does that mean the site will only show that size?
4/ is it possible to upload large images but use CSS to reduce the size that’s actually shown? Is it good practice?
5/ is it possible to upload large images but use the container width to reduce the image size? Are there issues with that?
Thanks guys for your ongoing help
Customer Support
Hi there,
1. When you select an Image Attachment size, GP will output the
widthandheightattributes in the<img>tag for the size you have chosen. The src-set will remain unchanged and WP will automatically output any and all sizes available for that image.NOTE: you need to use the Regenerate Thumbnails plugin to update any images that were uploaded before your added your extra image sizes.
2. Google will look in the
<head>of the site for a specific image link that would be provided by an SEO plugin. In its absence it checks the content for an<img>element. As hero elements don’t output an<img>, as they are CSS backgrounds, google won’t see that. And you should an SEO plugin to fix that.3. No, see back to #1
4. You can use CSS to resize images, but if you do so then the browser will NOT use the src-set sizes and will generally load the largest image by default. Personally i would avoid doing this by making sure to upload the correct ‘size’ images to start with. If it has to be done then try to only to do it for Desktop devices using an @media query where loading the largest image isn’t such a problem.
5. Yes, by default an
<img>will be displayed at the size that is select, back to #1 regarding width and heigh attributes. If the image sits inside a smaller container then it will automatically resize to fit the container.The thing with responsive images that are two main methods:
1. Art Direction which uses the newer <
picture>element that isn’t part of WP yet.
To quickly cover – this newer method allows you to exactly specify what image to be loaded at a very specific screen sizes or other media/support queries. WP may introduce this in the future, but its a very bespoke requirement that requires custom development.2. Standard src-set
<img>elements – which is what WP uses.
This provides the browser with the following:
widthandheightattributes to dictate the largest size the image will be displayed – don’t confuse this with the actual image that is loaded, its just the maximum number of pixels to fill.
src-set– a list of all the available images the browser can choose from.
sizeattribute that looks like a CSS media query, which sets some very simple rules for the browser. This will adjust according to the Size you selected.Now the browser will decide from that data what the best size image to load, based on the device screen size, the screen density ( HD / Retina to be considered here ) and the browser viewport size.
So adding extra image sizes isn’t necessarily going to improve responsiveness as the browser may never request them as those conditions may not be met.
Thanks David, this is awesome.
You said this:
hero elements don’t output an
, as they are CSS backgrounds
Does that even apply if in the element header I use a Dynamic Image block to pull the featured image in?
No, the Dynamic Image block will display an
<img>element.
I should have been clearer – its only when the Image is set as the Container Background.Ok great thanks David.
I’m going to run some tests to try and get my head around it
You’re welcome
Do you have any examples of sites that have the reference to the image in the <head>?
Ive looked a bunch of sites which I know use different SEO plugins, and non of them had reference to an image in the head
I’m a little confused haha
So yeah i was being a little vague with that answer.
For rich snippets to display your featured image, its best to create the JSON-LD schema to tell Google where to find it.
Which is where an SEO plugin comes in.
And for the best example – check this Yoast page:https://yoast.com/yoast-seo-12-4/
In the
<head>you will see a script tag like this:<script type="application/ld+json" class="yoast-schema-graph">And within the JSON-LD it includes there will be many schema properties including:
thumbnailUrlAh awesome David. Thanks for explaining.
I’ve read so much about this over the last few days. It’s confusing and definitely mixed info.
What I find funny is I’ve not seen one page from yoast on google showing a thumbnail. I know google doesn’t always do it. But interesting non so far shown from yoast.
On a separate not. I’ve foubb my d that the plugin shortpixel AI seems to fix most of my responsive image problems.
I don’t like to use the image compressors. I like to control that myself. But the short pixel ai plugin does stuff other then that
I’ve got some tests running to see how it goes.
Image ratios I’ve basically researched and tested that if it’s a standard 4:3 or a 16:9 it will show in google. That seems to be what I’ve found recently
If Yoast is displaying a rich snippet with the image, then I would assume its generating the JSON-LD structured data to generate that output ( might be worth checking with them ). Then its just may be a case of ‘waiting for Google’ – which isn’t overnight.
- You must be logged in to reply to this topic.