Set spesific size of featured images

Question

I am trying to reduce the loading speed of my webpage. Google PageSpeed Insights tells me to optimize my images. In the following code, how can I set an image size so that if the uploaded image is 99999x99999px the rendered image is maximum 427px wide?

<?php
if ( has_post_thumbnail() ) {
    echo '<a href="' . get_permalink($post->ID) . '" >';
    the_post_thumbnail();
    echo '</a>';
} else {
    echo '<a href="' . get_permalink($post->ID) . '" ><img src="'. get_stylesheet_directory_uri() . '/img/fallback-featured-image.jpg" /></a>';}
    ?>

I would like Wordpress to handle this automatically so that I do not have to worry about cropping my images before I upload. It is also always nice to have the original size, but We do not want the user to wait for such a large image to load.

Answer 1

In your functions.php you want to issue a call to set_post_thumbnail_size()

https://codex.wordpress.org/Function_Reference/set_post_thumbnail_size

As with add_image_size, you provide the target width, height & whether you want the image hard cropped to these dimensions. So, for example,

set_post_thumbnail_size(427, 427, true);

will crop all your thumbnails to be a maximum of 427px high or wide, depending on aspect ratio of the original.

If you use

set_post_thumbnail_size(427, 9999);

then your images will be scaled to 427px wide without being cropped.