What's new
By:
Filters
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

How To Best Size Images For Use on Web Pages?


A

abrogard

Member
Messages
13
Likes
5
I have an image I'm Photoshopping to use as an index page on a website. I realise now that it is much bigger than a typical webpage - it seems to be 1600 x 1200 pixels according to Photoshop when I check 'image size'.

The webpage seems to open only the top left quadrant of it. i.e. it seems to be about four times bigger than a web page/screen display size.

I vaguely think different computers at different screen resolutions will display different amounts of this image, won't they?

And an image bigger than the screen can be scrolled but an image of only screen size will constrain the user to just it?

Anyway I'm uncertain.

Should I resize this image to my screen size, which seems to be 1024 x 768 according to control panel 'display settings' ?

Or is there some better 'standard' size I should use? Considering all the different things that might seek to look at the page, the image, and all the different browsers.

Or is resize wrong and I should cut out a section to use rather than resize?
 
I think you should use it as a thumb nail as a link to the original image,This way you can show the correct image, if somebody chooses to see it.
 
No, it's not a choice thing. This image is the webpage. It would normally be the background for the page but it can't be this time because I'm using an image map and I can't do that on a background with html. So it's an image. But really it's the whole page. There's just to be a couple of image mapped links on it.
 
Well if it is as straight forward as you say Slice the image in photoshop right click each slice and put custom link info

save for web same images and html bang your home index page done and I believe it will auto resize as I believe cs6 caters for responsive web design.


Alternatively if you dont want such a cheap approach then do your usual html tags and in the body tag
<body>
<img src="domain/images/yourimage.jpg" alt="what you want the rollover descripton to say" height="80%" width="80%"> <<<<This will take up available screen space so responsive on any form of browser or screen size/resolution
</body>

alternatively if you want in unresized and full resolution upload your image to your domain somewhere

and do

<iframe src="http://www.yourdomain.com/images/yourpicture.jpg"></iframe> and of course you can also have the above features and scale your iframe or have a scrolling frame


My opinion if I have guessed what your doing correctly You have an image with hot spots on which are seperate links to the same domain.

In that case I would have a main theme /border with header and menu and then load your other pages into the 1 page dynamically via iframes.
 
Plus on most pages, the average width of the body is about 950px but this means nothing these days, as all the trendy web sites are fluid, and are set out to fill the screen in a way that doesn't make it look as though it conforms to s grid system.
 

Back
Top