While web designers do not have any control over the visitor’s speed on the internet (or the possibility of slow speeds at the peak hours) optimizing images for web use is a crucial measure to ensure that the web pages load at a decent speed for the majority of their users. It’s always an issue of balancing quality and the size of the file.
While there are many images formats available, just a handful of them are suitable in a safe manner (compatibility or performance) to be used on the internet. The three formats most commonly used for saving photos for website use, and which we will compare these three formats are “JPEG”, “GIF” and “PNG”.
What exactly does “lossy” and “lossless” compression of images refer to?
Images can be classified into two categories: lossy and lossless.
In lossy compression images are compressed. This means that your image won’t be as good as the original image’s quality. But, if you use the right compression settings, images can appear decent on a monitor even with a tiny quantity of memory.
On the other hand lossless is the term used to describe when the image is compressed, you will get exactly the same image as the original image, with no loss in quality. However, the drawback is that the image file will typically be larger than when lossy compression is used, so it might delay loading on your page.
What is the most effective way to make images more efficient for web use?
The primary factors that decide the best way to optimize your images for web are:
The dimensions that the image will be whatever format employed the bigger an image , the larger the file size it will be and that means a higher loading times.
The amount of information needed. This is mostly based on the goals of your website and the type of technology utilized by your customers. If, for instance, the majority of your visitors are tech-savvy or live in an location where the internet infrastructure is strong, you might choose to take a more prudent approach, compared to if some of your customers have slow internet connections or are still using outdated technology. Tools like Google Analytics can give you an insight into these factors and more.
You should also consider the performance of your host If your hosting provider isn’t performing well (in this case it could be good to reach them and ask why this is happening and, if all else fails then, change your hosting company) You will have to ensure the images you upload are optimized to are loading at a reasonable speed.
The web hosting cost bandwidth for web hosting. This costs money, therefore should your site be large and is a major source of traffic you could actually cost you less money to optimize your images as best you can.
The placement of images is important. Images near on the upper part of the website are more noticeable than images in the lower areas, and you could decide to compress the less noticeable images more, as whether they are viewed or not they will all need to load on your website!
JPEG (pronounced”jay-peg”) is the largest and most popular image format on the internet. It was developed through the Joint Photographic Experts Group and its extension is.jpg.
JPEG utilizes lossy compression, but its level of compression is adjustable. It is typically best suited for complicated and “realistic” pictures, such photos that have a lot of tones that are continuous (where adjacent pixels usually are very similar in colour such as blue skies that have many hues of blue). You can fine adjust the compression level in order to achieve the ideal balance between image’s size (expressed in kilobytes, or kB) and the image’s quality. Image editors that are good will permit you to examine high-quality and pimpandhost lsh images side-by-side and fine-tune the compression of images with a slider for instance. If the compression level is too high, you’ll begin to notice artefacts, which is necessary to gradually reduce the compression until you are satisfied with the result.
The lossy compression comes with one advantage however it is a benefit for images that are photographic. JPG size is almost always smaller than PNG’s so JPEG is a good choice for the best option for balancing photo quality and size. Therefore, if you’re setting up a photo on your website, JPG is almost always the most suitable option.
When it comes to graphics, JPG is usually best avoided because artefacts can be produced in the hard edges of text or graphics that are not attractive therefore you’ll be better off using the GIF or PNG formats.
One caution to take when working using JPEG images: since the format is losty, each time you save an jpeg image, you’ll lose quality, which is why it is a good idea to keep an exact copy of the original, since what you lose after each save can’t be recovered.
GIF (Graphics Interchange Format) was created in 1987 in response to the demands of CompuServe and is an extremely popular format for web pages. The extension of GIF is.gif. It’s in fact non-lossy (unlike JPEG) but colour quality isn’t preserved due to it is an 8-bit format it only offers an option of 256 colors or less.
Due to its limitations in colour, GIF would be the best choice for photographs due to their complex nature.
However, GIF works reasonably well when using graphic images that have fewer distinct shades (simple sketches such as charts, bullets, or even website buttons).
GIF can also provide transparency however, it does not have adjustable transparency as with that of the PNG format, because it only permits one of 256 possible colours to be completely transparent. This is fine for similar or almost uniform backgrounds below.
Finally, GIF has the ability to store multiple images in one file to create animations , also known as “animated GIFs”.
But, unless you wish to utilize GIF to create transparency in your background to older versions of Internet Explorer (Internet Explorer 5 and lower) or to create animated GIFs, GIF is now obsolete because of the evolution of a new format called PNG.
The PNG format (or Portable Network Graphics, which is pronounced “ping”), is an image format with bitmaps that utilizes lossless data compression, so you don’t lose data from images. The extension of PNG is.png.
PNG was designed to replace and improve GIF because GIF is patent-protected (LZW compression, which was patented in 1985 by the Unisys company) and not for free (commercial developers that use the GIF encoders or decoding algorithms are required to pay royalty). Also in contrast to GIF, PNG is a universal format that does not come with any patent restrictions and is supported by the World Wide Web consortium (W3C).
Since it is a format that has been developed more recently, PNG compression is superior than that of GIF. PNG is an extremely flexible format. PNG format is very adaptable since it has fifteen colors (up to 64 bits true color).
The most commonly used PNG formats include PNG-24 (24 bits, ideal for large images) or PNG-8 (8 bits only), which means that there are fewer colors available. This is usually best with simple graphics and colors, like icons, logos, or buttons for menus).
As with GIF, PNG has a an animation component, which is known as MNG but when it was first developed, Flash was already so extensively used that MNG did not really take off, and therefore isn’t well advised and should be avoided.
One of the most interesting options with PNG is interlacing. This setting is best useful when using large images or with connections that are slow. With interlacing, the image will be permitted to gradually appear from top to bottom instead of waiting for images to load completely to appear suddenly.
PNG can support image attributes, that can be saved in PNG files. They can include colors, gamma values as well as textual data.
In order to ensure unquestionably high-quality photos (at the cost of file size, however) or for situations where you require to attain complete or partial transparency, PNG-24 is the best choice.