You are here

Preparing an Image for use on the Web

Back to Wiki

When it comes to images on the web, file size matters! This directly impacts how long it takes for a page to load for a user. Because of this we want to make sure that any image placed on the site is sized appropriately (width and height of the image) as well as ensuring we get the smallest file size possible. To do this, we have provided the following instructions.

First and foremost, any image to be loaded to the website will need approval from the marketing department. Please submit a request for approval to . The approval process may take as long as a week for a response from the Marketing department. Once approval is received:

  1. You will need to make sure the dimensions of the image are appropriate. Most cameras nowadays take extremely large pictures. There is no need to have such large images on the web. To resize the picture, open the file in Microsoft Paint or Adobe Photoshop. These instructions will use Paint as it is a simpler interface but Photoshop can be used as well.
  2. In MS Paint with the file open, on the Home tab, choose "Resize".
  3. In the dialog that appears, make sure you have "Pixels" chosen as the units and the checkbox "maintain aspect ratio" checked. If this is NOT checked, you will end up stretching your image which will not look good at all!
  4. Next make sure both the Horizontal and Vertical values within the Resize area (not Skew area) are at or below 600 pixels.
  5. Choose OK when complete.
  6. Now, do a Save As and save a new copy of the file. Be sure to re-name it something other than the original. We do NOT want to overwrite the original.
    The filesize of the newly saved file will be smaller than the original, assuming either of the dimensions were originally above 600 pixels. 
  7. Next we want to run this newly saved file through an image optimizer, such as squoosh.app. Open this link and drag-n-drop your newly saved file into this screen.
    You will see a draggable vertical line over the image. The left side is the image you uploaded. The right side is the optimized version. There should be little to no difference between them. If there is you can increase the quality value a bit.
  8. You will see a toolbar on the lower-right of the screen, similar to the one here.
    Notice the red box area. This shows the size of the new file and the percentage saved from the original uploaded version.
    Squoosh Toolbox
  9. Press the blue Down arrow button to download a copy of the new one. This one you downloaded will be the image you will upload to the website.
  10. At this point, you will have 3 copies of the image:
    1. the large original size,
    2. the reduced, resized version before the squoosh.app upload, and
    3. the one downloaded from squoosh.app.

    The large one can be stored on your computer for reference again if you need it. The second one can be deleted. The third one is the one you want to use to upload to the webpage.