Images need to be prepared so that they upload quickly. Use photoshop to limit the resolution to the screen and specify the image in terms of pixels. You also need to select the appropriate image format.

Size

The resolution should be 1 to 1, pixel for pixel to the screen. The problems is that there are a number of different screen sizes and resolutions that do not make this easy.

If the picture is too small or large, the browser will up resolve or down resolve the picture to fit. It does not do as good a job as displaying the picture at 1 to 1 ratio. Make sure that you do not have a huge picture and down resolve it, as it takes too long to download, and looks worse.

Traditional sizes for iPhone are 320px by 480px to 960px in width for the computer monitor. Modern displays double that resolution, and a proliferation of mobile and tablet devices have resolutions all up and down the spectrum. Websites on monitors can easily go wider than 1300px, but rarely eclipse 1920px, the width of the majority of monitors currently in use.

Using responsive CSS techniques, you can prepare pictures for mobile and desktop versions, and switch between them to save bandwidth. This will become more clear in week 8.

File Formats

Gif Images (and PNG-8)

For graphic images that have large areas of solid color, like those produced with Illustrator, or strongly contrasting finely detailed lines like serifs in type, use gif or the license unencumbered 8 bit png. They reduce the 16 million plus computer colors to a look-up table of up to 8 bits, or 256 colors. It is possible to set transparency, but it is a 1 bit off/on transparency, and not an alpha channel that would produce a smooth transition. That means there is no antialiasing of the image, which makes the transition look pretty ugly when placed on a background unless the colors match. In the image on the right, you can see that it does not blend into the background color. The blend ends abruptly as the transparency gives way to the pink background. When the backgrounds do match, the 1 bit transparency works. This format works well to preserve type and other fine detail in the picture. Jpeg, on the other hand, tends to soften such strongly contrasting detail and adds artifacts that disrupt areas of solid color.

Gif Animations

Simple animations can be created by using Photoshop or web apps like Gif Ninja.

JPEG

Use the JPEG format (with the extension .jpeg or .jpg) for photographs. JPEG stands for Joint Photographic Experts Group. It’s the most commonly used method of lossy compression for photographic images, as photographs still look good even when they are a fraction of their original file size. Image degradation does occur when the compression is too great, so for good fidelity, use around 40%, or for high quality, like your portfolio images, use 60% compression. If there is a lot of noise or detail in the image, compression is less efficient.

With increased compression come artifacts. You may increase the compression till the artifacts become problematic. The example at the right is compressed at 10% to show off the artifacts, but even at 60% introduces significant artifacts. That is why GIF and PNG-8 are preferred over JPEG for type and other finely detailed images. Before web fonts were widely available, titles were often set as a picture to maintain a typeface. GIFs are far superior than JPEGs for that purpose, as you can see.

There is no alpha channel associated with jpegs. That makes them rectangular, which is not always desirable. You would have to match the background if you want the image boundaries with the existing background color.

PNG-24

You can have the best of both worlds by using the 24 bit png format, which should really be called a 32 bit png format, because it contains an 8 bit alpha channel. This format allows you to composite an image of any shape with perfect anti-aliasing, just like in photoshop. It renders all details perfectly, without artifacts. There is just one big price to pay. The cost of using PNG-24 is huge in terms of the file size, so be discrete in your usage of this otherwise marvelous format.

Save for Web

We all use Adobe products to prepare our images for the web. Use the save for web interface — command, option, shift S — to prepare your images, be it from Photoshop or Illustrator, and choose one of these methods. You can select the different attributes and compare the levels of compression and the quality.

Color on the Computer

Color on the computer is composed of red, green and blue channels, or RGB. Each channel is allocated 256 levels of intensity. The computer starts counting its colors at 0 for each channel. 0 represents off, or black, while 255 — and not 256, since the counting starts with 0 — is fully on. If the red, green and blue channels are at 255, or completely on, the color is white. There are over 16 million possible colors between black and white. The exact number is 256 x 256 x 256, or 16,777,216 colors.

8 Bits to a Byte

256 represents the number of possibilities stored in one byte. One byte is composed of 8 bits of information. Three channels at 8 bits each is known as 24 bit color. An additional alpha channel can be added as a mask, requiring 32bits in all to describe the color state of each pixel. Photoshop is essentially a calculator, calculating the 32 bit color for each channel with all the other channels to arrive at the 32 bit composite image of all the channels. The same compositing happens when using PNG-24 images.

Each of the eight bits per channel represents the binary state of either on or off, as that is how digital computers work. The number of different possible stares that these 8 bits of information can form is 256.

One bit is either off or on. Two bits make for four possibilities. The bits can be off off, off on, on off or off off. If you add one more bit, you double the number of states because you get the same four possibilities twice. The first four with the third bit off and the next four with the third bit on. This continues, doubling each time another bit is added, till 8 bits creates 256 possible states.

Base 16, or Hexadecimal Numbers

This color is 182 red, 161 green and 134 blue. In web development, this color is often described, not in base 10, but using hexadecimal, like this: #b6a186 .

That is because programers divide the byte (8 bits) into two nibbles (4 bits each, or 16 possibilities) which corresponds into two hexadecimal numbers. Hexadecimal is a short hand way to write binary numbers and that make life easier for programers. See table of nibbles.

Hexadecimal is base 16. It is as if we have 8 fingers on each hand, or 16 fingers all together. We count that 0 1 2 3 4 5 6 7 8 9 a b c d e f. That is 16 digits all together. Two hexadecimal numbers express a channel’s color: 16 x 16 = 256. Six hexadecimal characters can express any of the 16 million plus possible colors. For example, the hexadecimal b6 is the same as the base ten number 182 .

If the hexadecimal units are the same in each of the three channels, as in red: #ff0000 , it can be shortened to #f00 . When all the channels are the same value, #888, the colors cancel each other out, and all that is expressed is the brightness value. #444 is dark grey while #bbb is light gray.

Color Names

You can use names instead of code. The name silver is a light grey. The actual code for silver is #c0c0c0 and it has an RGB value of 192 for each channel. Common color names are red, orange, yellow, green, cyan, blue, purple and pink. A complete list of all the colors can be found in the color demo

Here are the names of the colors, with their Hexadecimal and decimal numbers:

Change the Color of the Background

Hue Saturation and Brightness (HSB)

1. red is 0°
2. yellow is 60°
3. green is 120°
4. cyan is 180°
5. blue is 240°
6. magenta is 300°

The first specification to be widely implemented, CSS3 color, includes opacity and the hue, saturation and luminance (HSL) color space.

HSL takes three values: Hue is a degree on the color wheel from 0 to 360, where 0 is red, 180 is green and 240 is blue and 360 is red again. So is 720, or any other multiple of 360 — the colors repeat.

Saturation is a percentage value: 100% is full saturation and 0% is no saturation. Saturation works in conjunction with luminance.

Luminance is also a percentage; 0% is dark (black), 100% is light (white), and 50% allows for full chroma before it is made lighter or darker. The table on the right gives percentages of grey translated from hexadecimal, or base 16, with middle grey being #808080.

Connecting up the color with the degree is the least intuitive part of this more intuitive way to think about color, but it is preferred over the RGB method of specifying a color. With HSLa it is easy to increase the saturation or luminance for a particular hue, something that is not at all intuitive using RGB.

Opacity

CSS3 also added the alpha property transparency, or opacity, or alpha, which can be combined with color to change RGB to RGBA and HSL to HSLA. The value range is from 0 to 1, with 0 being transparent and 1 being opaque. That makes .5 half way transparent. color: hsla(0,50%,50%,.5 You can make any element transparent by using the opacity property.

To help you see the relation between the HLS and opacity, change the numbers in this demo. I’m sure you have a favorite color or color combination. Try changing some of these colors to your favorite colors:

Pick a Color: HSLa Generator

Mother-effing hsl() by Paul Irish