Speed up your WordPress website (and save space) by automatically limiting maximum image size
We’ve all visited websites that loaded SLOW. We see one image load, then finally another one. Or maybe, it just seems to take forever, and then we see the main top image load. Today, this is more likely on our phones, or if you just have slow internet to your desktop.
This website slowness is frequently due to a much larger image, or multiple much larger images, being displayed inside a much smaller area. Depending on your workflow, it can be all too easy for these overly large images to be used.
I will do two things in this post.
1) I will use an example image and show how automatic resizing makes a difference.
2) I am going to show an example of a random website I found online with oversize images, and demonstrate the problem.
WORDPRESS IMAGE DEFAULTS
Looking at a somewhat basic install of WordPress, there are three sizes that will be made from the uploaded image:
Thumbnail: 150 pixels wide
Medium: 300 pixels wide
Large: 1024 pixels wide
By default, the Full-Size image will remain the same size as uploaded.
Note: It is possible to add more automatic image sizes within WordPress.
The image I am using for this post is a wide image snapped with a Galaxy S9 from when we visited the Adirondacks.
This image was originally 16meg, but was upside down. Simply rotating in an image editor, and then resaving lowered size to 11meg. The original size is: 6880 pixels wide, 2176 pixels high.
When I upload this image to WordPress without the maximum size limiting, the three sizes above are created, and of course, the original image remains.
This introduces three problems:
- an image that isn’t likely to be useful
- an image taking up an inordinate amount of space. This will affect your storage quota, the size of your backup file, etc.
- available images are either too small, or too big.
The optimal is to have an image that is both not any larger than needed, and compressed just a bit to save a bit more space.
WordPress will do a bit of compression for you. Currently, a .jpg will by default be compressed to 82% (this ratio can be modified).
What is the correct maximum size? If your website is designed to display at a resolution of 2000 pixels, then you’ll need an image this size. In general, this isn’t the usual.
The next consideration is Open Graph. If you share a webpage to Facebook, the image that is displayed along with your post is required by Facebook to be at least 600 x 315 pixels. Otherwise, no image will be shown on the share.
I used to size my images at a maximum of 1024 pixels wide.
Recently, I discovered that LinkedIn requires images to have a MINIMUM size of 1200 pixels wide in order to be shown when sharing to their platform.
Because of this, I now use 1200 pixels as my maximum image site setting, instead of 1024.
IMAGE RESIZING SOLUTION
There are two plugins that I recommend for resizing images.
Note: Another high-quality image resizing plugin is: Imsanity (https://wordpress.org/plugins/imsanity/) , but you only need one or the other of these.
IMAGE SIZE USING EWW IMAGE OPTIMIZER
Using my example image, I am going to upload it to DR7Media, where I have configured the EWWW plugin to resize all images larger than 1200 pixels to resize to 1200 pixels wide, with the default 82% compression provided by WordPress for .jpg images.
After I uploaded the image, the width was reduced dramatically, and substantially the image size went down. Look:
Width: 6880 pixels
Height: 2176 pixels
Size: 11 Meg.
Width: 1200 pixels
Height: 389 pixels
This now gives you an image that in most use cases is more than large enough, and will work great for social media shares AND saves space, and most importantly – downloads to the viewer’s web browser SO MUCH FASTER.
REAL LIFE CASE OF IMAGES TOO LARGE
I am going to use a random website I found online that has a full-width header at the top, with rotating images. They are ALL too large. In the body of the webpage, there are embedded images being displayed much, MUCH smaller than they really are.
This website is: http://theambassadorcompanies.com/ so if you want to follow along, you can.
IF you are on really fast Internet, for the most part you won’t see too much of a slowdown. However, if you are on 4G, or 3G (shudder), this problem becomes quite apparent.
Of particular interest is that the same images are being used on mobile, as for a full desktop site. One of the cool things you can do is detect browser size, and serve images that are relatively appropriate. For instance, on a small mobile, serve a smaller image.
The top part of the home page looks like:
This same site in mobile:
The top background image is the same size on both desktop and mobile.
As you can see, it is huge.
The background image is 2945 pixels wide, even on a mobile device. A little resizing would be great. Displaying a much smaller image on mobile would be optimal.
Further down the webpage are image links. See:
You can see how this image is being displayed at 303 pixels wide, but is actually 2945 pixels wide.
- The slower the internet connection, the worse the impact of having too large of images.
- Cellular (data on phone) is slower.
- 3G (shudder) is extremely slow, and will really be painful with large images.
RECOMMEND: Read my article about not even loading images til needed: Lazy Loading – Don’t load images unless needed.