CODEWITHSUNDEEP
wordpresswordpress-themingcustom-wordpress-pageswordpress-featured-image
Blaise
Blaise

Reputation: 41

WordPress - Featured Image

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

Upvotes: 1

Views: 423

Answers (3)

Atakan Yıldırım
Atakan Yıldırım

Reputation: 902

In addition to other responses, you can also easily accomplish this in two ways:

1. Filtering the post_thumbnail_size:

/** 
 * Modify the post thumbnail size based on the context
 */
function resize_post_thumbnail_size( $size ) {
    if ( is_singular() ) { // for posts and pages
        $size = 'large';
    } elseif ( is_front_page() ) { // for home page
        $size = 'medium_large';
    } elseif ( is_archive() || is_search() ) { // for query pages, such as categories and search pages
        $size = 'medium';
    }

    return $size;
}

add_filter( 'post_thumbnail_size', 'resize_post_thumbnail_size' );

2. Using Gutenberg

If you use a Gutenberg theme, create a child theme and add the sizeSlug attribute to your wp:post-featured-image block in posts, pages, or query loops. The sizeSlug can refer to default or custom thumbnail sizes like "thumbnail", "medium", "large", or "custom-size".

Example:

<!-- wp:post-featured-image {"sizeSlug":"large","isLink":true,"aspectRatio":"16/9"} /-->

Upvotes: 0

Ehsan Rafiee
Ehsan Rafiee

Reputation: 321

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 ?>" />

Upvotes: 0

Artemiy Egorov
Artemiy Egorov

Reputation: 61

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

Upvotes: 0

Related Questions