How to size + optimize images for the web

This is a tutorial to teach you how to resize + optimize images for your Squarespace blog. After all you want to use beautiful images with your blog posts + pages without bogging down your visitors load time.

Web Tools You'll Need

1. Pic Monkey

I recommend using this outstanding web based photo editing + image creator tool. Even better? It's FREE! They also offer a reasonably priced ($34 a year) premium version with more options + features but you don't need it to resize your image. (If you want to snag a complimentary day of access to Pic Monkey Royale click here to follow my friend referral link).

2. A photo optimizer.

My recommendation depends on whether you are a mac or PC user. For my fellow mac users grab your free download of ImageOptim. For PC users I recommend the web based site Web Resizer to optimize your images. This step is the last step you'll take before posting the image online.

Good to know: in general + when possible you will want to use square images. It is not mandatory but it will simplify your process + ensure that the thumbnail showing is scaled properly and looks its best. Also you'll only want to work with jpg or png file types.

 

Steps to crop + resize your image in Pic Monkey.

1. Open PicMonkey

2. Choose Edit + open the image you want to crop + resize

3. Under "Basic Edits" you'll see the following options "crop" and "resize"

First crop your image.

In the drop down menu you can select a cropping ratio or you can manually drag the crop boundary on your image. Once you have the appropriate crop settings be sure to "APPLY" these changes.

Next resize your image.

Enter the size dimensions you wish to change it to. A great recommendation would be 500 by  ____ (let the second box auto populate). This will happen as long as the box that say "keep the proportions" is checked. If you don't maintain the proportions then your image will look wonky.  It may also be helpful for you to know that you should NOT need an image bigger than 1000 pixels. Once again, be sure to "APPLY" your changes.

4. SAVE your image.

Choose the BEST quality type always. It is a good web practice to give the file name a relevant one. It is possible for someone to stumble across your blog post, via a nicely named relevant image name (not caption) as google can index image file names. As for files types .jpg is just fine HOWEVER if you are getting real fancy + adding text save it as .png for the BEST quality.

 

Optimize your image for the web for a faster load time.

For MAC users.

Simply drag n drop your file into ImageOptim and watch your picture be optimized before your very eyes. You'll be able to see the % of savings automatically calculate.  That's it, your done! This awesome tool automatically updates the original image. There is NO NEED to re-save it.

For PC users.

Open WebResizer.com. Browse and open the file you want to optimize. Upload the image. Once the optimization is complete you'll see a side by side comparison, including the % size savings. If you are satisfied, DOWNLOAD the image and be sure to use this one on your website.

Invite me into your sphere.

I'll bring something of substance, every time!

* indicates required