WordPress Image Management
Are you concerned about the cost of website hosting? This article explains how WordPress handles the images that you upload to the Media Library and how to conserve server space with WordPress images. It includes what you need to know about WordPress Image Management.
Why is image size important?
Image size is important for two reasons:
1. Server hosting space
Keeping images on a server has a cost to the website owner. Most hosting plans have limits on how many megabytes or gigabytes you can use. In addition, images stored on the server have an ecological cost. Storing images uses electricity.
2. Slow loading time
Loading images that are larger than necessary can slow down the time it takes for the web page to load. Slow load times for a web page can cause a loss of traffic to the website. In fact, Google uses the page load time as a factor in search results. If your website load less quickly, Google will send fewer visitors.
Images 1-2-3 on WordPress
In order to simplify image preparation for my students, I have a slideshow and modules on what I call, Images 1-2-3, for Cropping, Resizing and Optimizing. Here is a bit more detail on all three of these on WordPress.
1. Crop
When you upload images to WordPress, the thumbnail size is cropped. By default it is cropped to square. (The other images sizes are not cropped. You may want to crop before you upload to WordPress, since the thumbnail will crop to the middle. That way you have control of the cropping.
2. Resize
WordPress automatically creates at least 4 image sizes with each upload. The theme may create even more sizes. Choosing the right size for your space can speed your load time. You need to choose the right size image in Edit Post, Edit Product, or Edit Page. There are details instructions on how to do this later in this article.
3. Optimize
A plugin is required on WordPress for the “optimization” step. Optimization reduces the size of the image, generally without any reduction in quality. Bloggers who are concerned about website speed may use both Tiny PNG, and a plugin like Resmush-it to optimize their images. You can set the level of optimization on Resmush-it, the image optimization plugin I use and teach to my students.
A Bit of Perspective on Server Storage
For agencies and freelance developers, you biggest cost will be hosting space.
31MB: The size of adding WordPress to a website
30MB: The size of the Beaver Builder Page Builder
28MB: Astra Free Theme
5MB: The size of an image you take with your phone
.018MB or 18KB: The size of a 300 x 300 px image that has been optimized.
Multiple Image Sizes on WordPress
Every time you upload an image to WordPress, WordPress cuts the designated sizes of the images. Think through what image sizes you want for every website and set it BEFORE you upload images .
The default size for the thumbnail is rather small at 150 x 150 pixels. (Postage stamp size.) A better size (IMO) is 300 x 300.
See below for the sizes I recommend: 300 for the thumbnail, 600 for medium, and 1024 for large.
File Manager
To see the images cut for your website:
1. Open cPanel
2. Choose File Manager
3. Navigate to public_html -> wp-content -> uploads.
In the example at below, the original image name is Bora-Bora-Series-II.jpg. Each uploaded image results in 12 images on this website.
Note that the image sizes in pixels is displayed in the file name. The original image was 3.16 MB, which is way too large for web use.
Note also that there are more sizes than just the four in the settings. The theme or plugins also may need certain aspect ratios and sizes.
The Thumbnail
The Thumbnail image is displayed in the post or product listings. It is the only cropped image, so if you are showing images in a list, use the thumbnail. That way your image sizes have the same aspect ratio.
The featured image you set in Edit Page is used for post or product lists, like on the screenshot at right. Because they are all cropped to the same aspect ratio, the listing has an organized appearance. I recommend 300 x 300 for the post thumbnails. You can always display them at a smaller size, but you can’t make them larger.
The image below shows the thumbnails of web pages that were made by my students.
Note that the product images are set to a different aspect ratio, 4:3, by default.
Changing Your Sizes Retrospectively
If you change the image sizes in the setting, it doesn’t automatically recut all of the images to your new sizes. You need a plugin to recut all of your images. Here is one of those plugins. (When you need to do this, just Google for a plugin and you will find it.)
Image Regenerate & Select Crop
Using ReSmush.it
You can use the ReSmush.it plugin to save space on your website.
Make sure the Do not preserve backups is checked on your website. That removes the original (huge) image from the files and saves server space and reduces website costs.
WooCommerce Product Images
You can change the image size and Aspect Ratio for WooCommerce images. Just go to Customize -> WooCommerce -> Product Images
Block Editor
Choose the right size image for the spot, so that your web page loads more quickly.
If you use the default, the full size image will be used, and your web pages will load slowly.
What About Videos?
A three-minute HD video is 135MB. That is gigantic!
In most cases, you want to avoid uploading videos to your WordPress website. Instead, upload them to YouTube and embed them on the website.
If you are interested in learning more about WordPress, we have what you need! If you would like to learn more about images, see Module 12 of the HTML/CSS Curriculum.