Researching filetypes

1. Computer files have file extensions like .html, .doc or .jpg so we know what type of information is in the file and the right type of program can be chosen to use with the file. 

2. There are hundreds of different file types but for pictures  .jpg, .png, .svg, .gif. .bmp and .tif are the most important. We will limit this to just .jpg, .png and .svg because if you understand how to use these you can do most things.

Here are three pictures, one is a .jpg, another a .gif and the other .png. Can you tell which is which?

(Hint right click!)

3. Your mission (with a friend if you like)  is to take some photographs with a digital camera and use a scanner to scan some images.

4. Your file size limit is 100k. So when you get your pictures you need to use software to process them to get the size of the file down to 100k or less.

5. There is a free web application here to do this or you can use GIMP a free desktop application or any image software already available on your computer (Why buy software when perfectly good tools exist for free?) 

6. Can you do this without losing too much picture quality? 

7. Find out important things about the following types of picture files using an internet search or searches.

.jpg .png .svg.

8. Find out why .png invented? What is the main difference between .jpg and png? Why is gif getting replaced on the internet by jpg and png?

9. To find the answers use internet searches putting things like "difference between jpg and png" into your search engine. Try using different search engines to see if one gives better results than another. Here are some to try.

Yippy
Google
Yahoo

10. Get friends to use different search engines and compare results. Make a table to present your findings. Collect some images of each type and see what they look like.

11. What is file compression? Why is it useful?

12. What is the difference between lossless compression and lossy compression?

13. Again use the internet if you are not sure.

14. This wikipedia article explains things. Look at the pictures of the dog and see how the quality of the image depends on the size of the file. This should be what you found with your camera and scanner work.

15. If you don't understand the explanation given from the first link try another, discuss with your friends until you are happy that you understand what these words mean.

16. You should know:

.jpg files can be made very compact but the more you compact them the more likely they will start to look bad. For photographs and scanned images .jpg is the best format. Use the quality ( A number between 1 and 100) to make the file smaller when saving as a .jpg. Smaller number means lower quality but a smaller file.

The picture above is a .jpg. It is only 7k and looks quite good in this small image.

This is the same file made bigger. Now it looks quite "fuzzy". To make it look good at this size, the image file would have to be about 4 times as big because this image is 4 times the area of the small one. 

17. You should also know that .png files are quite compact and they support transparency. This means the main image can be displayed on different backgrounds with different levels of transparency,  for example on a web page (some older versions of Internet Explorer don't support this but all up to date browsers will). 

This is the INGOT logo on two different coloured backgrounds. Since it is a png file its background can be made transparent so we don't just get a white ugly rectangle on whatever colour background the image is on. The .jpg image can't provide the transparent background so unless the background happens to be white it will not look very good. Make your work look good!

18. Now to find out which programs can display each of the graphics. Does your web browser program display them? How do you know? If it displays the .pngs without the transparent backgrounds it is out of date and needs upgrading!

19. You can save the files to try them in other programs by clicking the right hand mouse button and choosing save as... Make a directory for each type of picture and save some examples of each. You need to know where your files are so it is easy to find them again later.

20. Will your word processor display them? What about your spread sheet program? Can you find any other programs that will open these file types and any that won't?

Now for .svg! (scalable vector graphics)

SVG is a really cool format. Unfortunately only very up to date browsers support it so at the time of writing we can't use it directly on web pages until more people upgrade to browsers that support SVG directly.

Advantages of .svg

SVG is best suited to graphic design. Whereas jpg and png store the information about the dots or pixels that make up the image svg uses maths to store the shapes that make up the design. All the text on this page is stored in "outline fonts" in a similar way. If I store the shape of a letter I can use the same information to make an identical letter of any size by simple scaling. This is an important property of svg files. They can scaled to any size without losing quality.

Here is an example of the svg information to draw a rectangle. Here is the svg information for a simple animation using just 1.5k file size. SVG is much more versatile than png or jpg.

There are other vector formats, but most of them are owned by particular companies. SVG is free to use and is fully described. It is the international open standard so no individual company can establish a monopoly on the format and charge everyone else a lot of money to use it. There is also a free editor called Inkscape that you can download and install for free. It is easy to use and can do professional standard graphic illustration. 

Finally, you can export .png files from Inkscape so you can create your design in svg and then make an appropriate .png version from it to display on the web. This will be unnecessary if svg support continues to grow and we can use the svg graphics directly. If you want to print to paper you can print from Inkscape directly and it will give a good image. The great thing about svg is that no mater what display device is used, the image quality will remain high and the size of the file storing the image small.  There is more about svg in Wikipedia here.

OK so let's not worry too much about the details, let's learn to make svg graphics files. Here are some tutorials on You Tube. Try drawing some simple diagrams to start with. Maybe the apparatus for your science experiment or go to openclipart.org and get some drawings you can modify. Once you can write text and draw diagrams you can present most of your work in web pages.