Images & Optimization

Images designed for web and print are two completely different entities. Web image file sizes are much smaller than that of a printed image so that the image loads faster on the web, while the images used for print are much larger and have a higher quality and resolution. This is generally the same for graphic formats and selected colors for web. If your printed material is all blurred, distorted or fuzzy, chances are you used the wrong resolution, file type and sizes. Below are three things to consider when going from web to print.

Resolution:

Resolution refers to the number of pixels in an image. Because web graphics are being viewed on a screen, the resolution should be no larger than 72 ppi so that the image will load quickly. Digital photos or scans are much larger,and it is not recommended nor is it a standard practice to use on a website. These files are too large and will load much slower even with hi-speed, and it may not even necessarily look any better. The JPG file formats and RGB colour modes are the best for website use.

…Resolution ~ Print vs. Web ~ Images and DPI/PPI

Image resolution is a term that describes the detail an image holds. The resolution is measured in two ways DPI and PPI. DPI refers to DOTS PER INCH and is a measurement of printer resolutions. The more the resolution, the more the detail and sharpness is, therefore, more dot’s per square inch (dpi), while PPI refers to PIXELS PER INCH, a measure of the resolution of display screens, scanners, and printers. Many people confuse PPI with DPI, or never even heard of the term PPI. DPI is commonly used instead of PPI and PPI is not used very much. In computers DPI is a measure of the sharpness on the display screen. When referring DPI in the case of monitors, it refers to the number of pixels present per inch of display on the screen. The correct term is PPI, but DPI is commonly used instead. The standard monitor with a setting of 800 x 600 has 480,000 or less than half the resolution of a higher setting of 1280 x1024 which has 1.3 million pixels on the screen. The fewer the pixels, the less clarity. The greater number of pixels, the more detailed the picture will be.

…Print Specifications

Images used for print have a much higher DPI and resolution than that of website’s. These files are generally much larger than images for your website. When referring to a printed material, such as a photograph, DPI is referring to the small ink dots that the printer is capable of achieving on the printed page which make up the image and quality on the paper. Images for print and web differ in many ways. Images used for print material are usually a much higher quality than that of a website. Generally the standard for print is 300dpi, newspapers have a lower resolution of 150 to 200dpi , and for glossy prints the resolution should be between 300 to 400dpi, and for higher quality prints, your resolution should start at 600dpi for standard printers. Printers designed for turning out digital photography or other high-resolution images can far exceed 600 dpi.

Image Optimization for Web

There are many image format types but only a few will work on your website which are JPEG, GIF and PNG. There are two kinds of image compressions, lossy and lossless. Lossy compression is good for web viewing because the images use small amounts of memory and can be sufficiently like the original image. Once the lossy compression is decompressed, you will not get the exact same image of the original but it’s pretty close. When you decompress a lossless image, you get the exact same image as the original, but this takes greater amounts of memory, and therefore upload times are longer. The resolution for web is always 72 dpi. Web Image resolution is much smaller than that of print images so that they can be loaded quickly. There are three main file formats used for web images which are JPG (jpeg), GIF, and PNG. JPEG compression is designed to optimize photographs or images with millions of colours such as photographs or drawings with many shades of gradients, or continuous tone graphics, while GIF compression is designed to optimize images with large amounts of continuous colour such as illustrations. The format is a bitmap, which means that it’s a grid made of tiny pixel squares which every pixel is saved. Pixels can be made transparent as well. GIF’s are also used for animation. PNG has a greater color-depth than GIF’s and stores partial transparency and can achieve much greater compressions. PNG’s are idea when the images need to preserve the transparency and has a large amount of colours. Sometimes these types of files are not small enough for web display.

Image File Types ~ .gif, .jpg (jpeg) .png, .tiff:

JPEG stands for Joint Photographers Experts Group, and are generally found in photographs and graphics with lots of color blends. JPEGs can display millions of colours, therefore, they are great for print work. GIF stands for Graphics Interchange Format. This type of file format is used for most web pages because they are supported by all web browsers, and are viewable on all screens. They are appropriate for image files with little colour variations and can include transparent backgrounds. They can display up to 256 colors which makes them practical for almost all graphics except photographs. They are excellent at compressing areas of images with large areas with the same color. Generally, GIF files should be used for line drawings, icons, and logos and animation. Avoid using GIF formats for photographic images. PNG stands for Portable Network Graphics and is the newest file format and is widely supported by the web. It was developed to surpass the limitations of GIFs. They can can also display images with a variety of transparency effects, and can be used for both photos and transparent images. They offer better compression than GIF and can be used for 24 bit pictures (that’s 16+ million colours). PNG does not however, support animation. TIFF stands for Tagged Image File Format, and is strictly used for bitmap data. This is a filed format for storing images popular amount graphic artists and the publishing industry. the TIFF format is widely supported by image manipulation and publishing applications by scanning, faxing, word processing and other applications. Tiff has an adaptable file format for handling images an data within a single file. TIFF can be a container holding compressed (lossy JPEG and (lossless) compressed images. A TIFF file can also include clipping paths (outlines, image frames, cropping) and vector-based. The ability to sort images in a lossless format make TIFF useful for image archiving because unlike JPEG files, a TIFF file using lossless compression may be re-saved after it’s been edited without losing image quality. The recommended file format for print images are TIFF for photos and EPS for clip art, text based graphics and close cropped images with transparent backgrounds.

Size:

File size measures the size of bytes, kilobytes (kb), or megabytes (mb). A byte represents a single character, digit or symbol including a space of data. Each byte is composed of 8 bits. Bits are either 0 for ‘off’ or 1 for ‘on and are the simple unit used for operations in a process of computers. There are 1,024 bytes in a kilobyte, and 1,024 kilobytes in a megabyte, therefore a 1kb document would contain 1,024 bytes of data.

Optimizing images for the Internet:

One of the easiest way to reduce web page response times is by optimization your images for your website. There are so many website’s out there that do not optimize their images properly, therefore, results in extremely slow loading times. Optimizing your images means reducing their file sizes as much as possible. Not only will the images load quickly, but it also reduces your bandwidth consumption which could potentially save on your hosting bills.