Best Photo Format for Web Content

[saudilawyers]

Hi,

We are on the stage of redesigning our website and inserting photos <snip>.

We would like to have the photos optimized and with the best quality. We use Photoshop to convert and increase the resolution of the photos to JPEG and PNG.

What is the best format that we could use to achieve the quality and resolution of the photos?

We appreciate your response and feedback on this matter. Thanks.

[eis]

Hello,
To my taste, the photos are OK.
There is always a compromise between quality and file size.
Maybe it would be better to use a bigger
character set in arabic.

Have a nice day, Olaf

[Shyflower]

Hello,
To my taste, the photos are OK.
There is always a compromise between quality and file size.
Maybe it would be better to use a bigger
character set in arabic.

Have a nice day, Olaf

What does a bigger character and language have to do with the format of a photo? Please keep your replies on topic.

Deciding upon resolution is always trial and error. I generally prefer 96dpi for screen but some people probably still use 72dpi. As for file type that really is at your preference. I prefer png because it will hold transparency while jpeg will not. However, for just lowering the resolution of photos, I believe jpeg is = to png but results in smaller (quicker loading) files.

[EastCoast]

Jpeg generally works better on photographic images, png works better on images with a limited range of colours such as logos, illustration and icons

[HarrieB]

This is something which is hit and run and there is no official documentation from Google or Matt Cutts saying if the photo resolution has an impact on optimization or not.

You can use 72 dpi or 96 dpi.

The main thing you should keep in mind is when you save the image, it should be renamed as one of your keyword and not jshshshs.jpg

You can also edit it using wordpress and add title as well as alternate text to the images for better optimization.

[Shaun(OfTheDead)]

I've found that the resolution in dpi really doesn't matter for web, all that matters is the actual number of pixels wide by number of pixels tall. Yup, JPG is still the best format for photographs because the way that JPGs compress gives a more natural look than the compressions of GIF or PNG8. I remember reading somewhere that PNG24 is supposed to be good (or better) for photographs, but I'm not totally sure.

Also, for me, I compress the JPGs to 9 in Photoshop and have had good results. 12 is almost lossless but the filesize is huge! I only use 10, 11 or 12 JPGs for printing. For web, mostly 9 but sometimes 7. Never less than 7 though.

Also, make sure your colourspace is sRGB or you may find the colours of your JPGs changing quite a bit when you upload and view in a browser.

[likends]

Hi,

We are on the stage of redesigning our website and inserting photos <snip>.

We would like to have the photos optimized and with the best quality. We use Photoshop to convert and increase the resolution of the photos to JPEG and PNG.

What is the best format that we could use to achieve the quality and resolution of the photos?

We appreciate your response and feedback on this matter. Thanks.

Every format has its own uses right? So Jpeg is the best, but why not try the png. It might produce quality results. As long as the pixels dont get damage.

[xhtmlcoder]

PNG-24 is superior to JPEG and PNG can contain transparency though it won't compete on filesize for photos. The PNG should be several times larger than a JPG (for most photos) anyway as it has to store all the colour spaces.

Hmm, a web browser has no concept of dpi thus it will appear different to say Photoshop (where you can see print and actual size, etc.) As far as the browser is likely to be concerned anything over 72 dpi is meaningless anyway (or for that matter so is 72 but that's another story).

In reality the dpi 'Text Size' is a "Logical Inch" computed value. Don't confuse "logical inches" with "real inches" - very different concepts.

For example we have three; 100px by 100px images, one at 72 dpi, 96 dpi and 300 dpi. It possibly will look the exact same size within a web browser but when printed it will differ.

Basically DPI does NOT apply to video screens; video systems know no concept of dpi at all or any concept of inches either. You should notice that the terms "dpi" or "ppi" simply do not appear in any user manual for any monitor or for any video board.

It's horses for courses, and PNG-24 would have a hell of a time trying to compete with JPG on a complex colour photo for file-size even if the JPG was saved at 100% quality.

Although without a doubt PNG-24/32 is the superior format for quality when using RGB images. Though for online photographs - as part of a web page design - you'd nearly always choose JPG mainly due to a small filesize; "lossy compression" trade-off with perceived quality when viewed as part of a webpage.

[Shaun(OfTheDead)]

JPEG is the best your every type of web content

Not really. PNGs are fantastic for graphics with big, solid colours. JPGs don't do so well with solid colours.

And GIFs are the only supported files with "animation".

[shanshan]

For something so important as a template or layout for a web site, I would recommend keeping them as JPEG and the highest quality setting via Photoshop as you can. You want a high quality finish on your site to attract users.

[oakwood]

I think JPGE or PNG/PNG-24 is not fact,but must be follow this step
1:image quality is must be perfect.
2:image size maximum 20-35kb is perfect.
3:If you edit the image then kindly(if illustrator then save web content>JPEG format,if Photoshop then save JPG/JPEG>medium pixel size)
4:If you upload image from your device then use caption and give one inbound link.
5:If you upload image from URL then ignore this option
6:always try to input image as feature image
<snip />

[Alexander George]

JPEG works just fine for the website content. You can always go to stockphotos.com for all sorts of sizes and choices.

[keripik buah]

i usually use PNG for logos and icons, and JPEG format for photo or gallery content
we can make transparent picture with PNG format.

[Shyflower]

Looks like all options have been discussed and the OP has not returned to comment.

Thread Closed.