how to crop and optimize images for web

How to Crop and Optimize Images for the Web

Why is it important to optimize images on your website? Unreasonably large file sizes are a major contributor to slow load times. This affects usability, turns off site visitors who do not want to wait, and also affects how well a website ranks in search results. Studies have shown that nearly half of website visitors expect sites to load in 2 seconds or less, and they are apt to abandon sites that take longer to load. Equally important to note is that since 2010, page speed has been a factor in Googles ranking algorithm. Also, in 2018, Google made page speed a major factor for mobile searches.

Example of image file sizes that are too large 500kb+

While there are many elements that can affect a website’s ranking in search results, image file size is an easy one for anyone to manage. Ensuring that the images you are using on your website are optimized – meaning that the image file size has been reduced to the lowest possible size while still retaining quality – is a simple way to help improve your site loading time and be on good terms with Google.

Now, when we talk about image size, we mean the file size itself. The dimensions of the image however, whether it's 250 pixels or 2000 pixels, will contribute to the file size. The larger the file size, the longer it takes to load for site visitors.

For example, here is a snapshot of a website tested in Page Speed Insights showing image file sizes that are very large. As noted, depending on the actual dimensions of your image the optimal file size will vary, but a good rule of thumb is to try to stay under 150kb or even 100kb if possible.

It’s unfortunately a very common thing to see websites that load slowly due to extra-large file sizes. So how do we fix it? We're going to use a simple online tool to optimize our images for the web!

In this tutorial video, I’m going to show you three things:

  1. How to reduce/adjust image dimensions.
  2. How to crop an image to get a defined set of dimensions.
  3. How to optimize the image, which compresses the file size and as such contributes to a faster loading website.

The tool we will use is a free, web-based application called Pixlr. In less than 5 minutes you’ll be optimizing images like a pro.

Getting started:

  1. Visit pixlr.com
  2. Click “Try Pixlr X”
  3. Click “Open Photo”
  4. Choose the image you need to optimize

Using the tools in the left sidebar you can:

  1. Resize – click the icon and then choose “Image”. You can adjust the dimensions to suit your needs.
adjust image size 1
Click the first icon on the left for resizing tools.
adjust image size 2
Choose the "Image" option to adjust the image dimensions
adjust image size 3
Enter the dimensions required. Then hit "Apply"
  1. Crop – Set the width and height you need the image to be, then drag the crop frame to contain the section of the image you would like to show. You can also freeform the crop by dragging the edges of the crop frame.
crop image 1
Click the second icon on the left for the cropping tool
crop image 2
Adjust the width and/or height for your crop
crop image 3
See your crop dimensions to the left. Drag the crop frame to the desired section of the image.

Once done, you are ready to save it.

  1. Click “Save” in the bottom right.
  2. Here you will adjust the quality of the image to a reasonable file size – under 150kb or less when possible - and still retain the quality. 
optimize and save image
Name your image if needed. Adjust the quality to the lowest size without sacrificing quality. Click "Save".

Now your image is ready to publish to the web. Do this for each image you publish on your site and you will be ahead of the game in keeping your website loading fast for your users and search engines alike. 

Need Help With Your Website?

We are full-service, flexible, and believe that successful projects are the result of working collaboratively with our clients. Do you want a better user experience for your website or application? Talk to us!

  

 

Erin Mullinax

Erin is a Senior UX/Web Designer and Team Lead at Marathon Consulting. Her background is in photography, travel, marketing, art and engineering. Erin is responsible for all aspects of User Experience from user data analysis and testing, creation of personas, user journeys and information architecture to wireframing, prototyping and design. She also works closely with developers to ensure all final deliverables are in line with the overall vision of the project. Erin is passionate about creating the best user experience possible for each web project, learning new methodologies to improve the UX processes on her team and sharing her knowledge with others.

Leave a Comment

Let's talk about your project.

We are full-service, flexible, and believe that successful projects are the result of working collaboratively with our clients. Are you looking for a better user experience for your website or application? Need an experienced database architect or business analyst? Let’s talk!

X