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.
Click the “Browse” icon on the left, and upload the image you need to crop.
In the toolbar along the bottom of the page, click “adjustment” (on the left) and then click “resize” (on the left).
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.
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.
Click the top icon in the left menu bar for "arrange", and click "resize image".
Pick on dimension - height or width - and change it to the desired size. But only change one of these and leave the "constrain proportions" item checked. Click apply.
Click on the second icon from the top in the left menu bar - to "crop" the image. This is where you can cut off part of the image to get the other dimension that you need. If you resized it to 400 pixels wide, but it is still 450 pixels in height, you can crop it down to 400 pixels in height. Click save when you reach the desired crop.
Rename and download your image.
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.