Digital Summer Camp 04: Resizing Images

Resizing images is an important part of making your website load fast and look great, not to mention ensuring high quality results in printing. But changing the size of an image is only one part of the story, your photos may also have to fit into a particular spot or match the shape or dimensions of existing images. This episode covers three ways of sizing images and will help you avoid some common pitfalls like scrunched photos and cut off edges.

---

Click the [ ] icon to see a larger version of the video.

​Here are my top three approaches to image sizing, in order of how much I use them.

Method A: Resize the image to fit the width of the space.
If the shape doesn’t matter you can just resize an image to the dimensions you need. Using an image editor like Photoshop, Paint or free online editors like Pixlr, go to the image size tool and type in the width that your image should be. Be sure to always keep the scale, or aspect ratio, the same so you don’t end up with a scrunched or flattened image. This is a good approach when the shape of the image doesn’t matter that much, like when a photo is placed into a layout and text will wrap around it.
 
Method B: Resize the image to fit the size of the spot.
Using an image editor like Photoshop, Paint or free online editors like Pixlr, open the screenshot you created when you measured the space earlier. This will serve as your canvas.
Create a new layer above the screenshot.
Copy and paste your image into the new layer.
Use the move and resizing tools to resize your image and position it so it looks good.
When finished, flatten the image and save it out to the right format for where it will appear.
 
Method C: Resize the image from within the layout.
In many website editors, you can click and drag images to resize them. This changes only the dimensions, not the file size, so use this only for fine adjustments and always to make images smaller, not larger.
In page layout programs like Word, InDesign and Illustrator, you can click and drag to resize images too but again, be sure not to resize them up. This is great for fine adjustments and in many of these you can do a little fine cropping too.
 
For instructions and best practices, see my website. Link in the bio . That's it for this week’s Digital Summer Camp. Tag a small business owner you know to help them with online marketing! ​

​Best Practices:

Crop first. How you crop a photo can dramatically change what the image communicates. Cropping an image so that the subject is front and center puts all of the visual focus on the subject. Cropping an image so that the subject is to the side can add emotion and tell a larger story.
 
Start big. Begin with the largest file possible and resize the image down (unless it’s a vector file). Pixels are finite so when you make them larger, the individual dots get larger too. This leads to jagged lines and blurriness.
 
Maintain aspect ratio. To avoid scrunched or stretched images, be sure to resize them proportionately. When resizing be sure to select the option (if needed) to maintain the aspect ratio. In many programs like Photoshop you can hold the Shift key while manually clicking and dragging to keep the aspect ratio in check.
 
Downsize before uploading. To get your online image file size down for fast loading, resize the images before you upload them. A typical smartphone photo can be 4000 pixels wide and 8 mbs but a blog image only needs to be 600 pixels wide and 800k. The difference between downloading 8 mbs and 800k is a lot of time, especially on mobile and especially when you have multiple images on a page.

That's it for this week’s Digital Summer Camp. To get a FREE, frosty new episode delivered straight to your In Box next week, join my mailing list.