Quantcast

Sizing photos in html

INNspiring.com | Innkeeper Forum & Innkeeping Resources

Help Support INNspiring.com | Innkeeper Forum & Innkeeping Resources:

Penelope

Well-known member
Joined
Aug 4, 2008
Messages
1,716
Reaction score
0
What is the best way to format photos in html so that they are sizable on individual monitors? I don't want them to be 400 x 400 px, for example, becuase someone's monitor might be huge and it'll look odd. Same for a smaller monitor.
They wouldn't be a % of the whole monitor space, but a % of the area they are in.
Did I explain that correctly? I'd appreciate any guidance.
 

EmptyNest

Well-known member
Joined
May 22, 2008
Messages
8,741
Reaction score
1
PHoto images are usually jpg. You want to use some sort of photo editing software to resize and compress the images. THere is no way to make the images fit everyone's screen size..that is not possible. You have to come to some sort of happy medium. I usually go for about 300-400 pixels wide for most images I put on pages. YOu can then set it up so that if someone clicks on the smaller image, a full size or a larger image can be opened in a new window for them to view if they so desire. Here's a page that explains further
 

Penelope

Well-known member
Joined
Aug 4, 2008
Messages
1,716
Reaction score
0
That's a great resource, Catlady. Thanks
 

swirt

Forum founder. Former Owner.
Joined
May 17, 2008
Messages
3,210
Reaction score
0
You can use some javascript to sniff the bowser size and have it scale the graphic accordingly, but I don't recommend it, you don't want the browser to scale your image because generally browsers do a crappy job of it. The end results look fuzzy, plus people are going to have to download a larger image only to be shown a smaller version of it. There is also the risk that the script will enlarge the image (larger than its source) which is always a bad idea.
 
Joined
Jul 22, 2009
Messages
5
Reaction score
0
you can try:
1 - Reduce the size of the Jpg by reducing the number of colors (this will keep your page loading quickly).
2 - create a table using a % to size the table to the screen displaying the image,
3 - place the image to fill the cell (about.com should have a tutorial or webmonkey.com has some good tools also).
Michael
www.UfindVacations.com
 
Top