Files on the Web

How Does the Present-Day Web Work?

URL structure

DNS and Domain Names

How a URL is shown

URL Structure


How DNS Works

When we type in a URL, we're really trying to reach a file on a server, i.e. a computer on a network

Computers on networks are identified by IP address

People aren't going to remember, with ports and logins, but they can remember

There's a whole DNS lookup process and I think it's really well explained in How DNS Works

How a URL is shown

Most basic version: the URL points to a file, which then shows

More complicated version: the URL acts as a query that tells a separate file what content to show. Often done with databases, but sometimes

We'll talk about what these files actually are next week!

Why Does File Type Matter?

Important to scope your project

Choices you make matter to your users

Do you even need another file?

Ultimate Question

What tools will you need to implement a given design?

Text Filetypes

HTML - The single key filetype of the web

HTML is often generated programmatically by PHP

PHP: Hypertext Preprocessor

Increasingly, HTML created by Javascript


In typical format, it's a way to showcase interaction on web

JavaScript parses the "DOM" - Document Object Model

Now, you can build whole apps just in JavaScript, but we're going to stick with traditional implemetations.

Styling with CSS

The critical thing with creating websites is that it's all just text.

Just a text file on a server, when linked from an HTML file, changes how the HTML is styled on the page


The most common form of non-text media on the web

BMP - The Origin

The most basic image on computers in general

Completely uncompressed file

Every pixel represented by 3 bytes representing Red, Green, Blue

Just not really used on the web, but acts as sort of the base of all image files

ICO - The One-Use Pony

Created by Microsoft for Windows 1.0

Package file of BMPs or (later) PNGs

Only place it's really used is in Favicons

Largely replaced by individual PNGs

GIF - The Original Web Image

Created by Compuserve for images on their network

First major compressed image format

Uses lossless compression with LZW, which looks for similar patterns in the file and simplifies those patterns to repeated strings.

Really great explanation on Wikipedia of compression encoding

Benefits & Drawbacks of GIF

Biggest drawback is color depth: can only support 256 colors in image

Supports animation, with each frame being a whole image

Supports transparent pixels.

What's GIF good for?

Well, not much anymore, but

JPEG - The Backbone of Web Images

Big innovation: lossy compression, so much smaller filesizes

Uses Discrete Cosine Transform, which translates the pixels to cosine waves to model pixel values.

This is used in MP3s and MP4s as well!

Compression in Action

An JPEG image of a cat with the compression of the image decreasing from left to right, showing increasing fidelity of the image.
Showing increasing image quality with reduced compression (source)

What is JPEG good for?

If it's an image on the web, you should start with JPEG and determine other filetype from there

PNG - Transparency & Quality

PNGs actually a pretty old file format

Original problem was that Windows and IE didn't support well until IE9!

Lossless compression, using 2 methods. The first is similar to GIFs, and the second is similar to ZIPs

Why Use PNG Over GIF?

Transparency is better than GIF: supports an "alpha channel" which allows for opacity on a scale

More color options than GIF: up to 24-bit colors

Why Use PNG Over JPEG?

Because lossless compression, higher quality than JPEG

A comparison of JPEG and PNG compression on simplate images. JPEG, on the left, has lots of artifacting because of lossy compression. PNG on the right doesn't.
The lossy compression of JPEGs makes simple lines and solid color fields much less clear than in PNG

What is PNG Good For?

SVG - Vectors! And XML!

SVG is radically different than other images because it's a vector format and can be inlined into the HTML in a human-readable way

Vector format means that it isn't like BMP in that it doesn't use individual pixels to define image.

XML is very similar to HTML, but takes any kind of tag instead of just HTML tags, so can describe anything

Because it's in the DOM, it's editable with JavaScript

SVG Example

SVG Example from Wikipedia (source)

What is SVG Good For?

WebP - Google's Modern Format

Intended to replace both PNG and JPEG

Uses multiple compression formats at once, both lossy and lossless

Typically roughly 10% smaller than the same PNG or JPEG

What's WebP Good For?

Rich Media: Video & Audio

Way fewer options in both, in part because of non-web compatibility

Used to use plugins for rich media, like Flash, but now native to HTML


2 choices: MPEG-4 & WebM

MPEG-4 is basically a string of JPEGs put together.

WebM is basically the video version of WebP.


3 choices: MP3 & WAV & OGG

MP3s use the same lossy compression algorithm as JPEGs to make files significantly smaller. However, it does make audiophiles cry.

WAVs are uncompressed audio files. These can be really large for any meaningful length of audio, but they're going to sound the best.

OGG is an alternative lossy compression filetype for audio. The big difference is that it's an open-source filetype.