When to Use JPEG

Today we’ll learn about the JPEG format — where it excels, where it falls short, and when you want to use it.

JPEG is a way of making that image file smaller, which we learned is often a good thing. However, part of the way that JPEG makes the file smaller is by losing some of the sharper transitions of color or intensity. This is called “lossy compression”, which simply means that in the process of making the file smaller some information about the image is lost. The size savings can be pretty significant — that 10 MB “raw” file on my camera is about 5 MB when saved as a high quality JPEG, and goes down to less than 100 kB (about 1% of the raw file size) when I tweak a couple of settings.

When to throw away pixels and color information

When I take that 10 MB raw file and save it as a 100 kB file to send in an email, I’m losing a lot of information. However, if the person who gets the photo is just looking at it on their computer screen, they will probably never notice. This is because of pixels per inch and color depth.

One of the tweaks I made to the file when I made it smaller was to change the file from the (approximately) 3000 pixels by 2000 pixels that my camera stores to 600 pixels by 400 pixels. With that setting, the photo software takes its best guess as to what will make the picture look about the same, and throws away the rest. This is actually a good thing, because the recipient’s computer monitor probably displays 72 pixels per inch. If they tried to display the original picture at full size, they would have an image over 40″ across, which isn’t very convenient. Their email program would probably shrink the image down, losing the pixel information anyway, and it won’t make as good of a guess about image quality as my photo software will.

Color depth is another reason why we can lose information and not have it matter for the monitor. If you have an average monitor, your computer can show about 16 million different colors. Each different color can be represented inside your computer with 24 bits (a bit is a 1 or a 0). That’s a lot of colors, and is plenty for looking at my cute puppy photo on the monitor. But my camera stores about 4 trillion different colors, which needs 42 bits — almost twice as many 1’s and 0’s as the monitor uses. If we’re willing to give up the colors your monitor can’t display, we can save half the file size.

When do you want to keep the extra pixels and color information?

Picture of cute dog

Obligatory cute dog

If I’m printing the picture of my cute puppy, I want every one of those pixels. Even fairly old cheap printers can handle 300 dpi (dots per inch — like a pixel on your monitor), which means if I want an 8×10 puppy print, I need all 3000 x 2000 pixels in the original. Many printers can handle even more dpi, so even a wallet-sized photo can use all the pixels. This is why when you upload a photo to a photo-printing website they may tell you that you can’t print the larger sizes they have available — they know that you don’t have enough pixels for the picture to look good at those large sizes.

When do you want to keep the colors your monitor can’t display? If you are going to be playing with the image, say to bring out the contrast in the shadows or fix skin tones, you will get the best results if you start with the most color information. Remember, you can always save to a smaller file size after you are done.

When to use JPEG

JPEG is the workhorse of picture formats. Most of the photos you get in emails are JPEGs, as are most of the photos you see on websites. If it’s a photo and you don’t have a really strong reason to use another format, JPEG is usually a good choice.

What Image Type is Best?

Picture of cute dog

Obligatory cute dog

In the last post, we learned some reason why your computer saves images in different formats. But that doesn’t help us do anything about it. This post will be short and sweet — a table of the different file types we’ll cover in future posts, when you want to use them, and when they fall short. I’ll even give you the tl;dr version: use JPEG to send pictures of your cute dog to Aunt Sally.

File Type Strength Weakness
JPEG Photos, especially for viewing on screens Line art and high-resolution printing
GIF Images with very few colors, such as logos and line art Photos, or anything that needs more than 256 colors
PNG Images where you want transparent areas Not good at photos, not all cell phones can display these
RAW Photos where you want loads of detail, such as printing poster-sized images Files are huge, often takes special software to display
TIFF Photos with lots of detail Files are huge, fewer and fewer photo sharing sites are supporting this format

 

Photos and Your Computer: The Basics

Besides surfing the web and sending email, one of the most common reasons for people to get a computer is pictures. Whether it’s scanning old photos to share, uploading digital pictures to an online photo album, or sending your camera phone pictures to Facebook, just about everyone has some use for digital pictures. There are a lot of good photo editing software packages out there that make common adjustments to photos easy to do. But with that software often comes a bewildering choice — what format to save the end result in?

First we need to know a little bit about digital photos. Digital photos are made up of a grid of little dots called pixels. If you’ve seen a photo say that it’s 400 x 300, that means it’s 400 dots across and 300 dots high. When the dots are small enough, our eyes blend it all into one smooth picture. Each of those dots has a number associated with it that also tells the computer what color the dot is and how bright that color is. There are different ways to code the color and brightness information, but it still comes down to storing a number for that pixel.

So why do we have different formats? It all comes down to size.

Let’s say you have a 5 megapixel camera. Not very large as cameras today go. 5 megapixels is 5 million pixels. Each of those pixels has a number associated with it. My digital camera stores the color information in about 2 bytes of data per pixel, which means each picture is about 10 megabytes in its raw format. If I want to email a dozen pictures to a friend, especially a friend with a slow internet connection, they aren’t going to be very happy about the size of those photos.

What can be done? Well, a lot of pictures have relatively large patches of the same color. Your computer might notice that there are 100 pixels in a row of blue sky. So instead of storing the number for sky blue 100 times, it make a notation of the color and that it will be repeated 100 times — storing just two pieces of information instead of a hundred. This is called compression and it makes the file smaller, making everyone is happier.

Naturally, it’s not quite that easy in real life. We might think the sky is just blue, but each pixel might be just one shade of blue different from the next pixel. Now instead of saying we have 100 pixels of sky blue, your computer starts storing twice as much information as the original, because it is storing a color, saying it repeats for a single pixel, storing another color, saying that repeats for another pixel, etc.

What to do? This is where the different formats come in. Each format has strengths a weaknesses — one format may make the photo’s file size smaller, but at the cost of quality. Another format may have a special feature or two that are really useful in some situations and not others. In the next few posts we’ll go over some of the common formats, where they excel, and where they fall short. Then when you are faced with a choice of formats, you’ll be confident you’re choosing the best one for your needs.

Web 101: When Cookies Go Bad

We learned in the last post that cookies can make the web more useful and more fun. But cookies can have a darker side, too. Here we’ll learn about the seedier uses of cookies and what you can do about them.

If you already have a cookie from a website and you revisit that website, your browser only sends the information for that website’s cookie. So if you’re at Amazon, your browser only sends the Amazon cookie information and not the Ebay cookie information. There are a couple of exceptions to that rule, and this is where cookies cause problems for most people.

Lots of web sites contain advertisements. This isn’t normally a bad thing — the ads pay for the costs associated with the web site and make it possible for lots of free content to be out there for you. However, those ads are served up by a different domain than the site you’re on. If you’re visiting example.com, the ads might come from advexample.com and spamsalot.com. Both of those advertising domains can then put what are called “third-party cookies” into your browser. Later on, when you go to anotherexample.com, which also has an ad from advexample.com, that advertiser not only knows it’s you, but knows you recently visited example.com. These advertising cookies can track you across the web, and are the reason why after visiting a site selling shoes you suddenly start seeing lots of ads for shoes on other sites.

Some people really like having more targeted ads — if you have to see ads anyway, they may as well be for something you’re interested in. Other people find this tracking to be a bit creepy. If you’re in the latter group, there’s an easy fix. All the major browsers let you block any third-party cookies. (You can also use these same instructions to block all cookies.)

You probably already have a lot of tracking cookies stored in your browser. If you want to get rid of those, too, there are a couple of ways to do it. You can either go through your existing cookies one by one, or you can delete all your existing cookies. Deleting all your cookies is a lot faster than trying to figure out which ones you want and which ones you don’t, but it does mean you will need to sign in to any web sites again.

Deleting tracking cookies doesn’t stop all forms of tracking, but currently this is the most common form used. And now you have some control over the process.

Web 101: Cookies Make the Web Better

As we learned in the last post, web sites use cookies to remember who you are. Why do you want web sites to do this?

Let’s say you want to do some online shopping. You go to a web site, look at a few items, and put one into your shopping cart. If the web site couldn’t tell who you are from page to page, as soon as you click on “check out” your shopping cart would disappear. You would never be able to make a purchase, because there would be no way* to make the web site know that the person who asked for the shopping cart page is the same person who added the item to the cart.

Perhaps you are buying anything today, but you are logging in to Facebook instead. Cookies are how Facebook matches you up to the person who logged in. This lets Facebook show you your updates, and only your updates.

Cookies can also be used to make your web browsing a little faster. Some web sites will show you a different version depending on your country. Small and medium-sized websites look up your IP address’ country from a public online database, and this is a relatively slow process. (Plus, they have to pay if there are too many look ups in a day.) If the web site sets a cookie after the first look up, it can keep track of your country and show you the right version without doing any more look ups.

Cookies are also frequently used when you fill out a form on the web or request information that’s in a database. One way to do this is with a query string — if you see a ? in the URL, a query string has been used. One problem with query strings is not much information can be sent. A bigger problem is that users can guess at other query strings because they see what’s being sent. If you fill out a form and see that the URL you go to is http://www.example.com/mypage?userid=1234, there’s nothing to stop you from changing that URL to http://www.example.com/mypage?userid=1235 and accessing that user’s information. This isn’t much of a problem if the request is for a product description or a blog post, but it can cause havoc in lots of other situations. Cookies solve that problem — by using what’s called a session cookie which is stored in your browser’s memory and goes away when you close your browser, more information can be sent and it can be hidden a little better from snoopers.

So much for the good side of cookies. Next up — when cookies go bad.


* Actually, there are ways such as using a query string, matching up IP addresses, or a few other techniques. Although cookies have security issues, most of these methods are far less secure than cookies, or cause other problems for the user.

Web 101: Are Cookies Yummy?

Cookies

CC Cookie image courtesy of azmichelle on flickr

Just like real life cookies, a few cookies in your browser make life fun, but too many are a bad thing. Before we can get into what’s good, what’s bad, and what you can do to manage cookies, we need to learn a bit about what cookies are.

Let’s say you have just navigated to this page. When the web server send the text that will display this page on the screen (see Web 101: Text and the Web for more on this), the web server also sends what’s called a header for the file. The header has things like a line telling your browser that the server found the file, a line saying what kind of file is being sent, a line saying how long the file is, and a few other things your browser needs to know. If the web site wants to put a cookie on your computer, it also includes the cookie in this header. For example, the header might include the line:

Set-cookie: 1127

Your browser keeps a file of cookies that it has saved, and when it sees this in the header, it adds a line of the cookie file that has the name of the website and the id number (1127 in this case) of the cookie. There will also be some other information, like when the cookie was first set, when it should expire, and the type of cookie.

The next time you visit that website (even if it’s just clicking on another page in the website), your browser will add a line to the request for the webpage. That line will be

Cookie: 1127

The web server will then look up cookie 1127 in its database, and know that you are the same person it saw before. If you have logged in to the site in the past, it will be able to match up that cookie to your account.

Because cookies are stored by your web browser, if you visit the site again on a different computer or with a different browser (say you use Firefox instead of Chrome), the site won’t recognize you and you will get a new cookie.

In the next couple of posts we’ll learn when cookies are good for you and when they are troublesome.

(Thanks to Computer Networking: A Top-Down Approach for much of the information in this post.)

Web 101: Images on the Web

Now we know that the web is based on text, but images are what make the web a killer app. Imagine if you went to Amazon to buy something and only had a paragraph describing each item. Facebook is built on the idea that you see pictures of your friends. And Pinterest without images wouldn’t even exist. (They all rely on databases too. But that’s another post.)

How does your browser know where to get those images? Continue reading

Web 101: Text and the Web

If you’re reading this blog, you’re probably someone who uses the Web just about every day. Most people I know who have a computer at home got that computer in order to send email and surf the Web. And most of what I’m studying at school has to do with the web one way or another, whether it’s building a database that powers a website, handling networks, or even just using the web to collaborate on a project.

There is quite a bit going on behind the scenes when you go to a site like Amazon. Understanding what’s going on under the hood can help you recognize good and bad website design, decide what browser to use, know what browser settings you would like to tweek, and figure out where to start looking when something goes wrong. All without writing a single line of code.

First, we need a little bit of background that will set us up for the fun and useful stuff. Let’s dig in!

Continue reading