Every picture tells a story – or does it? Are your website’s images optimized for all people and devices?
When you convert your PNG files, your meta data and keywords are stored inside. The Portable Network Graphic format was created in 1995 when Unisys and CompuServe officially announced that programs using GIFs would require royalties because of the patent on the LZW compression method using GIF.
The best thing about PNG files for digital photographers is that they can be smaller in file size and preserve transparency. PNG’s have proven to be the best for gradients. You can categorize and add keywords. The danger is that there is a problem with the loss of your meta data when the image is opened with indifferent software. Your information can easily get lost.
Comparison to JPEG
JPEG (Joint Photographic Experts Group) format can produce a smaller file than PNG for photographic (and photo-like) images, since JPEG uses a lossy encoding method specifically designed for photographic image data, which is typically dominated by soft, low-contrast transitions, and an amount of noise or similar irregular structures. Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize with negligible gain in quality. By contrast, when storing images that contain text, line art, or graphics – images with sharp transitions and large areas of solid color – the PNG format can compress image data more than JPEG can, and without the noticeable visual artifacts which JPEG produces around high-contrast areas. Where an image contains both sharp transitions and photographic parts, a choice must be made between the two effects. JPEG does not support transparency.
Because JPEG uses lossy compression, it suffers from generation loss, where repeatedly encoding and decoding an image progressively loses information and degrades the image. Because PNG is lossless, it is a suitable format for storing images to be edited. While PNG is reasonably efficient when compressing photographic images, there are lossless compression formats designed specifically for photographic images, lossless JPEG 2000 and Adobe DNG (Digital negative) for example. However these formats are either not widely supported or proprietary. An image can be saved into JPEG format for distribution so that the single pass of JPEG encoding will not noticeably degrade the image.
The PNG specification does not include a standard for embedded Exif image data from sources such as digital cameras. TIFF, JPEG 2000, and DNG support EXIF data.
Early web browsers did not support PNG images; JPEG and GIF were the main image formats. JPEG was commonly used when exporting images containing gradients for web pages, because of GIF’s limited color depth. However, JPEG compression causes a gradient to blur slightly. A PNG file will reproduce a gradient as accurately as possible for a given bit depth, while keeping the file size small. PNG became the optimal choice for small gradient images as web browser support for the format improved.
Comparison to JPEG-LS
JPEG-LS is a “near-lossless” image format far less widely known and supported than the other lossy JPEG format discussed above. It is directly comparable with PNG. On the Waterloo Repertoire ColorSet, a standard set of test images (unrelated to the JPEG-LS conformance test set), JPEG-LS generally performs better than PNG, by 10–15%, but on some images, PNG performs substantially better, on the order of 50–75%. Thus, if both of these formats are options and file size is an important criterion, they should both be considered, depending on the image.
Comparison to TIFF
Tagged Image File Format (TIFF) is a format that incorporates an extremely wide range of options. While this makes TIFF useful as a generic format for interchange between professional image editing applications, it makes adding support for it to applications a much bigger task and so it has little support in applications not concerned with image manipulation (such as web browsers). It also means that many applications can read only a subset of TIFF types, creating more potential user confusion.
There is a TIFF variant that uses the same compression algorithm as PNG uses, but it is not supported by many proprietary programs. TIFF also offers special-purpose lossless compression algorithms which can compress bilevel images (e.g., faxes or black-and-white text) better than PNG’s compression algorithm. I need to find out more about why we would use TIFF files and plan to find out in an upcoming class.
Bitmap graphics editor support for PNG
The PNG format is widely supported by graphics programs, including Adobe Photoshop , Corel ‘s Photo-Paint and Paint Shop Pro, the GIMP, GraphicConverter, Helicon Filter, Inkscape,IrfanView, Pixel image editor, Paint.NET and Xara Photo & Graphic Designer and many others. Some programs bundled with popular operating systems which support PNG include Microsoft’s Paint and Apple’s iPhoto and Preview, with the GIMP also often being bundled with popular distributions.
Adobe Fireworks (formerly Macromedia) uses PNG as its native file format, allowing other image editors and preview utilities to view the flattened image. However, Fireworks by default also stores meta data for layers, animation, vector data, text and effects. Such files should not be distributed directly. Fireworks can instead export the image as an optimized PNG without the extra meta data for use on web pages, etc.
File size and optimization software
Compared to GIF
Compared to GIF files, a PNG file with the same information (256 colors, no ancillary chunks/metadata), compressed by an effective compressor will normally be smaller than GIF. Depending on the file and the compressor, PNG may range from somewhat smaller (10%) to significantly smaller (50%) to somewhat larger (5%), but is rarely significantly larger for large images. This is attributed to the performance of PNG’s DEFLATE compared to GIF’s LZW, and because the added precompression layer of PNG’s predictive filters take account of the 2-dimensional image structure to further compress files; as filtered data encodes differences between pixels, they will tend to cluster closer to 0, rather than being spread across all possible values, and thus be more easily compressed by DEFLATE. However, some versions of Adobe Photoshop, CorelDRAW and MS Paint provide poor PNG compression, creating the impression that GIF is more efficient.
What is GIMP?
The (GNU Image Manipulation Program) is an image retouching and editing tool and is released under the GPLv3 license as free and open-source software. There are versions of GIMP tailored for most operating systems including Microsoft Windows, Mac OS X and Linux.
GIMP has tools used for image retouching and editing, free-form drawing, resizing, cropping, photo-montages, converting between different image formats, and more specialised tasks. Animated images such as GIF and MPEG files can be created using an animation plugin.
The developers and maintainers of GIMP have a product vision for GIMP to strive to be a high end free software graphics application for the editing and creation of original images, photos, icons, graphical elements of web pages and art for user interface elements.
GIMP’s fitness for use in professional environments is regularly reviewed; as such, GIMP is often cited as a possible replacement for Adobe Photoshop. The maintainers of GIMP state that GIMP seeks to fulfill GIMP’s product vision rather than seek to replicate the interface of Adobe Photoshop.
The user interface of GIMP is designed by a dedicated design and usability team. This team was formed after the developers of GIMP signed up to join the OpenUsability project. A user interface brainstorming group has since been created for GIMP, where users of GIMP can send in their suggestions as to how they think the GIMP user interface could be improved.
PHOTOSHOP – HOW TO CHANGE THE SIZE OF AN IMAGE
The task of resizing images in Photoshop and other editors is a bit confusing. Do you “Resample Image” and what is image dimension versus pixel dimension? To get to the Image Size dialog box open an image, and go to Image>Image Size.
As you can see in the example, the Pixel Dimension box shows the file is a 1.14MB JPEG file and how many pixels are in the image. The document size box shows you how big your image will print and at what resolution. Resolution for print is generally at the 300ppi.
As for image quality on the web, a resolution of 72ppi has been the norm, however, the web is now leaning toward 90ppi to take into consideration iDevices and other monitor sources that are offering up gorgeous images. But remember – a large image will slow down a website’s page load, which of course is taboo, and printing a large sized low res image will look totally degraded and blurry.
When it comes to using images over the internet, digital images have no absolute size or resolution. All it has are a certain number of pixels in each dimension. The resolution changes as the image size changes because the number of pixels that make up the image are being spread across a lesser or greater area.
For web use, the DPI is meaningless. It is only useful for a file that will be printed. For web use the important part is the pixel dimensions. HTML uses pixel dimensions to control the size of an image in a web page. The size on any particular display will vary because 72DPI is no longer the norm. Most modern displays are actually above 90DPI.
You will always have a loss of image quality when you upscale an image. The information is either there, or it is recreated by some software. I understand that the software for enlarging images offered by Alien Skin does a great job, although I have never used it.
You wouldn’t want a humongous image to have to download while someone was visiting your website. It will take too long to download and it is just not necessary to have such a huge file. You have complete control over all of the images you have if you understand some of these basic Photoshop concepts.
Images to a Smaller Size
When you make an image smaller, you will be losing pixels in the process. This is when you check the “Resample Image” box. Resampling is a process in which the number of pixels (the tiny dots that make up an electronic image) is changed to modify the overall size and resolution of an image. It reduces the number of pixels in the image, leaving as much of the image as needed to maintain high quality while removing unneeded data to help the image and your page load quickly.
Check the Bicubic Sharper, which is a high-quality method for reducing the size of images. It is based on Bicubic interpolation but also adds some sharpening.
Resizing Images to a Little Larger
Even small enlargements require adjusting the pixel dimensions. Keep “Resample Image” box unchecked to keep the pixels the same. If you are printing an image that has been enlarged a bit, you will have to see which resolution will look best. Try 240ppi (pixel per inch), and adjust according to the rules in this post – 300ppi has the most detail for print.
You can try enlarging the image 5 percent to 10 percent at a time. Make sure Bicubic Smoother is checked, and that Resample Image is off. In some cases you may need to purchase software made specifically for enlarging images. Check the reviews and try any trial versions of upsampling software before you make your purchase.
Resizing Images to Much Larger
Using the Bicubic Smoother is a high-quality method for enlarging images and is based on the Bicubic method but adds some contrast while also attempting to produce smoother results. Make sure you you check this, and that Resample Image is off.
There are several methods for re-sizing images, and thankfully, Photoshop lets you try a variety of things within the Image>Image Size menu.
Resizing for a Specific Size
If you ever need to produce an image that has a required image size, which can include max MB size, or you want to email a large image that is for use over the internet and want to shrink it, you will need to start maneuvering the pixel dimensions. Check “Resample Image”, adjust the width or height, use the scrubby sliders if you wish. If you are using images for online use, you can easily stay under 1000 either in width or height. Use either Bicubic Smoother or Bicubic Sharpener.
Minimum megapixels for quality prints:
Max Print Size Minimum MP Resolution
4 x 6″ 2 megapixels 1600 x 1200
5 x 7″ 3 megapixels 2048 x 1536
8 x1 0″ 5 megapixels 2560 x 1920
11 x 14″ 6 megapixels 2816 x 2112
16 x 20″ 8 megapixels 3264 x 2468
16 x 24″ 12 megapixels 4200×2800
Retina Display is a brand name used by Apple for liquid crystal displays which they claim have a high enough pixel density that the human eye is unable to notice pixelation at a typical viewing distance. The term is used for several Apple products, including the iPhone, iPod Touch, iPad, and MacBook Pro. As the typical viewing distance would be different depending on each device’s usage, the pixels per inch claimed as retina quality can be different for the smallest devices (326, iPhone and iPod Touch): greater than the mid-sized devices (264, iPad) and greater than the larger devices (220, MacBook Pro). When an Apple product has retina display, each user interface widget is doubled in width and height to compensate for the smaller pixels. This mode is referred to as HiDPI mode by Apple.
Apple has applied to register the term “Retina” as a trademark in regard to computers and mobile devices with the United States Patent and Trademark Office, Canadian Intellectual Property Office, and in Jamaica. On November 27, 2012 the US Patent and Trademark office approved Apple’s application and Retina® is now a registered trademark.
We feel this is a great way of volunteering our time – helping people to save their cherished images is an awesome undertaking. Many people in the Rockaway’s and Howard Beach have been hard hit by Sandy, and have lost everything. It is a great feeling to be able to restore some of their most valued images.