Image Optimization for Websites – Our Quick & Dirty Optimization Process
Guess what friends – if your website is slow, people don’t really want to stick around to let it load (queue the heavy sighs). One of the main reasons your website might be slower than a snail’s southern drawl is the size of your images. Read on for the proven (and stupid simple) process for image optimization for websites!
We know everyone learns differently – if you prefer video, please watch the video tutorial below! If you’re more of a step-by-step person, we’ve written out the steps under the video.
Watch the Tutorial:
How to Optimize Images for Your Website – Step by Step:
- Source your image and open it in Preview
- Crop it to your desired shape
- Adjust the longest dimension to a maximum of 1400px (if it’s a portrait image, this will be the height. If it’s a landscape image, this will be the width).
- Save the image!
- Drop your image into the ImageOptim application and let it optimize until you see the green checkmark
- That’s it – it’s ready to pop into your website, your image is now optimized
Note to Windows Users:
- You can do this same process of cropping + resizing with Windows Photo Editor (a very similar application to “Preview” on the Mac). Here is a helpful tutorial to walk you through how to crop + resize in Windows Photo Editor.
- This tutorial shows utilizing the ImageOptim application, you can use this exact program through their web app if you do not have a Mac, or you can utilize their other recommended optimization options!
You should drop ANY image you plan to upload to your website into the ImageOptim software. Even if it is already the size you want!
Get Nerdy about Business, Websites & Tech with Us!
The Making Website Magic Community (hosted on Mighty Networks!) is a place where women web designersand developers can meet, mingle and make meaningful connections with industry collaborators. See you inside!
Sam is the CEO and lead web developer of Sam Munoz Consulting, LLC. Through years of coding, development & design experience - she is all about simplicity, minimalism & making websites that align with her client's business models & goals.
Keep Learning & Reading
A top call to action bar can be a great way to easily direct visitors to convert. Learn how to add a Top Bar Call to Action in Wordpress
Ensure the background image you use on your site shows up the way you want it to! Learn how to position a background image in Divi.
Stop spam in its tracks! Learn how to add reCAPTCHA to the Divi Contact Form module.