Images are an important element in website design, which not only affects the aesthetics of the website, but also directly relates to the performance and user experience. In WordPress While images are relatively easy to work with, understanding and setting image sizes is critical to ensuring that your site loads quickly and displays images optimally. Let's explore in more detail WordPress Sizebest practices and describes how to customize image sizes based on your website's needs.

1. WordPress Default Image Size

WordPress automatically generates for each image when you upload itMultiple sizes, to ensure that the images remain optimal when displayed in different positions. These sizes include:

• Thumbnail: 150 x 150 pixels
  • Uses: for galleries, widgets, blogspreviewsand other small image displays.
• Medium: 300 x 300 pixels
  • Use: Ideal for use within blog posts, smaller banners or pages.
• Large: 1024 x 1024 pixels
  • Usage: for page titles, sliders,Featured Imageand other large-size displays.
• Full Size: Size of the original uploaded image
  • Usage: Anywhere within the site where the original image needs to be used (e.g.product page).

By default, WordPress automatically selects the most appropriate image size for different locations. For example, a thumbnail image might be used for a blog preview, while a large image is suitable for a header image or banner. By using these sizes wisely, it is possible to speed up the loading of your site while keeping images clear and adapting to different screen sizes.

2. Recommended image sizes for common uses

In addition to the sizes generated by WordPress by default, using the right image sizes for different web elements can optimize your site's visuals and performance. Here are some recommended sizes for common image uses:

• Featured Image(Featured Image)::
  • Recommended size: 1200 x 630 pixels
  • Purpose: Appears mainly at the top of blogs or pages to attract visitors' attention.
• Header/Background Image::
  • Recommended size: 1920 x 1080 pixels
  • Purpose: Used as a background image or banner image on a page to provide a full-width visual effect, adding depth and design appeal to the page.
• Website Logo (Logo)::
  • Recommended size: 250 x 100 pixels
  • Purpose: For headers or footers that stay clear and don't take up too much space.
• Website Icon (Favicon)::
  • Recommended size: 512 x 512 pixels
  • Purpose: Used for small icons in browser tabs and bookmarks.
• E-commerce product image (Product Image)::
  • Recommended size: 800 x 800 pixels
  • Usage: For WooCommerce or other e-commerce platforms to ensure clear visibility when displaying products.
• Social Sharing Image (SSI)::
  • Recommended size: 1200 x 630 pixels
  • Purpose: Used for thumbnails displayed when sharing on social media to ensure clarity and appeal.

take note of: When selecting image sizes, it is recommended that a consistent aspect ratio be maintained. For example, a header or featured image may use 16:9 The percentage ofthumbnailfailing agreement 1:1 Proportions. Avoid stretching or cropping the image, which can affect the visual effect.

3. How to Resize Default WordPress Images

Sometimes WordPress default image sizes may not be adapted to your specific needs, you can easily adjust these sizes. The resizing process is as follows:

1. Go to Media Settings::
   • Log in to your WordPress dashboard and click set up > media, esp. news mediaThe

2. Editing Image Size::
   • On the Media Settings page, you'll see the default image sizes that can be adjusted: thumbnail, single image, and large image width and height.
   • Modify these dimensions to match your design requirements.

3. Save Changes::
   • After resizing the image, click Save Changes button to apply the settings.

take note of: Changing the default size will only affect newly uploaded images, images that have already been uploaded will not be automatically resized. If you want to update the size of an existing image, you need toRe-generate thumbnailsThe

4. How to add customized image sizes

If you need to use a specific image size for your website, you can add a custom image size by doing the following:

1. Edit the functions.php file::
   • First, open the theme's functions.php Documentation. It is recommended that thesubthemeto avoid losing changes when the theme is updated.

2. Enable Thumbnail Support::
   • Make sure the theme has thumbnail support enabled. If it doesn't, you can add thumbnail support to the functions.php Add the following code to the file:

add_theme_support('post-thumbnails');

3. Adding custom image sizes::
   • exist functions.php Add the following code to the file to define the image size you want:
   • Can be adjusted as needed 600 respond in singing 400and change 'custom-size' for your favorite name.

add_image_size('custom-size', 600, 400, true); // width, height, crop

4. Using custom sizes::
   • In the theme file, call your customized image size:

the_post_thumbnail('custom-size').

5. Re-generate thumbnails::
   • For an existing image, use an image such as Regenerate Thumbnails plugin to regenerate the thumbnails of all the images, making sure they apply the new dimensions.

If you don't want to get into code manipulation, you can use something like Perfect Images Such plugins to easily manage and add custom image sizes.

5. How to edit image size directly in WordPress

WordPress comes with image editing features to resize images after upload, includingCrop, rotate or resize. Here's how the Classic Editor respond in singing Gutenberg Editor Steps for editing an image in the

existClassic EditorEdit the image in the

1. Open Media Library::
   • switch to media, esp. news media > storehouse, select the image to be edited.
2. Access to the image editor::
   • Click on the image below the Edit Image button to open the editor.

3. Cutting or resizing::
   • To crop the image, click and drag the crop box to select the area to keep, then click the cropThe
   • To resize the image, enter the new width and height. WordPress will automatically adjust the other value without modifying the aspect ratio.
4. Save Changes::
   • strike (on the keyboard) save (a file etc) (computing) button, the updated image will replace all locations on the site that use that image.

exist Gutenberg EditorEdit the image in the

1. Insert Image Block::
   • In the Gutenberg editor, click the plus button to add a picture block, select an image from the media library or upload a new image.
2. Resizing images::
   • Adjust the width and height of the image in the Settings panel on the right, or resize it by dragging the edges of the image directly in the editor.

3. Cropping and Scaling::
   • If you need to crop or further scale the image, you can click on the media library button opens the full image editor, following the classic editor.

4. Save and Preview::
   • Changes made in the Gutenberg editor are displayed in real time, so you can see the results immediately.

6. Image optimization

Image optimization is crucial in order to improve website loading speed and user experience. Here are some common optimization tips:

• compressed image: Use tools (e.g. TinyPNG maybe Imagify) Compresses image file size to ensure clear images while reducing unnecessary loading time.
• Using WebP specification: The WebP format is more efficient than traditional JPEG and PNG formats, reducing file size while maintaining high quality images.
• start usinglazy loading (computing): Lazy loading technology speeds up page loading by ensuring that images are loaded only when the user scrolls to where they are.
• Image Size Adaptation: Ensure that the size of the uploaded images is adapted to the actual needs of the website and avoid uploading oversized image files.

7. Summary

Image is a key element in website design, not only affecting the visual effect of the website, but also directly related to the performance and user experience. In order to ensure the loading speed and image presentation of your WordPress website, it is crucial to understand and set the image sizes wisely.WordPress provides default image sizes such as Thumbnail, Medium, Large, and Full, and users can adjust these sizes or add custom sizes according to their needs.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off