Skip to main content
S
Samantha Fury
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

    A
    Anonymous
    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
    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.

      S
      Samantha FuryAuthor
      Participating Frequently
      December 18, 2016

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

      S
      Samantha FuryAuthor
      Participating Frequently
      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.


      The image comes from adobe stock and was purchased legally. Some image sites have an exact pixel dimensions that they want you to use for untouched/raw images on websites or blogs.   I wasn't sure if adobe stock had a particular rule for images on websites or not.  I do have PSE 10 so I'll look for those suggestions.

      Thanks for all of great comments. I'm just not great at speaking techie I was just wondering what would be a good low resolution

      where the image would look good, but not be to clunky for a website. The banner image is 9038 x 2700px. So what would be a good size to use if you can give me that tip. I can play around with it and get it smaller, my main concern was if Adobe stock had a law / rule for pixels on websites.

      Thanks again so much.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices