In Settings > Media I have defined ‘Medium size’ as Max Width: 470 and Max Height: 470.

I am using the following code to place a medium-sized image on a page:

<?php the_post_thumbnail('medium'); ?>

However it is placing the ‘medium-large’ size image instead. Although the image occupies 470px-wide box, the file loaded is 768×512.

This is the code being produced:

<img width="470" height="313" src="https://(path-to-image)/HiRes-470x313.jpg" class="attachment-medium size-medium wp-post-image" alt="Image alt" decoding="async" srcset="https://(path-to-image)/HiRes-470x313.jpg 470w, https://(path-to-image)/HiRes-208x138.jpg 208w, https://(path-to-image)/HiRes-768x512.jpg 768w, https://(path-to-image)/HiRes-1536x1024.jpg 1536w, https://(path-to-image)/HiRes.jpg 1920w" sizes="(max-width: 470px) 100vw, 470px">

As the src refers to an image which is 470px wide I don’t understand why the larger image is appearing instead. How can I correct this so it isn’t needlessly loading a larger image than the page requires?

I realised that the featured image on top of blog posts is causing a CLS value in Google PageSpeed of around 0.10 – now I have deactivated the featured images on top of each post completely.

The reason seems to be this line of code:
the_post_thumbnail( ‘ashe-full-thumbnail’ );

And then a 300x300px image is loaded and downsized to 200x200px – the theme developers could not fix it and suggested to reach out to the core team. Not sure if there would be any way to load the post thumbnail in a way that it is not scaled down and the wight and height attributes are matching the picture…?

But probably in one of the next versions this can be considered.

Thx,
Mirko

I’ve been going through quite some forums, all saying the same. Namely to use the_post_thumbnail() to show the blog image. How-ever I can not get it to work.

In my functions.php I added the support for thumbnails:
add_theme_support( 'post-thumbnails' );

In my home.php file I added the following code (hopefully it is correct):

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

   <?php the_post_thumbnail();?>

<?php endwhile; else : ?>
		 
   <?php _e( 'No pages found.' ); ?>
		 
<?php endif; ?>

When I used “the_excerpt()”, the image DOES show up.

What am I missing here?

Ok, thank you & take care

I am thinking that “safe-svg” and your plugin might have a conflict.
Has anyone else experience this issue or have any insight.

Thanks

			<?php
// the_post_thumbnail( 'post-image' );
$myEyeCatch_attr = array(
	'src'   => $src,
	'class' => "attachment-$size",
	'alt'   => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) ),
	'align'	=> "left",
	'style'	=> "margin:0 10px 0 0;"
);
the_post_thumbnail( 'thumbnail' , $myEyeCatch_attr );
?>

Version:Featured Image from URL:2.5.4;
Site:https://motpresse.votre.space;
Theme:Lovecraft 1.30;
Plugins:Akismet Anti-Spam (akismet), All In One SEO Pack (all-in-one-seo-pack), Classic Editor (classic-editor), CSS & JavaScript Toolbox (css-javascript-toolbox), Featured Image from URL (featured-image-from-url), Google XML Sitemaps (sitemap), Merge + Minify + Refresh (merge-minify-refresh), Movable Type and TypePad Importer (movabletype-importer), Nelio External Featured Image (discontinued) (nelioefi), Really Simple SSL (really-simple-ssl), WordPress Ping Optimizer (wordpress-ping-optimizer), WP Multibyte Patch (wp-multibyte-patch);
PHP:7.1.30;
WooCommerce:;
WordPress:5.2.2;
Pages:3;
Posts:30;
Products:;
fifu_auto_alt:toggleon;
fifu_column_height:64;
fifu_content:toggleoff;
fifu_content_page:toggleoff;
fifu_css:;
fifu_data_clean:toggleoff;
fifu_data_generation:toggleoff;
fifu_default_url:;
fifu_enable_default_url:toggleoff;
fifu_fake:toggleoff;
fifu_fake2:toggleon;
fifu_get_first:toggleoff;
fifu_grid_category:toggleoff;
fifu_hide_page:toggleoff;
fifu_hide_post:toggleoff;
fifu_image_height_arch:;
fifu_image_height_cart:;
fifu_image_height_ctgr:;
fifu_image_height_home:;
fifu_image_height_page:;
fifu_image_height_post:;
fifu_image_height_prod:;
fifu_image_height_shop:;
fifu_image_width_arch:;
fifu_image_width_cart:;
fifu_image_width_ctgr:;
fifu_image_width_home:;
fifu_image_width_page:;
fifu_image_width_post:;
fifu_image_width_prod:;
fifu_image_width_shop:;
fifu_lazy:toggleoff;
fifu_original:toggleoff;
fifu_ovw_first:toggleoff;
fifu_pop_first:toggleoff;
fifu_priority:toggleoff;
fifu_save_dimensions:toggleoff;
fifu_save_dimensions_all:toggleoff;
fifu_social:toggleoff;
fifu_wc_lbox:toggleoff;
fifu_wc_zoom:toggleoff;

Does wordpress create an image of that size? Where is it stored?

Or is it a temporary file that is generated every time the page is visited?

Thanks

Can anyone out there develop a snippet that might work for this scenario?

I see the problem exists because you do not clean the sizes in the _wp_attachment_metadata for the mentioned scenario, so after regenerating thumbnails we still have thumbnail size 150×150 in the ‘sizes’ meta. I needed to manually empty ‘sizes’ (set them to array()), because our image is smaller than any thumbnail size, so it does not have thumbnail 150×150 now.

changing the value of the array, (188,188) to something else changes it just for the first image. all other images stay the same.
here is an example https://prntscr.com/f6pjc9

Now wordpress stores a static image of it under thumbnail. Is there a way I can switch to from the_post_thumbnail(‘large’) to the_post_thumbnail(‘thumbnail’) when a user browses via mobile?

I know this exists https://codex.www.ads-software.com/Function_Reference/wp_is_mobile
But I heard it’s a a bad idea to check useragent server side

Another solution I thought is I could place

the_post_thumbnail(‘large’)
and
the_post_thumbnail(‘thumbnail’)
together and use css @media queries to hide them accordingly however, if I use bootstrap or css @media display:none It would still load the hidden objects in the back but only not display them right?