fileTypes

File types and asset management for web graphics

In a world of this enormity, the multimedia artist needs tools and strategies for managing files and file types, in addition to making informed decisions about using them. Fortunately, web standards and the current state of the browser art helps define our choices.

This title is primarily a reference — but with a little mini-exercise thrown in. We’ll use a program called Adobe Bridge, which is now free to use without an Adobe subscription. This will help primarily with managing web graphic assets, defined here as images, both static and animated. The management of other kinds of assets — video, audio, HTML — will be covered in other exercises.

Graphic file types

In the tables below we review the graphic file types that are in use on the web. Each has a place in the ecosystem and are recommended by the W3C. This is by no means an exhaustive list of file types that support graphics. We don’t list file types that cannot be readily processed in a browser: PDF, EPS, TIFF, PSD and more are graphic files that are appropriate for file sharing, content editing, or other non-web purposes.

You may click on each image below to open each in new browser window at full scale. Look for differences such as scaling, transparency, anti-aliasing at edges, and so forth.

Photographs

JPEG and WebP are excellent choices for photographs, which do quite well with lossy compression. JPEG is one of the oldest graphic file types and is therefore more compatible, but WebP offers better compression. To maximize quality and minimize download time, consider providing both using a coding fallback trick, with WebP as the first choice and JPEG as the second. If wide compatibility is the goal, JPEG still remains the safest choice.

Icons, line art, and flat graphics

For small images like icons, use a lossless format. Lossless WebP is ideal for this purpose, but PNG is a more compatible choice (unless you use the fallback trick). If the icon can be created with vector graphics, use the highly scalable SVG. An icon created with indexed compression can use the time-honored GIF file type. PNG also offers an indexed compression known as PNG-8.

Larger line art, diagrams, and flat graphics work superbly with these file types. SVG is optimal, otherwise use PNG.

All of these support transparency. PNG can easily handle pixel opacity at edges for anti-aliasing purposes. SVG is scalable and needs no anti-aliasing. GIF can only create a 100% or 0% pixel opacity, so unsightly jagged edges are often unavoidable.

Screen-captures

You’ll find a lot of screen-captures in tutorial publications like this wiki. There is often high detail and text in screen-caps, and this can become quite fuzzy using a lossy compression like JPEG. So PNG is the solid choice here. However, WEBP can offer detail with better compression if performance is the goal.

AVIF: the new kid on the block

Introduced in 2019, AVIF promises to be an incredible game-changer for image content. It features animation, transparency with anti-aliasing, extremely high compression without loss of image quality… kind of the Holy Grail of all desired attributes in one file type! Use it with the fallback trick to avoid evolving compatibility limitations that will eventually iron themselves out in the coming years.

Dynamic and interactive graphics and other multi-media file types

The HTML5 Canvas environment supports animated and interactive graphics in an HTML5/CSS3/JS context, and will be covered extensively in an upcoming project. So there’s really not an intrinsically interactive file type: all the files listed above can be made interactive through code. But there used to be one…

Why is SWF, the old Flash file type, not included in this list? Adobe declared an end of life to Flash as of December 2020, an occurrence we discuss in a future project. We no longer teach SWF creation as an obsolete skill set. However, we do still love to play the old Flash helicopter game, so here’s an HTML5 version. If you want the actual SWF experience, it’s still possible: install the Ruffle Flash player emulator on your browser and visit an old SWF embed like this one.

Our alphabet project will not be using file types relating to video, audio, 3D, virtual reality, or augmented reality. However, we will explore these in other projects.

File type conversion

In the Adobe ecosystem, Illustrator and Photoshop are the principle image creation tools, while the vector-based Inkscape and raster-based Gimp are good open-source alternatives.

A vector program can easily generate SVG files, and can also export vector art to raster file types like JPG or PNG. Photoshop can not only handle those, but can also generate WEBP and GIF.

To create vector art from a raster file is a little less straightforward. Embed a raster image in Illustrator, then use the Image Trace function to generate a tracing of the raster image. Expand the tracing, and you’ve created vector imagery. This can be saved as an SVG. This works better for relatively flat graphics than it does for photography. Photos can be embedded in an SVG but this is not a light-weight solution and should be avoided. Use an HTML5 Canvas structure if you want to combine raster and vector elements.

In some instances, graphic software has not kept up with file type development. For example, Photoshop easily creates an animated GIF, but an animated WEBP is another story. And Photoshop does not natively support AVIF, though there is a plug-in you can download and install.

The browser-based application space is actually a bit more nimble when it comes to keeping up with file conversion. A search using keywords like “webp to png conversion” will yield a dozen sites that cater to a specific conversion type. But my favorite website in the world (besides newMediaWiki, of course!) is EZGif.com. All of the file type samples above were converted from an original SVG artwork into JPG, WEBP, PNG, GIF, and AVIF file types at EZGif, all done effortlessly in their intuitive interface in less than a half hour — and that includes the animated WEBP, PNG, GIF, and AVIF as well!

Organizing files in Bridge

Download the .zip file

We use a set of 12 images in a folder for this exercise. Download the .zip file at the top of this page to use it. Once you unzip the folder, called textures, place it on your Desktop.

Locating files

Launch Adobe Bridge by clicking on its icon in the Dock or by double-clicking on the application from Macintosh Hard Drive > Applications > Adobe > Adobe Bridge(folder) > Adobe Bridge(application).

Choose Essentials from the Application bar or choose Window > Workspace > Essentials to view Bridge in Essentials mode. The first thing to do is locate your files. Expand the Desktop folder inside the Folders panel on the left side of Bridge by clicking on the arrow to the left of the folder icon. Inside the Desktop folder, the textures folder is visible. Double-click this folder and its contents are viewable in the Content panel at the center of the Bridge interface.

File path

Notice the file path to this folder towards the top left side of Bridge, located in the Path Bar. If you don’t see this, choose Window > Path Bar to hide it, then choose Window > Path Bar to show it again. In our sample, the path is Computer > Macintosh HD > Users > wrc11 > Desktop > textures.

Change the size of the thumbnail view of your images by using the slider beneath the Content panel towards the right of the interface. Notice the scale of your thumbnails magnifies as you drag the slider to the right and reduces when you drag the slider to the left. 

Preview and Metadata

Sorting files

Batch renaming

Renaming files is easy in the Finder or on the Desktop, but renaming a whole folder of, say, 100 files is a dreadful chore. This job is a breeze in Bridge.

Select all of the files in the texture folder in Bridge by pressing the key command Command+A or by clicking one time on the first thumbnail image, then holding the Shift key while clicking one time on the last thumbnail image. While files are selected, locate the Refine icon at upper left and choose Batch Rename from the dropout menu.

The text value will always remain the same, so it is important to use a name that is important to the group of files. For this, we simply used neworleans-texture as the name since all the files in are images of textures taken in New Orleans. Observe the results after hitting Rename:

If you go to the folder window on the Desktop, you’ll see the renamed files!

Repairing archived file names

In a work environment, it’s common to generate rich filenames so that one can easily archive images and know what their contents are without having to open them. Many situations in web design or animation, require you to work with large groups of files. Including such information as a date, a project name, and an author or team name is useful. In our courses, we recommend a minimum naming rubric like so…

20XX_your-name_project-name_YY.ext

…where XX is the year and YY is the number of a file in a sequence. The underscores and dashes replace spaces and should be included in any text field. Good web design praxis also includes avoiding capitals (or using camelBack case), special characters (anything that’s not a letter, a number, or a _ or –).

If you’ve been lax with good file naming conventions (and everyone has a tendency to be, including me!), take some time with Bridge to clean up your archive by batch-renaming any files that aren’t externally referenced by name (examples: a group of images in an InDesign project folder, or a web directory with images referenced in code). What would have taken a day might take an hour or less with Bridge.

Remember: no one searching for an archived file ever regretted a batch-renaming session!