recommended image size in pixels and file size for web?

Hello,

I am new to web design and wanted to create a photo gallery, using photoshop to optimize the images.

Two questions:

1. The majority of my images are in landscape format and I wanted to know what the best image size in pixels are for web design? I have seen several different sites where the images occupy the fullscreen; however, the images are not very 'crisp' in resolution. Is there a limit to how wide an image should be in the horizontal dimension while maintaining a very clean and sharp image?

2. When using photoshop to optimize the images for web 'save to web', what is the recommended file size to save them as? I have read somewhere it ranges anywhere from 40k - 70k?

Thank you for your suggestions,
grodr

powerbook G4, Mac OS X (10.5.2)

Posted on Feb 14, 2010 2:36 AM

Reply
9 replies

Feb 14, 2010 2:56 AM in response to grodr

Start by doing it. Create your images, drop them on the canvas and publish.

iWeb will scale the original to the displayed size. If you do not like the result, then resize them in advance before dropping them on the canvas.

the best image size in pixels are for web design


There is no best image size. Use the size you want for the webpage. The largest size I use is 2140x270.

http://www.wyodor.net/_Demo/Gardens/Zuidendijk/Zuidendijk.jpg (256kB)

I display it here : [Polder|http://www.wyodor.net/_Demo/MyHouse/Polder.html]

the images are not very 'crisp' in resolution.


Have you seen the original image? Perhaps the images were not crisp in the first place. Crispiness usually only exist in the eye of the owner of the image. They worry themselves stiff about the tiny pixels nobody sees.

Is there a limit to how wide an image should be in the horizontal dimension


No. Make them as wide and high as you want them. It's your webpage. You decide.

what is the recommended file size to save them as?


Make them as small as possible without loosing their crispness. A JPEG has a compression for 0 to 100, or small, medium, large. Try them all.

And remember, a webpage is not a glossy. Your visitor might not notice the lack of crispness.

Others in this forum might chime in with all kind of placebo solutions. Use the tools you have and don't fret too much about it.

Feb 14, 2010 3:48 AM in response to Wyodor

thank you for your reply.
as i mentioned in the first post, i am using photoshop to save them to web and have been saving them as 50k file sizes. the images are 842px wide by 500 tall in an embedded iframe. for some reason, a few images do not seem very 'crisp' in resolution, could this be because of the 50k sized compression? the original sizes and their resolution look fine, but lose quality once they are compressed using photoshop.

is there a recommended file size in 'k' that is best used for iframes?
i have on average 60 images in total on the site now.

thank you,
grodr

Feb 14, 2010 4:26 AM in response to grodr

Of course, images lose quality with compression. Not only when published on the web, but on your desktop as well. 50 KB for an image of that size is rather small and will be of quite poor quality.
As Wyodor said, there is no such thing as a best image size. Try different levels of compression to find what you think is acceptable loss of quality and find a compromise between image size and loading time for your web page. After all, a high quality image (and therefor large in KB's) will take that much longer to load once published.
And, don't get hooked on numbers. 50 KB may be indeed very well for some pictures, but totally unacceptable for others. So, don't pin yourself down on a number of KB's that should do for all images. You will have to treat them all independently.

Feb 14, 2010 4:38 AM in response to grodr

the images are 842px wide by 500 tall


If the images of that size have a bad quality, use less compression.

Here a 2 images. Original is 2816x2112 (3,6MB). Both were exported from iPhoto to 840x630 in normal (157kB) and low (78kB) quality.

Compare them :

http://www.wyodor.net/Discussions/Shoelow.jpg
http://www.wyodor.net/Discussions/Shoenormal.jpg

You may comment on [the shoe|http://www.ecco.com/nl/nl/collectie/heren/casual/50024/51052/detail.do], but both images look the same to me.

The shoe is also displayed on [this page|http://www.wyodor.net/Vereniging/2Koloms.html].

Feb 14, 2010 12:41 PM in response to grodr

If you add an iPHoto album to iWeb via the Album page iWeb takes care of the resizing of the files. The largest is resized to 800 x 600 for the slideshow portion. I don't think you need to do any pre-optimization. I suggest you add an album straight from iPhoto, publish the site either to a folder on your hard drive and then view the site and hotos with your browser. Then located the folder with the album photos and view them with Photoshop.

I did some tests on optimization of photos for file size of photos just added to a page. The results are here: Page 1. Don't know if it is directly related to an album type of optimization but it gives some indication of what iWeb does.

OT

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

recommended image size in pixels and file size for web?

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.