Sizing for websites jpegs or png , best qual ...please help if possible

Hello all,

I am having a bit of an issue with my website. The designer is very hard to get hold (how annoying) and he never appears to give me any

info.

On facebook I run my high Rez files through an action which preps for Facebook and save as png. The quality has improved since I have

done this.

Now for my website, is there a perfect size and does it matter whether it's JPEG or png ? I understand the larger the file the longer it

takes to load the site. But I don't want more then twenty photos on site anyway.... Does this make a difference ? What size should I make

them please ? Any help much appreciated as ever

Thank you

<p>PNG is pixel-perfect, meant more for computer-drawn graphics than for photos. JPG is lossy, but when it comes to photos it leads to much smaller and faster to load files. JPG's kind of lossy doesn't pose problems with photos, where individual pixels are seldom important and edges are not of the razor type. In principle, there's no reason ever to use PNG for web photos. The file format just wasn't designed for that.<br>

Photo resizing is not an exact science. If done without special care, the odds are that it will diminish the quality more than it should. Others here may be able to give you some pointers.</p>

<blockquote>

<p>Now for my website, is there a perfect size </p>

</blockquote>

<p> <br>

This depends on how the sizing is being handled on the website. Nobody can answer this until you can give the expected display size. Note that it will differ on various platforms, monitors and browser sizes. Probably best to target the largest expected display size and let the software take care of reducing. Going in the other direction is usually more problematic.</p>

<p>Just to get things started, for FrontPage, I use 450 pxl ht for horizontal images and 630 pxl ht for verticals. </p>

<p>There are a host of issues that need to be resolved when a website is constructed. They are usually resolved through dialogue between the photographer and the designer if you're using one. If you're paying a guy to do this and he's not prompting/guiding you towards the answers he needs to do his job, then question whether you're dealing with the right person. Do you know how big you want the images to be? Or are you waiting for the designer to make suggestions? If there's no meeting of minds about who is supposed to be suggesting/responding, and if he's neither suggesting nor responding, then really, consider whether you've got the right "help". <br>

I used a web designer for my site, but I think you'll find that today, many people decide to save money by building the site themselves within a given template, and in any case even with a built site the vast majority of people will handle image selection and prep themselves and indeed have a website structure that enables even a website idiot like me to set up new galleries , change photographs and add/subtract captions by themselves. </p>

<p>Just to show a bit of willing, and please accept that what you need and what I need might be very different, I size my images as follows</p>

<p>Jpegs 750 x 500 pixels , landscape or portrait. at quality 10, digital "mount" extra</p>

<p>This is a decision made some years ago and in the meantime monitor resolutions have increased and my stuff looks small on one of todays larger screens. There's a trade-off between visibility and making it worthwhile for people to steal. Some of my images are square and they are often 650x650.</p>

<p>It may not apply as much today with fiber optics, but the more pxl ht the image, the longer it will take to open the image in a browser.</p>

The size of images for a website depends on the website layout. And that in turn depends first on the minimum screen resolution the site is designed for.<br>Once that is decided, you can divide the pages, decide where images have to come, where text, where navigational helpers, will have to go. And on where a variable empty margin has to go to allow for screens with higher resolution.<br>And from that it follows quite naturally how big what image that is going where has to be.

I would suggest that if someone is developing a website for you, then you provide full-size images to them and let them deal with the resizing. JPEG is probably the best format to provide, or TIFF if you want. Raw format is not a good choice, as the images should already have any post-processing done. Images for the web should be using the sRGB colour space.

<p>In general, an image will displayed on a pixel = pixel basis. That said, website software may resize images as needed, including based on the resolution of the user's display. There are other options too, including clicks and rollovers which will give the viewer other options, including download of the full sized image. There is usually no need to upload a full-resolution image, the depth should be 8 bits and use sRGB for the color space. TIFF and JPEG files embed information, like color space, that the web designer can use. JPEG files are smaller, hence upload more quickly.</p>

<p>Hmmm...</p>

 

<blockquote>

<p>And that in turn depends first on the minimum screen resolution the site is designed for.</p>

</blockquote>

<p> <br>

No, it depends on the maximum size. You don't want the browser doing upscaling. <br>

<br>

</p>

<blockquote>

<p>In general, an image will displayed on a pixel = pixel basis. </p>

</blockquote>

<p> <br>

This is just not true. Most modern, properly designed websites scale images based on browser window size.<br>

<br>

Maybe both of you can show us your galleries that demonstrate these properties.<br>

</p>

<p>Jeff, I would not use the term "properly designed" (as there is no definition of a properly designed website), but rather "well designed" (which is also subjective).</p>

 

<p>It is certainly a nice feature to dynamically resize images based on the width of the browser. This is part of the <a href="http://en.wikipedia.org/wiki/Responsive_web_design">responsive web design</a> approach. But there is no <em>requirement</em> for a website to be responsive.</p>

 

<p>Photo.net for one doesn't resize images based on the browser size.</p>

If you design a site for 800 x 600 pixel screens, images wil lhave to fit inside that small frame. The site will still look the same, though smaller with more empty margin, when viewed on a 1920 x 1200 screen. No upsizing.<br>Design the site for 1920 x 1200 and look at it on a 800 x 600 screen and you can't see the entire site, will have to scroll.<br><br>PNet is a good example. Images just get smaller in size (not pixels) and the margins on the left and right get wider when viewed on a screen with more pixels.<br>Browsers do not resample images, don't up- or downscale, unless you ask them to. An image will indeed display on a pixel=pixel basis.<br>It is not part of being properly designed for a website either. A website that has a mind of its own can be a real pain in the behind, for it cannot know how we want to behave, unless we tell it that. Imagine PNet downscaling itself to fit a cell phone's screen, because it senses how few pixels there are, and not because we direct it to do that. Nice for an initial screen of the newly opened site. Not so nice for anything else.<br><br>Some CMS software will resample images even if they are the correct size to begin with. So take care selecting such software.

<blockquote>

<p>If you design a site for 800 x 600 pixel screens, images wil lhave to fit inside that small frame. The site will still look the same, though smaller with more empty margin, when viewed on a 1920 x 1200 screen. </p>

</blockquote>

<p> <br>

No. Most will scale with the browser size. The screen size is simply a maximum size that the browser window can occupy (minus the browser frame.)<br>

</p>

<blockquote>

<p>PNet is a good example.</p>

</blockquote>

<p><br />Pnet is web 1.0 and a terrible example for a gallery.<br>

</p>

<blockquote>

<p> Imagine PNet downscaling itself to fit a cell phone's screen, because it senses how few pixels there are, </p>

</blockquote>

<p> <br>

It does that, although not because it senses how many pixels are there. It reads the header info from the browser and knows what type of device is in use. And fortunately, it downscales the images to fit the mobile device's screen. <br>

</p>

<blockquote>

<p>and not because we direct it to do that. </p>

</blockquote>

<p> <br>

<br>

How would it be told that on a phone screen?</p>

<p>I'm a dinosaur and started my web site with FrontPage in 1999 and a few years later upgraded to FrontPage 2002. Again, all jpg images are 450 pxl for horizontal or 630 pxl for verticals. To this day, the images look properly sized on desktops, laptops, iPads, and iPhones. I didn't do anything. They just came out this way. Maybe I'm just lucky.</p>

PNet may be a terrible example, but it is not much different from most websites. It has variable margins that will scale with browser/screen size, and when that size becomes smaller than the fixed size center cell, you will have to scroll. It does not rescale once it knows the resolution of the device used to visit it. As said, just like most of what is on the net. Easiest to make it this way. And it works fine, once you have decided the minimum screen size you want to have the site look good on.<br><br>PNet does scale to something very tiny in the browser on my phone, and if i want to read what tab to hover over or click, i will have to tell the browser to size it up. I do that just like anyone else using such devices by ´swiping´ the screen with my fingers. Gestures.<br>It would be terrible, unusable, if we allowed the website itself to choose how big it should appear. But it is of course possible to design a phone-friendly mobi site. eBay (most people will know that site) is a good example of a site not trying to be what it is on whatever device it happens to be visited from. If you want to go that route (and it certainly makes sense) you will have to design two different sites, each tailored to its particular use. Not only will the size of images be more restricted on the smaller devices, but how they will be placed on the pages too needs a rethink.

<blockquote>

<p>PNet may be a terrible example, but it is not much different from most websites.<br>

</p>

</blockquote>

<p>It's very different from pretty much any web 2.0 website. As someone who has worked in this space, I can say that photo.net's design is antique and very different from anything modern.</p>

<blockquote>

<p> <br>

PNet does scale to something very tiny in the browser on my phone</p>

</blockquote>

<p> <br>

There's a mobile site that you should see. If you're not, there's something set wrong in your phone.<br>

</p>

<blockquote>

<p>It would be terrible, unusable, if we allowed the website itself to choose how big it should appear</p>

</blockquote>

<p> <br>

One more time, virtually every well designed (thanks Colin) web site scales what the browser thinks is right. There is a difference between a browser and a website.</p>

Well, then it must be that there are very few well designed websites.<br><br>PNet in a browser is a good example of a site scaling to a phone's screen. Yes, a version designed to be seen on a phone would be better. But it will not provide the example of how bad a well designed self-scaling site would be, would it?<br><br>But however that all may be, the size of the pictures should follow from the lay out of the site and where and how they should appear in that.

<blockquote>

<p>Well, then it must be that there are very few well designed websites.<br /><br />PNet in a browser is a good example of a site scaling to a phone's screen. Yes, a version designed to be seen on a phone would be better. But it will not provide the example of how bad a well designed self-scaling site would be, would it?<br /><br />But however that all may be, the size of the pictures should follow from the lay out of the site and where and how they should appear in that.</p>

</blockquote>

<p>Sounds like 2006. This kind of thinking along with "layout" and "phone version" and "designed" sites is pretty much gone. Today, the good sites are templates or themes and often based on wordpress. They almost all use Jquery engine for photo galleries because of its superior response and resizing to various screen sizes.</p>

<p>If I was building a site today, it would be on a responsive wordpress theme (themeforest is great) and the photos would be uploaded at 2304×1440 jpg.</p>