How To Optimize Images for Your Website

Video Transcription

Hey there, I’m Kaili, and today I’m going to show you how to optimize images for your website and provide you with some free resources to help you along the way.

Optimizing images is crucial to the performance of your website. According to Kissmetrics, 47 percent of your website visitors expect the page to load within 2 seconds, and 40 percent of visitors will leave the website if it takes longer than 3 seconds to load. That’s a lot of lost traffic!

We’re going to help you optimize those images to get your website loading quickly so you can keep your well-deserved visitors.

There are two main steps to optimizing images for your website. The first step is resizing and cropping your image to the proper height and width. This is only necessary if you need to have specific dimensions for your photos - like for a slideshow or specific section on your website. If you’re unsure if you need to resize or crop your image, check with your web developer. The second, and most important step, is compressing the photo.

Resizing Your Image

We used to use Pixlr Express to resize images, but because that uses Adobe Flash, Pixlr has released a new tool, Pixlr X, which does not use flash. Read on for instructions on how to resize images with Pixlr X. 

One resource I like to use for resizing is Pixlr’s Express Tool. We’ll also include a link to this tool below the video.

First, we are going to take our sample image and resize it to the optimal height and width for our site.

1. Go to https://pixlr.com/express/.
2. Click the “Browse” icon on the left, and upload the image you need to crop. 
3. In the toolbar along the bottom of the page, click “adjustment” (on the left) and then click “resize” (on the left).
4. Pick either the height or width to change to the size that you need it to be, but only change one of these to keep the proportions and avoid squishing or stretching the image. (In the video we changed just the width here.) Click “apply” when you are done. 
5. After you apply the resizing changes, you need to crop your image. Click the “crop” icon (on the left). If you changed the width in step 4, you will need to change the height here. If you changed the height in step 4, you will need to change the width here. Type in the size that you need for the remaining dimension (we used height in the video). Once you change one of your dimensions, you will have a box that you can move over the part of the picture that you want to save. Click apply. 
6. Save your image (top left on the page).

Compressing Your Image

Next, we need to compress the image size so it doesn’t take forever to load on your site. The resource that we use often for compressing and optimizing photos at Manwaring Web is Tiny PNG.

1. Go to https://tinypng.com/.
2. Click “Drop your .png or .jpg files here!” to upload the image you need to compress.
3. Download the image and save it.

Now your image is ready to upload to your website. Don’t lose any traffic because of a few images. Optimize your images and keep the traffic rolling.

We’ve included a list of free resources for you below this video to help you optimize your images. If you have any questions, please leave a comment or give us a call so we can help you out!

Thanks for checking in!

Free Online Resources

Tiny PNG – Compresses and optimizes images
PicMonkey – Online photo editor, resizes images
Pixlr's Express Tool - Online photo editor, resizes images (used in the video)

Free Downloadable Resources

PhotoScape – Offline photo editor, install to your desktop and use for resizing images.