Saving images for the web

Posted: February 1, 2013 in Uncategorized
Tags:

Quick Guide to Posting Pictures Online.

1) The J-PEG Format (Joint Picture Experts Group)
Most of the time you will be using JPG files, as this is the format best suited for saving High-colour images in a small file-size.
⭐ JPEG files are designed for convenience rather than quality.

2) "Are Mega Pixels better than normal ones?"
Modern Digital cameras and phones, can take very large photos.
⭐ Mega =1 Million, and Pixel = Picture-Element

Oh, so they are not "special" ?
No they just get smaller, the more of them you have to fit in a "square-inch".

⭐ Your computer screen for example is likely to be set to a resolution of 1024×768 (786,432 pixels) or 1280×1024 (1.3 Megapixels).

Large images are usually shrunk in a viewer so you can quickly see the whole thing, as these days they are often larger than a computer monitor can achieve.
A web-site will either display it at its own choice of size, or full-size at 100%

Printable size
A 12 Megapixel camera will create an image about 4000 pixels wide, by 3000 pixels high.
In real-money, that means if you print that at 100% scale, it will be about 106 by 80 cm (or in old-money 41.7 by 31.3 inches)
⭐ 1280×960 (1.23 MegaPixels) at 100% is 45.2 x 33.9 cm (17.8 x 13.3 inches)

File size Vs Quality
Most cameras have a "Quality" setting for saving the photos. Usually "Low", "Medium" and "High".
Computer software allows you to choose the quality as a percentage out of 100.
The "High" setting in a camera usually equates to somewhere between 95 and 98%
⭐ A 12 MegaPixel camera will create a file of 5 to 6MB (MegaBytes) in disc size.

3) Limits of the limitless internet.
Many sites have restrictions on the file-size or dimensions of pictures, to discourage people from slowing the site.
⭐ Most web-sites are designed for fitting in a width of 1024 pixels.

When posting a picture it is useful to prepare a COPY for upload.
Or save the changed version of your image with a new name, or in a new folder (afterwards you can delete these temporary files if you have no other use for them).

I usually crop and resize/scale my images for most sites, down to 640×480, 800×600 or 1024×768, so that I know it will fit nicely (most software offers these sizes as preset/defaults).
When I am adding photos to my personal online photo-albums, I mostly just scale them down by 50% so people can still get a good look at a big version.

⭐ Reducing the dimensions of the picture is a better way to reduce the file-size, rather than dropping the quality.
There is normally no need to drop the quality below 95%

4) The best thing since the internet, is "Sliced-Internet"
What is "Progressive", and why does it Rock?
JPG has another common option (not available in cameras), called "Progressive".
The forward-thinking …progressive types at the J.P.E.G. realised that as the internet …progressed, it became …progressively more graphics intensive, with most pages loading many pictures at the same time.

The next …progression of JPG was to make it "Progressively" display the image a few slices at a time, as it is actually being down-loaded in a browser or opened in a viewer.
Normally you have to wait until the whole thing has arrived before it opens.

Even though the internet gets faster, it is always worth using "Progressive" mode to store your online pictures, no matter how small.
Not everyone has internet as fast as you.

5) Useful (Easy) software
Some useful software includes an option or plugin, that makes saving for the web easy, and takes any guess-work away.

The free program Irfanview has a file option "Save for Web".
This plugin will notice if you are trying to save a huge image (over 3 MegaPixels), and offer to resize the picture before you continue.
You are then presented with a "Before and After" window, above which shows the predicted file-size.
Any changes you make will be visible on the "After" side, and the predicted file-size is shown above.

⭐ I usually aim to keep the file-size about 500 KB to 1.5 MB (1500 KB) depending on size.

DOWNLOAD THIS GUIDE
https://files.myopera.com/dr-flay/files/Jpeg.rtf
https://files.myopera.com/dr-flay/files/Jpeg.pdf

Info on the RIOT (Save for Web) plugin can be found on their home-page.
http://luci.criosweb.ro/riot/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s