Friday, October 31

GIF vs JPG vs PNG: differences

If you are working with JPG, GIF and/or PNG image files, it is essential to know the differences between each one, so you know when to use them. The main difference between files formats is how they are used when designing for the web and the outcome they produce. One produces highly optimized simple graphics, another is used for most images, and the third option is used for complex graphics, gradients and transparency.

  • Compression: Unlike PNG and JPG files, GIFs force all the colors of an image into a 256-color palette in order to reduce image size. However, these color limitations often lead to immediately-noticeable coloring issues, usually appearing as white spots or blotches of color, where images should be more complex. The circled area in the image below highlights a region where the effects of compression are most obviously apparent. Any colors outside of the 256 found in the standard Web palette are changed to whatever color is closest to it, creating blotchy patches as a result.
  • Transparency: GIFs assign one of 256 colors to be transparent. However, this does come with some limitations. Adding transparency removes a color from an already limited palette, and pixels are either totally clear or opaque, with no in-between. Additionally, round edges will feature a white backing as opposed to sitting directly against the background, contrary to the nicely-defined edges in the PNG below.
  • Animation: Almost all of the animated images you’ll find on the Web are GIFs. A couple of reasons why GIFs are popular are their efficient file size, and simple creation process. Moreover, a number of the format’s built-in features allow for acute control over specific animation behaviors — including animation speed, whether the frames are persistent, and how many times the animation repeats.
  • Compression: JPG compression is great if you’re just trying to send someone a picture through your phone or in an email, two situations where you might not necessarily want to send large files. Although most JPGs look fine from a distance under normal compression, there is a noticeable loss of quality whenever users zoom in on a JPG image. The effects of JPG compression have been greatly exaggerated in the image below to show the loss of quality that occurs.
  • Transparency: Unfortunately, JPGs don’t support transparency. JPG files have an unlimited color palette, but they blend pixels together to reduce the size of the image.
  • Animation: Although JPGs don’t support animation, a Motion JPEG format exists that accommodates both animation and sound. However, it isn’t widely used on the Web, and is primarily used for storing and transferring video on small, low-end devices such as digital cameras and portable game consoles.
  • Compression: PNG files are a lossless format, meaning that compression doesn’t affect the quality of the image. Unlike JPGs, which create artifacts and blur images at a certain point, a PNG file will always look at least as sharp as the original image. Unfortunately, PNG files also tend to be a bit larger than JPG files, especially when they’re high resolution. This could make them difficult to share to the Web, or between friends and family.
  • Transparency: PNG files sport the best capacity for transparency. PNGs create transparency in one of two ways. One of these methods employs the same approach used by GIFs, with a single color defined as transparent, and the other is to set an alpha channel. One of the advantages of PNG single-color transparency is that it doesn’t remove a color from the available palette. However, the alpha channel is a much smoother method, as it is far better at blending colors, and allows you to select different levels of transparency in specific regions. The transparent areas of the PNG will blend and adjust naturally to whatever is behind the image when the background of the page isn’t a solid white or black color. As shown above, the edges all fade from fully colored to partially transparent, subsequently creating a cleaner edge and smoother background transition.
  • Animation: While there was an effort to create a protocol for animated PNG files, it hasn’t caught on, and thus hasn’t received support from most major browsers. The format has some specific uses, such as medical imaging and geographical work, but isn’t widely used on the Internet.


JPGs, PNGs, and GIFs have benefits and limitations, and it’s more important to know when to use each file type. As a general rule, you’ll want to use a GIF whenever the image is to be animated. Beyond that, JPG compression tends to create smaller file sizes at the cost of image quality. However, PNGs are better for capturing lossless images, and in situations where minimizing file sizes isn’t of utmost importance. Ultimately, situational considerations should be weighed heavily when deciding which of these file types you should use.

Saturday, October 18

6 Free Online Image Compressors

Image Compressors

With page speed a ranking SEO factor and consumers expecting exceedingly fast web experiences, it's crucial to get aggressive and take control of your image sizes to deliver a faster loading website to your users.

Image compression is either lossy or lossless: Lossy works by discarding information from the original file, and lossless retains all the original data (though, the file size tends to be bigger). There's a variety of image compression algorithms that take different approaches to reducing file size, and the tools listed below utilize a number of those to minimize the size of your images.

Whether it's JPEG, PNG, GIF or SVG, we've got you covered with this selection of 6 free online image compressors. All of them will help you compress your website's images, save bandwidth and improve your site's performance.

1. is an online service from the Yahoo! Developer Network that optimizes your images. It uses lossless compression techniques, so the file size is reduced without changing the look or visual quality of the image.

The uploader supports JPEG, GIF and PNG files with maximum sizes of 1MB. The optimized results are available for download from a temporary URL, which is valid for up to 30 minutes afterwards.

2. CompressNow

CompressNow is a free online service that lets you upload images from your computer, choose a compression percentage and download the optimized image. It supports GIF, JPG and PNG formats.

The service also allows the drag and drop of multiple images from you computer, with a max upload of 10 images and a max individual file size of 3MB.

3. Shrink Pictures

Shrink Pictures allows you to resize pictures and choose the level of compression applied, and it supports JPG, GIF and PNG. You can select the maximum image dimension, apply special effects, and download the optimized images.

Shrink Pictures ensures privacy by using an automated script to remove any processed images from the server.

4. TinyPNG

TinyPNG enables advanced lossy compression for PNG images. It preserves full alpha transparency and reduces the file size by selectively decreasing the number of colors and bytes in the image.

The effect is nearly invisible, but it makes a large difference in file size. It takes 24-bit PNG files and converts them to much smaller 8-bit indexed color images, with all unnecessary metadata stripped as well.

5. JPEG Reducer

JPEG Reducer shrinks the sizes of your images and photos to make them load faster, and works by using lossy compression. However, you may not even notice that any changes have been made.

Just upload your image or enter its URL and press "Reduce It." You can then view the compressed images and thumbnails, and right-click the image to save it.

6. Image Optimizer

The Online Image Optimizer from Dynamic Drive lets you easily optimize GIFs, JPGs and PNGs so they load as fast as possible. The images can be converted from one file type to another, with an upload size limit of 2.86MB.

You can enter the URL of the image or upload it from your computers, choose your image conversion, optimize it and download the results.

From mashable

Wednesday, October 8

Image compression

Image compression is the application of Data compression on digital images. In effect, the objective is to reduce redundancy of the image data in order to be able to store or transmit data in an efficient form.

A chart showing the relative quality of various jpg settings and also compares saving a file as a jpg normally and using a "save for web" technique

Image compression can be lossy or lossless. Lossless compression is sometimes preferred for artificial images such as technical drawings, icons or comics. This is because lossy compression methods, especially when used at low bit rates, introduce compression artifacts. Lossless compression methods may also be preferred for high value content, such as medical imagery or image scans made for archival purposes. Lossy methods are especially suitable for natural images such as photos in applications where minor (sometimes imperceptible) loss of fidelity is acceptable to achieve a substantial reduction in bit rate.

Methods for lossless image compression are:

  • Run-length encoding – used as default method in PCX and as one of possible in BMP, TGA, TIFF
  • DPCM and Predictive Coding
  • Entropy encoding
  • Adaptive dictionary algorithms such as LZW – used in GIF and TIFF
  • Deflation – used in PNG, MNG and TIFF

Methods for lossy compression:

  • Reducing the color space to the most common colors in the image. The selected colors are specified in the color palette in the header of the compressed image. Each pixel just references the index of a color in the color palette. This method can be combined with dithering to avoid posterization.
  • Chroma subsampling. This takes advantage of the fact that the eye perceives brightness more sharply than color, by dropping half or more of the chrominance information in the image.
  • Transform coding. This is the most commonly used method. A Fourier-related transform such as DCT or the wavelet transform are applied, followed by quantization and entropy coding.
  • Fractal compression.
Other properties

The best image quality at a given bit-rate (or compression rate) is the main goal of image compression. However, there are other important properties of image compression schemes:

Scalability generally refers to a quality reduction achieved by manipulation of the bitstream or file (without decompression and re-compression). Other names for scalability are progressive coding or embedded bitstreams. Despite its contrary nature, scalability can also be found in lossless codecs, usually in form of coarse-to-fine pixel scans. Scalability is especially useful for previewing images while downloading them (e.g. in a web browser) or for providing variable quality access to e.g. databases. There are several types of scalability:

  • Quality progressive or layer progressive: The bitstream successively refines the reconstructed image.
  • Resolution progressive: First encode a lower image resolution; then encode the difference to higher resolutions.
  • Component progressive: First encode grey; then color.

Region of interest coding. Certain parts of the image are encoded with higher quality than others. This can be combined with scalability (encode these parts first, others later).

Meta information. Compressed data can contain information about the image which can be used to categorize, search or browse images. Such information can include color and texture statistics, small preview images and author/copyright information.

Processing power. Compression algorithms require different amounts of processing power to encode and decode. Some high compression algorithms require high processing power.

The quality of a compression method is often measured by the Peak signal-to-noise ratio. It measures the amount of noise introduced through a lossy compression of the image. However, the subjective judgement of the viewer is also regarded as an important, perhaps the most important, measure.

From Wikipedia, the free encyclopedia