WordPress does a decent job at serving your images to your web visitors in a speedy manner. It achieves this by using its media library where it will take your uploaded image and create several re-sized versions of your images depending on how big the original size of the photo was.
When a customer clicks on the image that you have on a page (if you linked it when you added the media) it will show the full size of the image. What size is good for full sized images? You will get about 100 different opinions depending on who you ask so here is ours. You need to keep the image to a high enough resolution so that when your customer clicks on the image they can see the detail your trying to show them but do not want to flood the screen with this massive image. Keeping the width around 1000 pixels (give or take depending on the original resolution) we feel is best as it gives your visitor a good sized image and does not run off the screen when they are viewing it.
In this example below (with steps how to achieve this result) i take a 4288 x 2848 pixel image and reduce it to 1000 x 664. There are again about 100 different ways you can do this, I utilize a free program called photoscape. In our experience, this little program re-sizes and performs small quick edits on pictures the fastest and easiest way for publishing photos on the web. The pro’s would still default to your high end editors such as Adobe CS or others but this is great for taking a picture and whipping it to a different size or adjusting other features.
We wont go into everything photoscape can do, I will only go over the few steps you need to adjust this image down to the right size.
You need to make sure when you are re-sizing an image that you are keeping the ratio the same, this is why photoscape is a great program for this because it will maintain your ratio for you. The image in our example is 1.505 ratio (almost 16:9), this program allows you to resize to your hearts content.
1) Install Photoscape, choose your download source and when you are installing it, this is free software so there will be “add-ons” for you to “try”. We recommend to not install these extensions unless you would like to.
2) Open up photoscape and go to editor
3) Load your picture by navigating to your image and you can start your re-sizing with the re-size button (hitting the arrow on the button brings up a quick re-size menu)
4) Once you have your image to the right size, hit the save button (this will bring up a save menu so you can Save As among other things)
5) We recommend save-as and keep the name of the picture the same and put the resolution you changed it to
Your all done! Your image is not significantly smaller and will load much faster in a web browser creating a better experience for your users!
For a permanent speed boost to your site you can look into caching plugins which we can help set up for you. Contact Us today
A thank you for Tileworx is in order for letting me use their image to show how this is done