Sizing photos in html

Bed & Breakfast / Short Term Rental Host Forum

Help Support Bed & Breakfast / Short Term Rental Host Forum:

This site may earn a commission from merchant affiliate links, including eBay, Amazon, and others.


Well-known member
Aug 4, 2008
Reaction score
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.
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
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.
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 ( should have a tutorial or has some good tools also).