Image file size and WordPress websites
I have commented in the past, and also cover it in my video tutorial on images that it is important to reduce the size of the image before you place it on your site. The reason why this is important is because it will take up space in your hosting, and cause your site to load more slowly. As a broad guide the image size for most cases should be around 100KB or less, 200KB for a large image. I frequently find images that are 4MB or larger. These have been uploaded to sites pretty much straight from the camera.
The preferred way…
I still advocate; do your image processing outside of WordPress. Shrink the image down to roughly the target size which for images in the content area will be around 600 pixels wide. For images in a gallery, then 1024pixels wide. Use compression to reduce the file size, then upload it.
If you have fat files on the site already…..
WordPress introduced some new facilities in image processing in May 2015. All sites have this built in.
To access it log into your site and look at the menu on the left and choose Media (Library) and check the last few things you uploaded. Make sure they are around 100KB or less unless they need to be larger.
If you find something that is straight off of a camera and over 400KB, then do the following. 
Look for Edit image button in the bottom left of the image.
Click on it. Look for the Scale Image option in the top right.
Change this to something close to your target size. Remember that there is no value in having an image 4000 pixels wide if the screen space in the content area of your site is only 600 pixels. It is as simple as that.
Next change the X value (first dimension) the second one will follow to maintain the aspect ratio of the image.
Then click on Scale. A copy of your image will be created in WordPress to your settings. It is automatically saved* (*skip down to the bottom of these notes learn about some other things you can do at this stage).
Close the window using the small x in the top right of the window. At this stage, the original large image is still on the server. But the smaller image is now available to you for adding to pages. So half of the problem has been solved.
You can always restore it back again by going back to view the image in the image library and selecting edit. You will see a drop down which says “RESTORE IMAGE ORIGINAL SIZE”.
BUT…..
The settings built into WordPress are quite aggressive. It really depends on your images and what is in them whether this works for you or not. I generally find that any image manipulation on the server yields a smaller file (good) but the image is soft (less detailed … bad). So use with care. This is why I think it is best to do this work outside of WordPress before they are uploaded.
Other things you can do in WordPress
While in the image editor, you can also do the following within WordPress.
- Rotate the image clockwise or anti-clockwise
- Flip the image horizontally or vertically
- Re-crop the image
50% of the problem solved!
It appears that these actions create another copy of the image. I am pretty sure that there is a course of action you can take which will remove the original. While experimenting and writing this article, I could not reproduce the key/ screen sequence. But I am sure I have done it in the past.
If you are trying to scale down a large file accidentally loaded on the site, then the last step is remove the original after you have created a copy. If I can reproduce those steps, I will come back and edit this. It is however worth resizing images as this will save bandwidth at the server and to the client. Remember mobile users pay per MByte.
