When building a custom WordPress theme, especially one designed by someone else, it’s helpful to use the specific image size that is required for that part of the page.
It matters even more so in today’s world of responsive design and mobile first where somebody might be viewing your site on an iPhone over 3G. The last thing you want to do in that situation is force them to download a 2000px wide image that’s only going to fit in a 300px wide space.
There is some debate when it comes to the blurriness of imagery on retina screens, which the iPhone has, but general photography will work fine at 300px wide in a 300px wide space, especially if it has a lot of detail because that tends to overpower the loss of quality from the retina screen showing it at 2x the original size.
Note: If you create a custom image size after uploading an image, you’ll need to use a tool like Regenerate Thumbnails for it to be cropped to the correct size.
function theme_setup() {
// Hard crop: The image will be exactly the specified size
add_image_size('Blog Thumbnail 1', 300, 200, true);
// Soft crop: Preserves the aspect ratio, the image may end up taller than 200px
add_image_size('Blog Thumbnail 2', 300, 200);
}
add_action('after_setup_theme', 'theme_setup');Below you can find a few ways to output one of the custom image size we registered above.
// Outputs the entire image tag
the_post_thumbnail('Blog Thumbnail 1');
// Outputs just the image URL
the_post_thumbnail_url('Blog Thumbnail 1');Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.