What Size Image Should I Use

[lonebyrd 0]

I want to use an image on the first few pages on my website. I am going to use photoshop to edit it but what size do I make the image to fit the screen? I know many people use different sizes for resolution so I am not sure what to do. I want it to fit the majority of the screen so do I make it 600x800 or some other number?

[Saint_Michael 3]

Well if your using large images, then you want to use 800x600, 1024x768 since those are standard monitor resolutions, although 1024x768 is the current standard resolution now. However, you would want to use small images are thumbnail size, such as 50x50 or 100x100 or 200x150 and that way you can link them to much larger ones if need be.

[sonesay 7]

if You want to design for 800x600 screen then design your images to just under that to be safe including any margins you require. Also keep in mind the width of the scroll bar when your content gets long and requires scrolling. This is about 15px - 30px ? to be safe. Just for an example my site uses width of 990px min so I don't get any horizontal scrolling even with scroll bars down the side unless I am displaying content that is explicitly wide.

[RJM 0]

Set your monitor at 1024 x 1280. This is the most common resolution monitors will be set at.In photoshop, zoom to 100% (Ctrl+Alt+0). WYSIWYG. Use you're own discretion.

[rvalkass 5]

Set your monitor at 1024 x 1280. This is the most common resolution monitors will be set at.

It isn't. Consider the number of portable devices that now support a fully-featured web browser (rather than just WAP). Consider anyone with a computer more than a couple of years old. People using business PCs at work.

You shouldn't really design your website for a fixed screen resolution. Anyone with a smaller resolution will be forced to scroll horizontally to see your page, which will just make them find somewhere else to spend their time.

[RJM 0]

Is he asking what size to make an image? I thought that's what he was asking. Not what size to make the entire web page.

[lonebyrd 0]

I want the image to take up the entire page. It will be on the first few pages of my website. It is a picture of a TV with my website name on it. It will be used as sort of an introduction page. Someone mentioned not making it a fixed size. How do I make it adjustable? Is it an HTML script I have to use to make it vary in size depending on the users screen?

[rvalkass 5]

To make it work for any width, and expand with the user's browser, you'll need to split your TV image into at least three parts:

Left side

Central repeating section

Right side

The left and right side will be fixed to the left and right sides of the window. The gap between them is filled with a repeating central 'stripe' that gets automatically repeated horizontally.

 

To make it fill the whole page would be slightly more complicated, but entirely possible.

[RJM 0]

<img src="image.gif" height="100%" width="100%"/>

 

I would not recommend making an image fill the window though. Sensory Overload. A decent size, front and center is far more effective.

Like this.

Edited March 4, 2009 by RJM (see edit history)

[sonesay 7]

I want the image to take up the entire page. It will be on the first few pages of my website. It is a picture of a TV with my website name on it. It will be used as sort of an introduction page. Someone mentioned not making it a fixed size. How do I make it adjustable? Is it an HTML script I have to use to make it vary in size depending on the users screen?

Rvalkass has described to you basically the method used to achieve your desired layout.

 

To make it work for any width, and expand with the user's browser, you'll need to split your TV image into at least three parts:

Left side

Central repeating section

Right side

The left and right side will be fixed to the left and right sides of the window. The gap between them is filled with a repeating central 'stripe' that gets automatically repeated horizontally.

 

To make it fill the whole page would be slightly more complicated, but entirely possible.

There are two common ways to achieve this and its using Tables or Divs. The Table method you would obviously want a minimum of 3 columns for each area (Left, Center, Right). You place the respective images in their Table cells. Don't forget you are building the layout row by row so you start from the top to bottom.

 

The Div method is similar to Table layout except you do not have cells but you float Div's left and right. You then have a Center Div with appropriate margins of the left and right floats to maintain that Div's are displayed correctly and do not over lap each other.

 

The table method would be the easiest to create if you already know a little bit about tables but it becomes harder to manage when you have done all the work inserting 10+ rows and find out you need to change the layout a bit. Have an attempt and ask any questions you need.

[Echo_of_thunder 1]

Well if your using large images, then you want to use 800x600, 1024x768 since those are standard monitor resolutions, although 1024x768 is the current standard resolution now. However, you would want to use small images are thumbnail size, such as 50x50 or 100x100 or 200x150 and that way you can link them to much larger ones if need be.

I have to agree, but honestly best not to use images like that have a soild backgrown is better because it will help in loading speed. But remember if you must use an image the smaller the file size the better it will load. Also too as said above with the thumbs. that is your best bet to go with.

[Quatrux 4]

To add my 2 cents, if those images on the site are not Screenshots of games or software or not some kind of art work, but part of the design, then you need to crop images and put them together as they would load faster too, 4 images one near another which looks like one loads much faster than 1 big picture, it's usually for most Internet connections. As lets say 4 connections are used and they load at the same time, were big pictures takes some time to load.

[cyber_electrons 0]

If it is some sort of welcome picture, use something between 800x600 and 1024x768 as there may be links and menubars at the side. Unless if you are displaying this full screen, don't use the maximum dimension of 1024x768 if you use this as your computer resolution or any other people's. It is best to fit and adjust to your website design, some may be slim and some may be huge. I would recommend to use as large as possible such that other things can all be fitted on to one screen without having to scroll - assuming people use the common 1024x768 resolution.

[lonebyrd 0]

Thanks for the feedback everyone. I think I will go with something smaller than full screen. I agree it may be too much for the eyes. I also forgot I wanted to add some menus to it and having a full screen would take away from this.

[Ash-Bash 0]

Well it depends where you are going to place the image really...

But I would try this

Set your monitor at 1024 x 1280. This is the most common resolution monitors will be set at.
In photoshop, zoom to 100% (Ctrl+Alt+0). WYSIWYG. Use you're own discretion.

I have done that loads and it helped.