How to Size Images for the Web

How to Size Images for the Web

  1. Know where you are placing the image.
    1. You first need to determine where and for what purpose you are placing the image. Is it going to be the full width of the screen, is it going to be a background image, is it going to be the focus of the page? Thinking about these questions ahead of time will help you determine how big your image should be.

  2. Know what size to make your image.
    1. Now that you know where you are going to put your image you will need to adjust it to the correct size.
    2. Full-width images (that go from one edge of your browser to the other) should be at least 2000 pixels wide.
    3. Images on a page that are not full width should be ideally over 500 pixels but not over 1000 pixels at their widest or tallest.

  3. Know your resolution.
    1. Were your images taken with a professional photographer? Chances are, the resolution is set to 300. This adds a lot of unnecessary bulk to images that are displayed on web pages and will increase file sizes and increase page load times.
    2. Resolution for the web should always be set to 72 ppi (pixels per inch).

  4. How to resize your images and adjust the resolution.
    1. Mac: Find your image, right click and select Open With > Preview
    2. Go to Tools > Adjust Size
    3. Make sure the drop down to the right is set to pixels and the resolution is set to pixels/inches. Then adjust each value as necessary.
      *Note: Setting the width will automatically adjust the height so your image doesn’t become distorted. Make sure you see the little lock icon next to the values.
    4. PC: Find the file and open it with MS Paint
    5. Find the image section in the options and click Resize
    6. Change the option to Pixels not Percentage and adjust the values as necessary.