get_the_post_thumbnail src attribute value

chebum
(@chebum)

9 years, 4 months ago

What’s the reason for the get_the_post_thumbnail method to put a link to the full res image in the src attribute?

I have a hi-res featured image for a post. In the post list I’m displaying post thumbnail 300 pixels wide. WordPress produces correct secret attributes so that browsers load low-res images but not original hi-res image.

However, src attribute of the img tag contains a link to the original hi-res image. The downside of that behavior is that Google PageSpeed thinks my website is slow. According to current information slow websites get worse SEO-ratings than faster performing ones.

So my question is why is this the default behavior and if there any way to change it?

Viewing 5 replies - 1 through 5 (of 5 total)

Bunty
(@bhargavbhandari90)

9 years, 4 months ago
You can do something like this. Just pass the image size as 2nd parameter.
```
get_the_post_thumbnail( $post_id, 'thumbnail' );      // Thumbnail (Note: different to Post Thumbnail)
get_the_post_thumbnail( $post_id, 'medium' );         // Medium resolution
get_the_post_thumbnail( $post_id, 'large' );          // Large resolution
get_the_post_thumbnail( $post_id, 'full' );           // Original resolution
```
Thread Starter chebum
(@chebum)

9 years, 4 months ago

Thanks for the reply @bhargavbhandari90. That’s what I do. Unfortunately, this only adds width, height attributes to the img tag but doesn’t scale the image.

Here is my code:
echo get_the_post_thumbnail( get_the_ID(), $image_size );

and this is what it produces:
<img width="355" height="237" src="https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large.jpg" class="attachment-nakamura-port-list-landscape size-nakamura-port-list-landscape wp-post-image" alt="Portfolio-stylistka-julia-nikitina-Marta12" srcset="https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large.jpg 1620w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-300x200.jpg 300w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-768x512.jpg 768w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-1024x683.jpg 1024w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-1200x800.jpg 1200w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-425x283.jpg 425w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-650x433.jpg 650w, https://nikitina.pl/wp-content/uploads/2016/12/julia-nikitina-portfolio-Marta112-Large-1300x867.jpg 1300w" sizes="(max-width: 355px) 100vw, 355px">

As you can see the src tag references full-res post featured image.

Thread Starter chebum
(@chebum)

9 years, 4 months ago

Aha. I found the issue. The problem happens only with images that were uploaded BEFORE new theme were applied. Exact size weren’t generated and thus not shown.

However, I still don’t understand why julia-nikitina-portfolio-Marta112-Large-425×283.jpg wasn’t selected.
Thread Starter chebum
(@chebum)

9 years, 4 months ago
deleted
- This reply was modified 9 years, 4 months ago by James Huff.
- This reply was modified 9 years, 4 months ago by chebum.
Bunty
(@bhargavbhandari90)

9 years, 4 months ago
I tried by this:

echo get_the_post_thumbnail( get_the_ID(), 'medium' );

And got this:

<img width="300" height="225" sizes="100vw" srcset="http://localhost/wordpress/wp-content/uploads/2017/01/Chrysanthemum-300x225.jpg 300w, http://localhost/wordpress/wp-content/uploads/2017/01/Chrysanthemum-768x576.jpg 768w, http://localhost/wordpress/wp-content/uploads/2017/01/Chrysanthemum.jpg 1024w" alt="" class="attachment-medium size-medium wp-post-image" src="http://localhost/wordpress/wp-content/uploads/2017/01/Chrysanthemum-300x225.jpg">

So check if “$image_size” has some value or not. Try by putting static image size like I did.

Also check all image sizes by installing “AJAX Thumbnail Rebuild” plugin.
- This reply was modified 9 years, 4 months ago by Bunty.