Resizing Images For Your Website
Jenny Marsden • March 6, 2018
Share This
Don't fall into the trap of uploading full size images
How many times have you gone to a website, only to leave inside 4 seconds when it isn't fully loaded.
Guilty!!
Slow loading websites are 99% of the time caused by too large image files. Images that aren't just large in physical dimensions but also in kb size are DEATH TO YOUR WEBSITE!
I know your skill set probably isn't resizing images but there is a free and easy way to do it.
Hello Image Optimizer
There are more than a few image resizing tools out there, however I've found this to be very easy and wonderfully add free!
Check out Image Optimizer
To use it is very simple. You can just upload your images online or download their image resizer to your PC. I've only ever used the online version primarily as I'm horribly suspicious of anything I have to download. You can make your own decision.
" The steps are very easy, simply choose your file, set what options you want and the maximum sizes, and click Optimize Now.
Tips:
- I always choose "small file size" from the Quality drop down list. If you choose that and your image isn't small enough you can do it again with the "very small file size" option. The Small is usually fine in my experience.
- The Max width and height isn't linked. IE - If you put in 1200 as the width, it won't assume your image is landscape and set the width to be appropriate for the proportion of your existing image. It is very easy to work out however.
- Take your existing image, right click and choose properties. Click the Details tab and scroll down to see the dimensions.
- Divide the longest dimension (in this case I'm working with a landscape image - wider than taller) by the smaller one. That will give you a ratio. IE My image is 4288px wide x 2848px high. So 4288 divided by 2848 gives me a ratio of 1.5056.
- So if I want my image to be a max width of 1200 if I divide that by 1.5056 that will give me a max height of 797px. If you made that 800px that would be fine. Your image would then come out in the same ratio of the existing pic.
Click the Optimize Now button and wait. Remember that it has to upload your large image so it's not instantaneous. Spend that time thinking about how frustrating this would be for a visitor to your website if they were trying to load your page with three 4mb images! Makes sense now doesn't it.
Once you are done, you will see a resulting output as below. Simply download the file to your computer. Make sure to save it in your "Optimized Images" folder - you don't want to confuse the files. Also remember to rename it to a meaningful file name before you upload it.
Lets Connect
About Jenny
I started my IT career in Database Administration and .Net coding. While I LOVED that work, I realised very quickly that I also wanted a life. To be a top end coder or DB Admin, you have to comit your downtime to constantly learning and evolving and while that is also something I love, I wanted it to be my work and not my life. So I morphed my love of design with my knowledge of all things SEO and moved into building small business websites.
Why small business websites? I'm a small business myself and I know how hard it can be so I wanted to give my clients a great service, with an approachable point of contact where no question was a "stupid question".
So you don't find yourself locked out of your Google account, add a recovery email or an alternative email you can access anywhere.
Are you having challenges with Chrome Browser using all your system RAM and slowing everything down? This Feature Flag from Chrome will help you to stop Chrome being such a RAM pig and set you on the path to better browsing.
If you are considering designing and developing your small business website yourself, there are a few considerations you should be aware of. Check out my list of what to think about when doing your own DIY website Vs getting a professional web design expert.
