Your organization’s process for uploading images to your WordPress media library and website will ultimately have a big impact on your website in the long run—both internally for different stakeholders (like authors and editors) and externally for visitors and users.
Image optimization
Image optimization (size, file type, resolution) will impact multiple facets of your website. First, most website hosting has limited database sizes: for example, both WP Engine and Kinsta cap out at 10 GB of total storage for your website. If you upload an average image off of a free image website like Unsplash or an iPhone camera, that might take up 5 MB. We should take into account that the 10 GB total has to include some mix of the following:
- Initial WordPress installation
- Design of your website
- Themes and plugins
- Pages, posts, and more
- Some amount to be kept free for system performance and stability (let’s say 2GB)
This means that on content heavy sites, unoptimized images can quickly chip away at our total database size. On the contrary, optimizing images before uploading them means we can fit way, way more.
If we look at an average 5MB image, chances are it is oversized (like 5000 x 5000 pixels) and is in an unoptimized format (like PNG). If we shrink that down to 2200 pixels and convert it to .webp, we can likely get that image size down to between 200KB to 1MB. Further, if we optimize it by running it through software like tinypng.com, we can further shrink the image size all the way down to 50 KB or less.
To put it in perspective, 100 images at 50 KB take up the same amount of storage space as one image at 5MB.
Website speed
Larger images can have a significant impact on website speed, especially for mobile users.
Folders and naming
In a standard WordPress environment, images cannot be renamed after upload. WordPress does not have a native folder editing system to organize them. This means that what you name your images will be the primary way that you can search and find them in the future, especially as you grow your media library to hundreds or thousands of images.
Can I optimize images already uploaded to my image library?
Truthfully, it can be difficult to optimize images you’ve already uploaded. This means integrating software, like a plugin, on your website and maybe even an API key, to optimize images. This creates a few potential problems:
- Heavy resource usage on your website;
- Potentially having to pay for the plugin and API key for the third party to optimize images;
- Sharing data and potentially sensitive information with the third party;
- Images getting renamed or creating duplicate images in your library
The solution: optimize images before you upload them to your website
To keep your website running smoothly, only upload images that you’ve optimized first. Here’s an easy three-point checklist to review before uploading an image to your media library:
- Check the image size. The smaller the better; there is no must-have size before uploading to your site. Performance optimized images will be under 100KB or even 50KB, while it might be acceptable to have an image between 200KB and 500KB depending on where it is on the page and what it’s purpose is (for example, if a higher resolution is absolutely required or if it appears lower on the page, and therefore doesn’t impact initial page load)
- Check the image file type. WebP images are often smaller in size and optimized for websites, while PNG and JPG may have unnecessarily larger file sizes.
- Check the image name. Are you naming the image something that reflects what it is and will be easily searchable later? Are you adhering to some kind of basic naming system to help categorize images? For example, flatart-teacher.webp or icon-star.webp might help you when searching later for flat art or icon images to use in later posts or pages.
Doing the right thing initially will help you save time and frustration down the road as your website scales and grows.
