Exporting photos for the web
If your photos are going on the web, there are several things you can do to get small files, yet decent image quality
Compression
So what is compression? Well it is what is says: a technique that packs the bits and bytes in the bytes in a file in such a manner that they take up less space. A really simple way of compressing can be described like this:Imagine a photo of a blue sky that has a lot of identical blue pixels. Each pixel in the sky is exactly the same as several of its neighbors. Let's call the color blue and look at 3 by 3 pixels:
blue blue blue
blue blue blue
blue blue blue
That's the uncompressed data of the 9 pixels square. Now let's compress it:
3*3blue
Viola! The exact same information, but much less data. Easy to unpack to the precise original pixels.
But let's say that the tiny piece of sky we're looking at is right next to some trees, which are green. Now our data may look like this:
blue blue blue
blue blue blue
blue blue green
If we were to compress this we'd have to add more details. Something like:
2*3blue
2blue green
Still less data, but not quite as compact, but it still unpacks to the same as the original.
But if we were to compress this even more, we could cut corners and pack the nine pixels as
3*3blue
Compact indeed, but we lost the green pixel and replaced it with blue. When unpacking the image, the green detail in the 9 pixels square is lost, but if the pixels next to them are green, the viewer might not notice the missing green dot. But the price is the detail loss and the appearance of rectangular artifacts, especially in places where there were smooth tonal changes in the original.
This is in essence what lossy compression does. It cuts corners and removes small variations in order to save space.
This explanation is of course extremely simple compared to what really goes on, because in real life both the principles and the compression and decompression process is way, way more complex.
Saving files for web use forces you to do some compromising.
You want small files to save bandwidth and give the users a speedy file transfer and fast loading times, but you also want your image to look good.
The thing is that these two desires fight each other for reasons I will explain below.
JPG, PNG, GIF
For the sake of simplicity I will talk about JPG here. 99.99 percent of the photos shown on the web are shown as JPG-files. There are alternatives – PNG being the one really important one, GIF another – but this is about JPG, which covers the vast majority of web photos.JPG is a lossy compression format, which means that the files are squashed together to become smaller, but in such a way that they loose quality. There are lossless compression formats too, and a JPG can also be compressed lossless, but that is rarely done.
The quality setting
The JPG quality setting you see when saving or exporting images is an expression for how aggressive the compression is going to be. The smaller the quality number, the harder the compression and the bigger the quality loss.100% means no cutting corners, but keep every pixel intact.
70-80% is usually a good compromise, which will leave most details and only have unnoticeable compression errors.
40-60% is quite aggressive, but still useful, especially for smaller images like thumbprints where the errors are invisible to most people.
0-30% means really small files, but also butt ugly results, which should not be used for anything critical or where image quality has any significance.
Saving for web
The best thing you can do is to optimize your images every time you save them to be used on the web. Of course there are systems online that do it for you, but you can do a better job.Some images can take more compression than others and it's a good idea to inspect the results in order to learn where to put on the thumb screws and where to be gentle.
Scale the image to the final web size in your favorite photo editing program. It usually does a much better job than any online process built into the web system or content management system you might use.
Most image programs have special dialogs for web saving like Export in Lightroom and Save for web in Photoshop. Here you can control the compression and file size, and once the file is saved, open it in a photo editing program and look at it in 100% and even 2-400% enlargement to see the result of the compression.
Final size
When saving for the web you should have your eyes on two aspects: image quality as already mentioned, and the file size. The aim of the compressed JPG-format is to get small file sizes in order to save time and bandwidth and give the users a good browsing experience. But being a photographer you do of course want your photos to look as nice as possible, and the quality should be representative of the best you can muster technically.So what is a good file size?
Well first of all files on the web should be measured in kilobytes and never reach megabytes in size. Unless your aim is to deliver really large (maybe original size or camera size) images, megabyte file sizes are unnecessary. Typical web images in the 500-800 pixel range should easily compress to 50-100-200 KB or so depending on the details and smaller images like 200 pixel thumbprints will typically take up 10-25 KB. I often save my images in "HD-format", which is 1920 pixels on the long side, and they typically wind up at about 200-300-400 kilobytes, which is fine for an image this fairly large size. If your images grow much larger than this, consider resaving them with lower JPG quality from the original. Never open and resave an already compressed JPG-file if you can avoid it.
At loss
Some web sites allow you to upload images in almost any size and will then scale and prepare them for web display. Most modern online editing systems such as Wordpress and Drupal does this, and can be set to treat the images with care. Others will go for really small file sizes and compress images quite a bit to save space. Facebook is one.If I set image quality to 70% and get a 150 kilobyte file, Facebook will compress it to 50 kilobytes or so with visible quality loss as a result.
Flickr is much more gentle. Original uploads are left untouched, while the smaller images that Flicr makes are gently compressed. The quality loss is barely visible.
Google+ lies somewhere in between the two.
Double loss
Because the JPGs mostly loose quality on saving, you generally do not want to open a compressed JPG-file and save it again. That will add to the quality loss and the more you load and save an JPG image the worse it gets.Keep an original, preferably in a lossless format such as Photoshop or TIFF – or even better, RAW files – and scale and save from there when you need a new copy.
You can test the effect of compression on your own image on the web site Dynamic Drive, which has an excellent tool that allows you to upload an image or submit an image URL and you will then be shown a series of different versions of that image with different compression and quality settings where you can directly see the effect on the image itself as well as the image size.