Web Files

image.jpg

Joint Photographic Experts Group (JPEG or JPG)

The JPEG is the most-utilized image format in digital publishing. JPEGs can be compressed to low-, medium, and high-quality and, because of this, can showcase images on screens at relatively small file sizes without sacrificing the integrity of the image. File types like JPG, PNG, and GIF are “rastered” and have defined dimensions. This means the image will lose quality when resized, and should not be manipulated beyond its original dimensions (width and height).

Pros and Cons of Use:

• Good for photographs, artwork, or other detailed images.
• When the image has many colors.
• Medium to small file size.
• Rastered file.

image.png

Portable Network Graphics (PNG)

PNGs allow for transparency, an important tool in graphic and web design. Unlike JPGs, there is no compression with PNGs; these files will not lose quality when saved. However, this means PNGs are a rather large file type, and should be used sparingly or on small images.

Pros and Cons of Use:

• Good for graphics like logos and icons.
• When the image has areas of full- or partial-transparency (like drop shadows).
• Large file size.
• Rastered file.

image.gif

Graphics Interchange Format (GIF)

Similar to PNGs, GIFs have certain properties that allow for image effects. This format is most-often attributed to animated files, as it allows for several consecutive frames to be included in a single image file. Due to this, GIFs can be quite large, and may require heavy compression to be feasible in site design.

Pros and Cons of Use:

• Required for animated images.
• Good for simple icons with low-color density (few colors).
• Large file size.
• Rastered file.

image.svg

Scalable Vector Graphics (SVG)

SVGs are an integral component of web design. SVGs, as stated in their name, are scaleable and can be manipulated and styled without sacrificing quality or file size. SVGs are, in effect, “drawn” by the browser in that they are actually packets of coordinates written in a markup language (XML, or Extensible Markup Language). This code is editable, and SVGs can have colors, effects, and animations applied to them.

Pros and Cons of Use:

• Good for vector graphics like logos and icons.
• Resolution-independent.
• Manipulating does not change file size.
• Not good for detailed images, or beyond 2D needs.
• Requires an understanding on how to properly use and implement the code.

file.mp3

MPEG-1 Audio Layer 3 (MP3)

MP3 technology has been around for decades, and revolutionized how music was stored and shared during the 1990's. MP3s offer an accessible ratio of playback quality to file size, although it is still subject to patents, meaning users must have MP3-ready software in order to play the file.

Pros and Cons of Use:

• Small file size.
• Widely-used; standard practice.
• Proprietary; browsers must pay to support this file type.

file.ogg

Ogg Vorbis (OGG)

An OGG file is even more compressed than an MP3, but not necessarily at any lower quality. This compression is at a varying bit rate, meaning moments of silence, for example, will have less storage weight than those in an MP3, as MP3s compress at a constant bit rate. The OGG is open-source and free-to-all.

Pros and Cons of Use:

• Good for internet streaming.
• In the public domain, free-for-use.
• Limited official development.
• Not as widely recognized as other audio formats.

file.mp4

MPEG-4 Part 14 (MP4)

Like MP3, MP4 is a granddaddy file type with a rich history. A multimedia container used to store video and audio, MP4 supports a variety of video coding formats, like H.264. MP4s are usable on most devices, platforms, and browsers.

Pros and Cons of Use:

• Good video quality.
• Widely-used; standard practice.
• Online MP4 files requires pre-buffering.
• Proprietary; browsers must pay to support this file type.

file.webm

Web Media (WebM)

A relatively new format, WebM is a container created especially for internet streaming by Google as a standard supported format in HTML5. It is less high-quality than MP4, but this allows for quicker access and download speeds. Unlike MP4, WebM is open-source and free-to-all.

Pros and Cons of Use:

• Designed for internet streaming.
• Open-source, free-for-use.
• Poor compatibility with mobile devices and players.
• Not widely supported by Windows or Apple.

script.js

JavaScript (JS)

JavaScript is the third leg of the Web-Dev triad, along with HTML and CSS. These three languages work exceptionally well together to provide structured, styled, and interactive sites. JavaScript is ubiquitous; anytime you open up a page that does more than offer static information like animations or timely updates, JavaScript is most-likely the culprit.

Pros and Cons of Use:

• Easy-to-learn, free or low-cost.
• Incredibly popular; wide-usage with community knowledgebase.
• Versatile. Basic JS can be used inline in HTML, and developing entire applications.
• Because the code executes on the client's computer, it can be a security risk.
• Interpreted differently across browsers; requires testing.

script.cgi

Common Gateway Interface (CGI)

Another way to add dynamic content to a site is through a CGI. CGI programs (or scripts) are the most common way for web servers to interact with users. These files are good for processing data sets, for example, like those used in forms and counters. CGIs can be made using many programming languages like Python, PERL, or Java.

Pros and Cons of Use:

• Work on a variety of servers.
• Can be written in nearly any language.
• Provides simple interfaces for the clients to interact with the web servers.
• Can be memory-intensive, especially on sites with high-level traffic.
• Creation is not entry-level; can require extensive programming knowledge to be effective.