Have you ever noticed that when accessed over a mobile network, your otherwise normal images are so compressed the quality is terrible? This is because some carriers will recompress your images as they pass through their network to please customers with reduced bandwidth costs and faster browsing.
If you need a photograph with transparency, choose lossy PNG.If the image is a photograph, choose JPEG.If you require animation, choose lossy GIF.Here are some pointers to help you choose the right format: Today there are three major rasterised image formats to choose from: JPEG, PNG, and GIF. You can downsample 24-bit PNGs to 8-bit using ImageAlpha for OS X or PNGyu for Windows. Semi-transparent pixels can in fact be achieved using an 8-bit PNG and as an added bonus, offer much lower file sizes than 24-bit PNG. It's a common misconception that the only image format to provide semi-transparent pixels is 24-bit PNG. Tools Clockwise from left: JPEGmini, ImageOptim and ImageAlpha 06. Switching between the two while adjusting the scale will help you find the optimum setting. Being close will help you judge how much further you can push the value, but areas you may have been concerned about up-close may not be noticeable when viewed at a natural size. Toggle between zooming in close and viewing the image at its natural size. Every 10 points on the 0-100 quality gauge when exporting a JPEG makes a file 30-50 per cent larger, so knowing when to choose 70 instead of 80, for example, will give you bigger gains than any optimiser can. One of the most important things is to find the sweet spot between file size and quality when first exporting your image. For this problem, is an excellent service that makes that process much simpler.
Responsive images are a different story of course, but the same principle applies of not, for example, serving and scaling desktop retina images on mobile. Make sure that the actual image has the same dimensions as the area it will be displayed in.
Using a larger image and setting its dimensions with code will quickly cause your page size to explode, especially when you consider how many thumbnails many pages have on them.
Most of the time it happens when displaying a thumbnail for a larger image elsewhere. Using the wrong dimensions is a mistake that very few people make now, but is worth mentioning for completeness. The process is effortless and just how much these apps reduce image file size – without any change in their appearance whatsoever – is quite incredible. These applications require nothing more than for you to drag and drop a folder of images into the application before wandering off to make a coffee while they work their magic.
If you do nothing else I suggest in this article, please download and use either ImageOptim for OS X or FileOptimizer for Windows and Linux to batch-optimise your images. So with you now hopefully convinced, I present you with some techniques you can use to help optimise your use of images. The weight distribution of an average web page (data via Addy Osmani)