Skip to main content
Participating Frequently
December 17, 2016
Answered

How to use an image on a website

  • December 17, 2016
  • 2 replies
  • 945 views

First thanks and I want everyone to know that I did search the forums and files and couldn't find this answer. I want to use

an untouched image on a website as a banner. AT what resolution should I use the image.  I'm looking for an exact number

something like 1600 by 800 etc etc.   Thanks for any help on this matter.  Also do I need to use the copywrite info in the corner

on the image.

Thanks much!

Samantha Fury

    This topic has been closed for replies.
    Correct answer Per Berntsen

    Generally speaking, ppi is irrelevant for web images. They will display according to their pixel dimensions, ppi is metadata used by printer drivers to calculate print size, and is ignored by web browsers.

    (I am aware that this may change in the future. but I have to admit that I don't fully understand how ppi on the web is going to work)

    I want to use an untouched image on a website as a banner. AT what resolution should I use the image.  I'm looking for an exact number something like 1600 by 800 etc etc.

    If you mean that the image is straight from a camera, it will be way too big (and heavy) to go on the web.

    The real "resolution" of an image is its pixel dimensions, forget about the ppi.

    And I suspect that you mean pixel dimensions when you say 1600 by 800.

    Do you have Photoshop? If so, use Image > Image size to try different sizes. Make sure Resample is checked. If you have a standard resolution monitor, view the image at 100%, and What you see is What you get. If you have a Retina/HiDpi monitor, things are slightly more complicated.

    When a web browser detects that kind of monitor, it will enlarge everything, including images to 200%, using four display pixels to display every image pixels. But Photoshop has to do things correctly, so it will display the image using one display pixel for one image pixel when viewed at 100%, and the image will be half the physical size of that in a web browser.

    To generate the final image that's going on the web, use File > Export > Save for Web, and set the desired pixel dimensions there.

    For best results, also make sure to check Convert to sRGB and Embed profile. For jpgs, set Quality to at least 60.

    2 replies

    December 23, 2016

    Hello everyone merry christmas, it’s my first visit at this forums and this post is truly fruitful for me, keep up posting these content.

    Brad Lawryk
    Legend
    December 18, 2016

    Hi Samantha,

    you our can always use 72dpi for any images on the web. Anything higher than will only increase the file size and increase loading times.

    Participating Frequently
    December 18, 2016

    Thanks for that and that's a good reminder for sure. I'd never thought of that! 

    Per Berntsen
    Community Expert
    Per BerntsenCommunity ExpertCorrect answer
    Community Expert
    December 19, 2016

    Generally speaking, ppi is irrelevant for web images. They will display according to their pixel dimensions, ppi is metadata used by printer drivers to calculate print size, and is ignored by web browsers.

    (I am aware that this may change in the future. but I have to admit that I don't fully understand how ppi on the web is going to work)

    I want to use an untouched image on a website as a banner. AT what resolution should I use the image.  I'm looking for an exact number something like 1600 by 800 etc etc.

    If you mean that the image is straight from a camera, it will be way too big (and heavy) to go on the web.

    The real "resolution" of an image is its pixel dimensions, forget about the ppi.

    And I suspect that you mean pixel dimensions when you say 1600 by 800.

    Do you have Photoshop? If so, use Image > Image size to try different sizes. Make sure Resample is checked. If you have a standard resolution monitor, view the image at 100%, and What you see is What you get. If you have a Retina/HiDpi monitor, things are slightly more complicated.

    When a web browser detects that kind of monitor, it will enlarge everything, including images to 200%, using four display pixels to display every image pixels. But Photoshop has to do things correctly, so it will display the image using one display pixel for one image pixel when viewed at 100%, and the image will be half the physical size of that in a web browser.

    To generate the final image that's going on the web, use File > Export > Save for Web, and set the desired pixel dimensions there.

    For best results, also make sure to check Convert to sRGB and Embed profile. For jpgs, set Quality to at least 60.