Why so fuzzy
Why so fuzzy
Since building Laazy, we have become the defacto experts on how to process images for the web, and something we get asked all the time is “Why do my images look fuzzy”, or more specifically why don’t my images look as good as the originals when I publish them.
The answer to this question gets a little technical - but bare with us, we’ll talk about pixels and how they are displayed on different screens and differnt techniques for solving this problem.
This article assumes you already know how to resize an image for the correct proportions and understand why size matters - if not we recommend you pop over and read that article first.
It happens so often that people resize and publish their images to the correct dimensions so they aren’t wasting any pixels only to find that their lovely images look blurry on certain devices (ahem Apple). So whats going on here and what can be done about it?
The problem comes down to pixel density and how many pixels the screen or device you are looking at can squeeze into a fixed area. Since the beginning of modern web browsers this number was fairly fixed as most browsers & monitors only supported a 1:1 between (native) screen resolution and how many pixels it rendered.
A pixel is a single dot of colour displayed on a screen, even a small image will have up to 500,000 of them.
Then came along Apple starting with the release of the iPhone 4s and the ‘Retina’ display, this was a fancy marketing term for ‘We can squeeze more pixels into the same space’. This means that the images that were the correct size for the space now looked fuzzy on Apple (and eventually other manufacturers) devices.
These new monitors and devices had four times as many pixels for the same space. Now with the release of even higher density pixel devices, devices from the last two years have 9 times as many pixels as the older versions.
Lets try this with an example. If you are looking at the images below with an older, non-retina device the three images will look exactly the same, if you use a recent but not new device two will look the same, but if you look at them on a newer iPhone or other modern phone or computer one will look significantly sharper and more detailed than the others.
These examples images were resized with Laazy, just ‘sayin
The Easy (but wrong) Solution
By design, the changes in pixel sizes are multiples of the width and length, so to get an image with 4 times as many pixels you just double widths and lengths of the original image, for 9 times you just need to triple them.
As we discussed in Web image mastery you should never increase the size of an image (by size we mean dimensions) you should always start with a bigger image and make it smaller.
So start with with a full size image and scale it down to either 3 or 2 the width and height of the required image - depending on how crisp you need it.
Using an image 3 times larger than the dimensions of the image position means that it will display at full ‘crispness’ on all devices. BUT there is a major drawback to using this method in that you are sending a much bigger image down to your user that they potentially won’t be able to make use of.
In case you are wondering, its unlikely they release a x4 requirement as we are reaching the limit of pixel densities that the human eye can differentiate.
The Right Solution
As some of you might have guessed by now the ‘correct’ solution to this problem is to generate multiple images and only serve up the correct image for the device that is looking at it - easier said than done.
This approach is more work but results in perfect image pixel densities and optimized file sizes, the best of both worlds. This is where Laazy comes in, we have created what we think is the perfect set of tools for resizing and processing images for the web - this of course lends itself perfectly to resizing images for specific resolutions and dimensions.
Rather than telling you all the in’s and outs of how to do it, we thought it better to do it for you.
We have created a Laazy pipeline to process an image and generate the retina images for the selected size. You can just drag and drop an image in and it check the image size is big enough to start with then will process the image into the three images at the right dimensions for displaying on different devices.
Obviously this only works for the image sizes we chose (a 4:3 640x480 image size), but fear not, hit the clone button and then it will make a copy of the pipeline so you can set it up for your image size and needs. Once its set up once, its waiting there for whenever you need to prepare an image just come back and drop the image in for processing.
The topic of how to render these multiple images to your website or app is dependant on how your product/app/website is built and what with and your level of technical expertise. This is beyond the scope of this article but when in doubt talk to your resident developer.