How to use an image on a website

[Samantha Fury]

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

[Brad Lawryk]

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.

[Samantha Fury]

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

[Per Berntsen · Accepted solution]

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.

[Samantha Fury]

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.

[Per Berntsen]

It really depends on the design of the website, and if you want to put a limit on the width.

Personally, I tend to use a max-width of 1200 pixels for the websites I build, but you may want something different.

I can't tell you what width to use, but it's easy to do this by trial and error.

You can start out with 1200 px width, and it that's not wide enough, export the file again larger from Photoshop and overwrite the file you exported previously. The image should then update automatically in Dreamweaver's Live view, if it doesn't, press F5.

Edit: I don't use Adobe Stock, but I wouldn't have thought that there is any limitation on the size you can use.

[BenPleysier]

Just to add to Per's answer, please have a look at The Best Full Screen Background Image Sizes for Web Design | Web Design & SEO, Kona, HI

In a nutshell, the image for a web site should be as small as possible making sure that you have catered for HiDPI screens.

[Guest]

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.