- Most computer monitors have display sizes of 800x600 pixels, 1024x768 pixels, or 1280x1024 pixels.
- There’s no point putting a 2000 px wide image in a webpage if 90% of the population are using screens with a maximum 1024px resolution. The image is just going to be too big to be seen on the screen.
- Most computer monitors display at resolutions of 72 pixels per inch or 96 pixels per inch.
- Some screens are around 96 ppi, some are up around 120 ppi, while the latest screens on tablets are achieving mind blowing resolutions of over 500 ppi
- Where possible, particularly if several images are to be included on the same page, try to keep the file size to below 50 kb.
- How to 'Future Proof' Your Web Design.
iOS app designers and developers have their own method of dealing with the doubling in screen resolutions on the iPhone and new iPad. It’s certainly not painless, but it is quite simple: Include high resolution versions of all images in your app and append '@2x' to the filename. Doing this one thing automatically makes your app HD, and displays the '@2x' versions of images on Retina displays.
- Save for Web dialog The Save for Web dialog in Photoshop is a tool to compress images for use on the web. It outputs to one of four file formats, gif, png and jpg, plus the basically unknown Wireless Bitmap format (wbmp). JPG is the best format for continuous tone images for the web. They can be heavily compressed, while still retaining a lot of their detail. As noted before, there are two main things that determine file size – the number of pixels in the image and the compression applied when saving as a jpg. Save for Web is designed to be used on images that are already resized. The basic compression choice comes in the form of either presets (high, medium low etc) or a slider that you set anywhere from 0 to 100. In the example above, it took a 1.91MB image and reduced it anywhere from 180kb at 70 level quality right down to around 27kb at level 1 quality. How much you compress is up to you, but I find the best balance for size and quality to be around the 50 mark.
- Gifs is the traditional format for graphics, like logos and such, as they support transparency and a smaller colour palette, but these days most designers are using 8 bit png files instead. They also support animation, but are not recommended for continuous tone images. They can support 256 colours but are much larger than an equivilant jpg.
- Png files support transparency, which is very useful in web design, but pngs are rather large even out of the Save for Web dialog. That said, there are ways to further reduce the size of pngs, including a great little online tool https://tinypng.com/ which compresses the png file while retaining transparancy. As a basic rule of thumb, use jpgs for photographs on the web and png for graphics. For a much more in-depth look at these formats, check out this excellent article on sixrevisions.com
- DPI is a printing term, and it stands for DOTS PER INCH. Printers lay their ink down in dots, and this figure is not the same as PPI. Dots have space in between them, and pixels don’t. DPI doesn’t have any real relevance to our discussion today. PPI on the other hand, which stands for PIXELS PER INCH, is a term that relates to digital images. Pixels, or picture elements, as we have established, are what digital images are made up of, and are square. The terms DPI and PPI are NOT interchangeable, and PPI is the correct term to use when talking about digital images.
- Web Image SpecificationsResolution and file formats for web images need to be much smaller than for print images so that they can load quickly.
The three main file formats used are JPG (JPEG), PNG and Gif.
In general, JPGs are used for (rectangular) photos while Gifs are used for cropped images with transparent backgrounds, such as logos, and animations.
Gif images do not use as many colours as JPGs and PNGs so the quality is much lower making them unsuitable for photos.
Instead, PNGs, which can also display images with a variety of transparency effects, can be used for both photos and transparent images.
- Optimizing images for the InternetIt is good practice to optimize images for the web using the "Optimize for Web" option. Optimizing CMYK and greyscale images automatically converts them to RGB (JPGs & PNGs) or the (RGB) Indexed Color mode (Gifs).
It is possible to use the "Save As" option, however, CMYK images will need to be converted to RGB first: they cannot be saved as Gifs and PNGs using this option and CMYK images saved as a JPG will not automatically convert to RGB. The colours of CMYK JPGs may not look right on your website but more importantly they are considerably larger files than RGB JPGs.
When optimizing images for the web image resolution is also converted to 72 dpi regardless of its original resolution. However, the pixel width remains the same. Check your pixel width before optimizing. Downsize your image first if necessary.
- For display on a computer monitor, scanning an image at a higher resolution will simply yield an image that displays larger on the screen, since more total pixels are captured. For example, a 3 inch by 3 inch picture scanned at a resolution of 72 pixels per inch will be 216 pixels wide and 216 pixels high and display as a 3 inch by 3 inch picture when displayed on the computer monitor. A 3 inch by 3 inch picture scanned at a resolution of 144 pixels per inch will be 432 pixels wide and 432 pixels high and display as a 6 inch by 6 inch picture when displayed on most computer monitors.
- JPEG (Joint Photographic Experts Group) – The jpeg image format allows up to 16 million colors and is the best choice for image with many colors or color gradations (especially photographs). Jpeg is a “lossy” format which means that each time the image is saved and compressed, image information is lost and quality is degraded. Jpeg images allow for various levels of compression. Low compression means high image quality, but large file size. High compression means lower image quality, but smaller file size.
GIF (Graphic Information Format) Gif is a “lossless” image format, meaning that the quality of the image is not degraded through compression. The limitation of gif images is that the color palette includes only 256 colors. Therefore, the gif format is a good choice for simpler graphics with a smaller number of solid colors. The gif format also allows for transparent backgrounds, which allows the background color of the web page to show behind the graphic.
PNG (Progressive Network Graphics) PNG is a newer image format that provides a combination of many features of both jpeg and gif. The PNG format allows for use of millions of colors as well as providing the ability to have transparent backgrounds. The one drawback to PNG’s is that the format is not supported by all web browsers, particularly older browsers.
Native file formats – Native file formats are the formats that the graphics editing programs use to save the graphic project files in. The native file formats are larger in file size and contain all of the information that allows the image to be edited. Examples of native file formats are .psd for Photoshop and .png for Fireworks.
Other file formats – Computer graphics may also be present in a number of other different formats such as .bmp, .tiff, and .eps. These formats have their particular uses, such as for print graphics, but are not suitable for display on the web. To use one of these types of files on the web, open it in your graphics program and then save it as either a jpeg, gif, or png.