For the purpose of this tutorial we are going to be compressing and resizing images without photoshop.
When looking to upload a new image to your website, firstly consider what its purpose is going to be. Will it be a background cover? A portfolio image? An instruction? or just decorative? you must then take into account the size of the image (mb) and it’s resolution. (LxH) For this tutorial we will assume we are putting together a new landing image for the head of our website.
The maximum resolution a background image needs to be is 1920X1080. There are beautiful 4k displays on the market, however the majority of your pc and mac customers will fall between a screen size of 1300 wide and 1920 wide and the larger the image the larger the file.
So now you have found the perfect image and want to compress it so it is optimised for your users. The best way to check the image size is to first right click the image file and select – ‘properties’ if you’re using pc – or – ‘get info’ if you’re using mac. If your image is over 1920×1080 in either dimension you will want to hop on over to https://imageresizer.com/ and upload your photo to begin cropping. Once your image is uploaded we can begin cropping. We are creating a background image so we want to select the 16:9 aspect ratio. The reason we are selecting 16:9 is because that is the widescreen aspect ratio for computer screens. We now want to type in a 1920 resolution width – The height will auto configure to 1080 or as close to it as possible. See image below. (This method actually took the following screenshot from 555kb to 41.5kb. Cool huh?)
Click Apply, the image will now be cropped the way you want it. Scroll down, you will find more options below.
Discovering the final 3 options you will want to select:
Image size > no change.
File Size & Optimizations > no change.
And be sure to save the image as JPG. I only suggest ever using PNG for transparent imagery which we can go over another time.
Click ‘Save and Download’ then Click ‘Download Image’.
The Final Compression
Now you have your new 1920×1080 background image downloaded we want to strip the remaining fat. This is where we remove the remaining meta data and unwanted bytes of the image. Head over to https://tinyjpg.com/ – We are going to drag our freshly downloaded image into the drag and drop area on the website. The compression system will immediately go to work. Compression only takes a few seconds here and once finished you will be provided a download link for your now fully compressed high res image. See attached image.
How did you get on with this tutorial? Add a comment and let me know how much data you spared by using these 2 fantastic compression websites.
30 second Walk-through video – https://www.youtube.com/watch?v=w3IKvkcGwoA
For more news and tutorials head over to https://websitedevelopmentmarketing.com/blog