Image sizes in WordPress theme


Default image sizes

By default, WordPress comes with four (4) image sizes:

  • Thumbnail: 150px (square)
  • Medium: Max width and height of 300px
  • Large: Max width and height of 1024px
  • Full: The original size of the image

In addition to default images sizes, WordPress theme might offer its own image sizes as well.

Themes Harbor image sizes

Our professional WordPress themes come with extra image sizes to fit overall design.

Prosperity

Image size identifierUsage location
prosperity-large-thumbnail-imageOn pages with full width content
prosperity-fullscreen-imageFront Page template
prosperity-thumb-imageTestimonials (Jetpack)

Aquene

Image size identifierUsage location
aquene-fullscreen-imageSingular views, Featured Content (Jetpack)
aquene-large-imageArchive views
aquene-square-imageFeatured Content (Jetpack)

Hermes

Image size identifierUsage location
hermes-featured-imageOn pages with active featured image

Appetite

Image size identifierUsage location
appetite-standard-imageFront Page template, Grid templates

Venture

Image size identifierUsage location
venture-standard-imagePortfolio (Jetpack)
venture-banner-imageArchive views
venture-featured-imageSingular views, Featured Content (Jetpack)
venture-square-imageTestimonials (Jetpack), Front Page template

Fortune

Image size identifierUsage location
thumb-imageTestimonials (Jetpack)

Change image sizes in WordPress

Image sizes can be modified. If default dimensions do not fit your needs then you can edit them to use own custom sizes.

Change default image sizes

WordPress provides options for changing default image dimensions.

In WordPress dashboard:

  1. Navigate to the Settings > Media.
  2. Locate the Image sizes section.
  3. Change width and height of the image size you need.
  4. Save the changes.

Note, installing a new theme will likely override any changes made to the Media Settings.

Change theme image sizes

Modifying additional images sizes from a WordPress theme is different compared to default image sizes.

Instead of pre-defined options, it requires to use a custom code.

For example, to override image size used in singular views in Aquene, the following code snippet should be added:

// Change the theme image sizes.
function themesharbor_modify_default_image_sizes() {
	add_image_size( 'aquene-fullscreen-image', 1000, 800, true );
}
add_action( 'after_setup_theme', 'themesharbor_modify_default_image_sizes', 99 );

The code above changes images with aquene-fullscreen-image identifier to 1000x800px.

For more detail information on how the image size functionality works, see add_image_size documentation.

Common misconception

Editing the image size setting does not automatically change the images displayed on the website because WordPress does not have such functionality.

Although new images will be adjusted to the new settings, previously uploaded images will have old sizing.

Until you manually regenerate them.

Regenerate images in WordPress

To use the new image sizes, you need to regenerate images. In other words, tell the WordPress to re-upload all your existing images, so new settings can take place.

Regenerate using a plugin

Use the Regenerate Thumbnails plugin to regenerate all images in the Media Library or just specific images on a website.

In WordPress dashboard:

  1. Install and activate Regenerate Thumbnails.
  2. Navigate to Tools > Regenerate Thumbnails.
  3. Click the big button to regenerate thumbnails in the Media Library.

To regenerate specific images:

  1. Navigate to the Media Library.
  2. Click on a thumbnail to open image settings.
  3. Locate Regenerate Thumbnail button at the bottom right-hand side.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.