Best Practices for Optimizing Images for the Web

|
Content Author:
Hannah Schultes

Optimizing Images for the Web Blog

Sally is tasked with creating a new page on her website. She begins by drafting the content and even takes new images on her iPhone to share on the page! When it's time to show the page to her supervisor for review, Sally and her supervisor notice the page takes a long time to load. After reaching out to the CALS/LAS web team for advice, Sally learns that her new picture is over 10 MB, and if she doesn't resize it appropriately, the page will continue to load slowly for all users, including their future website visitors on mobile devices!

Jump to:

Properly sizing your images on the web can feel like a big undertaking! Many people think the larger the image, the better quality they will have when showcasing it; however, this is not the case for websites. That's because images larger than 1 MB are known to slow down your webpage's load time. If a visitor has to wait for your images to load, they may move on from your website and try another! While best practice is to post high-quality images, it's important to find the balance between quality and load speed.

If you're like Sally and need help fixing this issue on your site, follow along to learn about optimizing your images for the web.

File Size, Image Dimensions, and File Types

File size is measured in bytes(b), kilobytes (kB), megabytes (MB) and so on. File size influences how fast an image loads. Large file sizes load more slowly. File size is influenced by image dimensions, image resolution, and file type. A 1 MB image is the maximum file size we recommend for most images on the web.

Image dimensions represent the height and width of an image in pixels (px). Images with large dimensions could mean a larger file size. An image meant to show up ‘full width’ on a typical website is between 1000 px and 2000 px wide.

The two main image file types for the web are png and jpg. Save as jpg for photographs and images that don’t need a transparent background. When you save a jpg, you can adjust the file size by manually adjusting ‘quality’. Save as png for graphics, images with text, or images that need transparent backgrounds.

Finding Image Dimensions and File Size

Locating file size on Mac

  1. Locate the image in your Finder and control + click it. A menu will appear.
  2. Select "Get Info." Expand General to see the file size, and expand More info to see the dimensions.

Locating file size on PC

  1. Open Windows Explorer and click on the image you are searching for.
  2. Be sure the "Details pane" is selected in the top toolbar.

Before you upload an image to your website, ensure the size is less than 1 MB and the dimensions are the proper width x height (see table below).

image info
Mac image info
windows file info screenshot
PC image info

 

 

 

 


 

Through this method, Sally could determine that her image size is 10 MB. Next, she should determine the recommended image dimensions and make adjustments to her original image.


Recommended Image Dimensions

Following the recommendations from the table below, determine what dimensions your image should have before uploading. If your original file does not match the correct dimensions, you can use a tool like Edit • Photo (free) or Photoshop to resize the image.

Guide for CALS/LAS Web Editors in the New iastate22 Theme
Block TypeDimensionsNotes
Blockquote450 x 450pxHeadshot or portrait images only. Images will be clipped to a circle automatically.
Call to Action (Large)1600 x 600pxImages will always stay the same aspect ratio at all screen sizes.
Card Set450 x 450px 
Card Set - Linked Image450 x 450px 
Carousel1200 x 675pxComing soon.
Feature Set900 x 600pxImages will always stay the same aspect ration at all screen sizes.
Feature with Large Image (and/or intro)1600 x 900pxImages will always stay the same aspect ration at all screen size.
Feature with Small Image900 x 600px 
Full Width Image1600 x 900px 
Hero (Default) 

All pages except the Homepage
1600 x 600pxImages will always stay the same aspect ration at all screen size.
Home Hero - Atmospheric Image1600 x 900pxImage scales down proportionally for mobile.
Home Hero - Featured Image1600 x 900pxImage automatically scales down for mobile and will become a 375 x 480px ratio crop at its smallest size. The main focal point must be in the center.
Home Hero - Supporting Image650 x 650pxImage scales down proportionally for mobile.
Image Grid900 x 600pxAll images in the grid use the same aspect ratio. Top image appears larger on desktop and become equal in size on mobile.
Text Box Images - 
L and R Aligned

Editor's Choice

Max size: 648 px wide

Use similar height images when paired in the same body copy block.
Text Box Images - 
Center Aligned

Editor's Choice

Max size: 
1472 x 844px 

 
Profile Image350 x 437pxChoose a photo with your face centered. Image dimensions will be automatically resized if not uploaded at the proper dimensions.
Guide for CALS/LAS Web Editors in the Classic Theme
Block TypeDimensionsNotes
Banner Card2000 x 800pxImage dimensions will be automatically resized if not uploaded at the proper dimensions. For best quality, resize your banner image before uploading.
Link Card600 x 600px
600 x 350px
None - Editor's Choice
You can select to have your image resized into a 600 x 600px square or a 600 x 350px wide, or you can keep the original upload size. Image dimensions will be automatically resized if not uploaded at the proper dimensions. Best quality will be to upload the image at the dimensions it will be displayed.
Profile Image350 x 450pxChoose a photo with your face centered. Image dimensions will be automatically resized if not uploaded at the proper dimensions.
Events Thumbnail600 x 350pxImage dimensions will be automatically resized if not uploaded at the proper dimensions.
News Thumbnail600 x 350pxImage dimensions will be automatically resized if not uploaded at the proper dimensions.
Projects Thumbnail600 x 350pxImage dimensions will be automatically resized if not uploaded at the proper dimensions.
Resources Thumbnail600 x 350pxImage dimensions will be automatically resized if not uploaded at the proper dimensions.
Text Box Images

Editor's Choice

Max size: 2000 px wide

Image dimensions are NOT automatically resized. Important to follow best practices when uploading images to your text editor.

 

Resizing your Images with Edit • Photo

  1. Go to https://edit.photo/.
  2. Select a photo from your file finder to edit.
  3. Click Resize in the left sidebar and change the dimensions of the photo at the bottom.resizing dimensions of photo
  4. Next, click Crop and move the photo using the slider along the bottom to scale and by clicking the image to drag and reposition.
    scale image
  5. Export the image using the button in the top right corner.
  6. If the file size is still larger than 1 MB, upload your resized and saved image to TinyPNG, then re-download the image.
    download image from TinyPNG

 

Sally's image is now properly sized and optimized for the web!

Finding Large Images with Siteimprove

Next, Sally thinks about all the other images on her website and wonders how many of them are slowing down her site. Read more about how your Siteimprove dashboard can help locate images affecting your website's speed!

If you have additional questions about changing an image's size, reach out to the CALS/LAS web team at websupport@iastate.edu. We are happy to help!

 

Body