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:
- File size, image dimensions, and file types
- Finding image dimensions and file size
- Recommended image dimensions
- Resizing your images with Edit • Photo
- Finding large images with Siteimprove
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
- Locate the image in your Finder and control + click it. A menu will appear.
- Select "Get Info." Expand General to see the file size, and expand More info to see the dimensions.
Locating file size on PC
- Open Windows Explorer and click on the image you are searching for.
- 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).
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.
| Block Type | Dimensions | Notes |
|---|---|---|
| Banner Card | 2000 x 800px | Image dimensions will be automatically resized if not uploaded at the proper dimensions. For best quality, resize your banner image before uploading. |
| Link Card | 600 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 Image | 350 x 450px | Choose a photo with your face centered. Image dimensions will be automatically resized if not uploaded at the proper dimensions. |
| Events Thumbnail | 600 x 350px | Image dimensions will be automatically resized if not uploaded at the proper dimensions. |
| News Thumbnail | 600 x 350px | Image dimensions will be automatically resized if not uploaded at the proper dimensions. |
| Projects Thumbnail | 600 x 350px | Image dimensions will be automatically resized if not uploaded at the proper dimensions. |
| Resources Thumbnail | 600 x 350px | Image 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
- Go to https://edit.photo/.
- Select a photo from your file finder to edit.
- Click Resize in the left sidebar and change the dimensions of the photo at the bottom.
- Next, click Crop and move the photo using the slider along the bottom to scale and by clicking the image to drag and reposition.
- Export the image using the button in the top right corner.
- If the file size is still larger than 1 MB, upload your resized and saved image to TinyPNG, then re-download the image.
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!