WordPress - Featured Image

Question

I am trying to optimize my site that uses Featured Image. When I turn to some of the analysis tools, they call out that I am loading much larger images than I need to for the thumbnails.

This is because WordPress uses the same URL for both the full size picture and the thumbnail. The result is that WordPress is downloading the large picture twice, then scaling the size down to fit the thumbnail.

Is there anyway around this? Such as, is there some way to put in a different URL for the thumbnail that points to a smaller image file?

Thanks

Answer 1

First of all, its not about WordPress its about the theme that you use. By default WordPress function like this:

<?php 
  if ( has_post_thumbnail() ) {
    the_post_thumbnail("full")
  } 
?>

will return something like this:

<img width="1500" height="1276" src="path" class="post-img-full wp-post-image" alt="" srcset="path 1500w, path-300x255.jpg 300w, path-768x653.jpg 768w, path-1024x871.jpg 1024w, path-1080x919.jpg 1080w" sizes="(max-width: 1500px) 100vw, 1500px">

which is quite right and modern. And you can see that it uses different paths not only for each thimbnail but it changes the image depends on the screen width. Here 'Path' should be the real path

Answer 2

First add new size for featured image in functions.php

 if ( function_exists( 'add_image_size' ) ) { 
    add_image_size( 'special', 250, 150,true );   
}

The second stage of the call featured image

<?php $img = wp_get_attachment_url( get_post_thumbnail_id($post->ID),'special' ); ?>

<img src="<?php echo $img ?>" />