WordPress Images Sizes: Easy Best Practice Guide

0

WordPress Images Sizes: Easy Best Practice Guide

Getting WordPress image sizes right is essential because they impact a website’s appearance, speed, and user experience (UX).

Large-size images can consume too much space on your WordPress website, resulting in longer loading time and higher bounce rates.

This article will explain everything you need to know about WordPress image sizes to balance web aesthetics and performance. We’ll explain WordPress default image sizes, show you how to change them, and share top tips for optimizing your WordPress images.

How WordPress Processes Images

Whenever you upload an image, WordPress will adjust it automatically to the default image sizes:

  • Thumbnail size. 150px square.
  • Medium size. Maximum height and width of 300px.
  • Large size. Maximum height and width of 1024px.
  • Full size. The original image size you upload.

These WordPress default image sizes help you upload images quickly as you don’t have to resize them manually.

The predetermined sizes also make sure that the images suit their locations on the website. For instance, the size of a blog post image will be different from a featured image on the sidebar.

How to Change Default Image Sizes

Although WordPress provides the default settings, you may want to have bigger featured images or smaller thumbnails. Don’t worry, it’s possible to change them to meet your preferences.

Follow these steps to change WordPress default image sizes:

  1. Go to the WordPress admin dashboard.
  2. Click Settings -> Media.
  3. On the Media Settings page, edit the image dimensions for each size.
  4. Press the Save Changes button to confirm the new settings.

How to Add Custom Image Sizes

WordPress only offers four default image sizes. You will need to add custom WordPress image sizes if you need pop-up banners, widgets, or slider pictures.

You can have additional image sizes by coding manually.

For a no-coding option, use the Image Regenerate & Select Crop plugin by following these steps:

  1. Click Plugins on the admin dashboard -> Add New.
  2. Find the plugin via the search bar.
  3. Click Install and Activate.

  • Navigate to Settings -> Media. At the footer, you should see a section to add custom image sizes.

  • Hit the + button. Enter the height, width, and crop option if necessary. Repeat the steps to add as many custom image sizes as you need.
  • Click the Save Changes button.

Note that your previous images won’t automatically adjust the new custom image settings.

To update the existing image sizes, regenerate the images by going to Image Regenerate & Select Crop > General Settings. Then, click the Regenerate button.

WordPress Image Optimization Best Practices

This section will show you four best practices for optimizing images on your WordPress website.

Choose the Right Image Format

If you use image editing software, you can pick a specific image file type to save it as.

Generally, online images fall under two categories:

  • The best option for photos and pictures that have a wide variety of colors.
  • The best choice for drawings, graphics, and texts and supports transparency.

An online tool to convert PNG to JPG or vice versa is jpg2png. There is no need to create an account as you just drop files to the selected area or click the Upload Files button.

Alternatively, install the PNG to JPG plugin to convert images in WordPress automatically. The tool can also turn your existing PNG images into JPG.

Use Recommended Image Sizes

The first step is to determine the placement of images on the website and measure the optimal dimensions. For best results, images should be as large as necessary to fill the available space based on the layout.

A browser extension like Page Ruler Redux is helpful to get the exact pixel measurements of website elements. To use this tool, click the extension and draw the ruler around the intended area.

In general, here are the recommended image sizes for different scenarios:

  • Full-width images.
  • Maximum height of 1500px.
  • Blog or static images. Depend on the content area, usually up to 1500px of width.
  • Featured images. Depend on your template or theme, but make sure to have consistent image size and style – portrait or landscape.

Resize Images

In physical printing, having high-resolution images is a must. However, these images usually have larger image file sizes. A rule of thumb is keeping the file size a maximum of 500 KB.

If you have large image file sizes, consider using one of these tools to compress them:

  • An online image compression tool. g., Image Compressor and ShortPixel. Just upload the images or drop the files in the section.

  • A WordPress plugin.g., Imagify and Optimole. They will compress images automatically in every upload.

Write Title Tags and Alt Text

Title tags and alt text or alt tags help search engines understand what the images are about.

Title tags refer to the file names. Make them descriptive before uploading the images to WordPress for better optimization. For example, use young-husky-dog.jpg for a dog image instead of img_1234.jpg.

Meanwhile, alt text is HTML attributes applied to image tags. Besides helping search engines crawl the page, it can also improve your web accessibility. Alt text will appear if the image fails to load on a user’s device and help screen readers describe the pictures to impaired users.

To add alt text in WordPress, click an image block and type in the alt text on the right sidebar.

Conclusion

WordPress image sizes may seem trivial, but they have many requirements and play essential roles in website performance.

WordPress gives its users four image sizes by default: thumbnail, medium, large, and original. These options may not suit your needs, so change the default settings or add custom image sizes.

In this article, we’ve also learned four best image optimization techniques, including:

  • Picking the correct format, whether it’s JPG or PNG.
  • Using the most suitable image size for each purpose.
  • Resizing images with a compression tool.
  • Writing title and alt tags for each image.

We hope you can pick the correct dimensions for your WordPress images by using the methods mentioned in this article and make visitors enjoy navigating the website.

LEAVE A REPLY

Please enter your comment!
Please enter your name here