Cropping and re-sizing images is a tool that has been present in WordPress for quite some time, but talking to people who use WordPress it is either a tool they were not aware of or they just don’t use.
Let me first tell you why re-sizing and cropping your images is beneficial:
- If you’re images are very large then the size of them will also be large. When visitors to your site want to view them it will take longer for that image to load which will provide a bad user experience.
- Cropping your images can ensure that they fit into your page how you want and also allows you to remove unwanted areas of the image. This in turn will reduce the size of the image and decrease the overall load time.
What You Need To Do
Login to your WordPress site and click on the Media tab. From there choose an image that you want to re-size or crop.
Once you have selected your image look in the top right corner and you will see both the original image size and dimensions. In the case of our example you will see it is 2MB and 5445 x 3637 pixels. This is pretty big for a website and the dimensions are huge when you consider that a 27 inch iMac has screen dimensions of around half that at 2560 x 1440. In this case we can certainly scale it down quite considerably, and as we will not be using the image in a lightbox there is no need to have it any bigger than the maximum width of the container of our website.
In order to scale down our image we first need to click the “edit image” button and from there we can enter new dimensions in the boxes at the top right corner and then simply click the “scale” button.
We decided to scale it down to a width of 1170 pixels which is the maximum width of the container of our website.
For our specific case we wanted to use the image as more of a banner for our blog post What Is A Brute Force Attack? so we decided to crop it to a height of 400 pixels. To do this you simply click on the image drag the cursor to create a box and adjust it until it is the size you want, then click the crop icon in the top left and finally click the “save” button.
With the image now resized and cropped we have gone from a size of 2mb to a size of just 96kb which means the image will be loading super fast even on the most conservative connections. This will make your whole page load quicker which is not only good for user experience, but also one of the factors Google uses in it’s search algorithm.
