Image sizes should be from around 40kb to around 550kb. However, we suggest small resolution images to be around 100kb and large resolution images around 350kb.
You should try to not upload images that are over 1MB (~1000KB).
This is why your images should have a small file size:
- You use more server space and you can one day reach your allocated space's limit and you'd wonder why your website is not loading anymore.
- You'll use more bandwidth in your hosting, Internet server at home or work, and your visitors'.
- Your visitors will notice that your website is taking time to load, or at least when opening images. It will make the experience worse and visitors don't like to spend more than 3-4 seconds waiting for a page to load. They might end up leaving.
It's better to take care of this early on rather than have to compress your images when you have fully set up your website. It's never too late to start, however.
What you should do first, if you're able, is to make sure that you have all your images on your computer and not just on your website. Then, delete all the ones you have added in your website. To do so, open any page where you can add images, then, when the image/media manager is open, select them all and delete. If you have various folders, go in each folder and delete your images.
On your computer, compress the images. You can use free and/or paid programs such as:
Light Image Resizer (paid): https://www.obviousidea.com/windows-software/light-image-resizer/
FastStone Photo Resizer (FS Resizer) (free): https://www.faststone.org/FSResizerDownload.htm
Or, if you have Photoshop or other image editors, you can compress your images using File (or File > Export) > Save for Web (in Photoshop).
If you can't use those above, then you can reduce the resolution of each image using programs such as Windows Paint or Mac Photos (or Paintbrush). For your banners (full screen slideshows), images should have a minimum width of 2000px. For smaller images, you can have landscape images at 1200px wide, and 600px wide if they're portrait images.
Important: Only upload PNG (.png) files for logos or images that have transparency. Convert your .png files to .jpeg. JPEG files use less space and can be compressed.
If you're using WordPress, and you already have images uploaded, or if you'd like a system that automatically compresses images, then follow these instructions:
There are 3 plugins that we recommend at this time. You can download and activate the following plugins in WordPress > Plugins > Add New:
- WP-Optimize - Clean, Compress, Cache
- reSmush.it Image Optimizer
- EWWW Image Optimizer
You can combine and use all plugins simultaneously or one or two at a time.
Download the above plugin(s) and optimize all images, without leaving the original files (it will take care of deleting them automatically or upon demand).
It will also automatically optimize your newly added images.
WP-Optimize - Clean, Compress, Cache
Apart from image compression, this plugin has some great features for enabling cache and minify, clearing old posts, drafts, revisions and other database files that are using your storage space. It's worth using it for those features as well.
Access it by clicking on its title on the left sidebar in WordPress, and click on Images at the top right.
Make sure that those 2 options are ticked:
"Automatically compress newly-added images"
"Show compression meta-box on an image's dashboard media page"
In "Compression options", place the slider a bit before the middle, about 2 steps to the left.
Click "Show advanced options".
Tick these 2 settings:
"Preserve EXIF data"
"Automatically delete image backups after"
Untick "Backup original images".
Click on "Mark all images as uncompressed".
Below that, you'll find "Uncompressed images". If there are some images that you do not want to compress, click on them and click on "Mark as already compressed".
Click "Select All" and click on "Compress the selected images". A popup appears, displaying the progress.
It will take some time and it might act as if it's failing by displaying a second popup. Click the button on the popup and it will proceed. It will happen many times.
When it finishes, you might have more to do. Keep selecting all and clicking compress. The reason for the repetition is that it doesn't compress all your images at once but only a certain number.
reSmush.it Image Optimizer
Found under the Media menu in WordPress. You could use this instead of WP-Optimize's image compression feature if you don't want to use them both. WP-Optimize can still be used for its other features.
Set Image quality to around 84. This ensures that your images retain their quality while reducing their file size. Values that are too low (65 and lower) should be used for images that are not too important as they might add some compression artifacts. Values that are too high (90+) will not reduce your file size by much.
Tick the boxes for the following 4 options (while unticking the rest):
- Optimize on upload
- Enable statistics
- Preserve EXIF
- Do not preserve backups
Click on the Save changes button.
If you have optimized your images using another plugin and feel that it's enough compression, then it's not necessary to click the Optimize all pictures button in reSmush.it.
If you want to optimize all images except for a few specific ones, first navigate to Media > Library and change the view mode to List using the icon near where you filter. Tick the box(es) under "Disable of reSmush.it". Then, return to it under Media and optimize all images.
EWWW Image Optimizer
This plugin is useful if you'd like to limit the resolution of current and newly uploaded images. It works together with the above plugins since the above 2 do not yet resize images.
Found under the Media, Tools, and Settings menu items in WordPress.
The one under Media is Bulk Optimize.
The one under Tools is for deleting all original images after compressing them, along with clearing other records and history of images. We suggest to only use this to delete originals.
The most important one is found under Settings.
Go through the Support and Contribute tabs to tick/untick the options.
In the Basic tab, you can click on "Enable Ludicrous Mode" if you want to see the advanced options and even ignore some folders from being optimized. However, for this documentation, we're using Easy Mode, which is the one where we do not click on "Enable Ludicrous Mode".
Untick all boxes in Basic and only tick this one: Stick with free mode for now
The most important part is to choose the resolution you'd like for Resize Images. A good size could be 1200px for width and 1400px for height. Those are for max widths and max heights. This means that you can still upload images with a smaller resolution and they'll retain their smaller sizes. However, there's no general rule here and it depends on how large you'd like your images. If you need a certain image to be at 4000px wide, but you have your settings set to a smaller size, then you'll have to either disable this plugin in Plugins or access this menu and increase the width to 4000 or higher.
Where this comes into effect is if you upload files with resolutions larger than what you have set in Resize Images. In that case, this plugin will resize them to your specified sizes, saving you hosting space.
Click on Save Changes when done.
Disk usage analysis
Read this documentation to help you find out which files, folders, and email accounts are using most of your storage space: https://tribulant.com/hosting/knowledgebase/23/