TypeMetal

Editing Image Attributes

TypeMetal 2.1.2 features a modernized <img> attribute editor that helps you build content for today’s variable-resolution world. The updated editor helps you ensure that each image has appropriate resolution for its presentation size at a variety of possible scale factors, and enables you to provide alternate representations using HTML 5’s new srcset attribute.

In a WordPress Post or Page

Since WordPress handles providing resolution-appropriate variants of an image for you, TypeMetal presents a simplified inspector for <img> elements in a WordPress post or page. You simply choose the image you want, and let WordPress worry about the rest.

In a Standalone HTML File

When you’re editing a standalone HTML file, the attribute editor for an <img> element shows a row of “Image Resolution” indicators. These indicator buttons help you assess the adequacy of the referenced image files for the <img>’s presentation size at various possible display resolutions. They also offer actions you can take to modify the <img> as desired.

Image Resolution Indicator Buttons, in the Attribute Editor for an <img>
Image Resolution Indicator Buttons, in the Attribute Editor for an <img>

Each of the four indicators represents a display resolution that your content might be viewed on:

The indicator buttons are color-coded to help you check your image’s resolution status at a glance:

Each of these resolution indicator buttons presents a context menu when clicked. The button’s context menu offers a list of actions you might want to take, based on the state of the <img> for that particular display scale factor:

These actions provide convenient ways to automatically edit the <img>’s width, height, and srcset attributes. You can also add, edit, and remove those attributes directly, just as you would any others.

Editing srcset

The srcset property lists the additional representations that have been provided for the <img>, as alternatives to the fallback image specified by src. You can use the “+” and “-” buttons beside the srcset editor’s table view to add and remove representations from the srcset list, or you can edit the text of the srcset attribute directly. If you name your image files with scale-factor-indicating suffixes such as “@2x” or “-2x”, TypeMetal may be able to infer the appropriate scale factor for an added image file automatically. If this doesn’t work, or if you want to use width-based qualifiers such as “800w” instead of scale factor qualifiers such as “2x”, you can enter those directly in the table rows or in the srcset field.

In addition to presenting the relative URLs and resolution descriptors expressed in the srcset attribute, the image candidate list helpfully shows the pixel dimensions and sizes of the referenced image files.

The Attribute Editor for an <img> Element That Specifies 2x and 1x Variants
The Attribute Editor for an <img> Element That Specifies 2x and 1x Variants

Editing src

An <img>’s src attribute provides the fallback representation to use in browsers that don’t understand srcset, and can also be used alone without srcset in simple enough use cases. If you have an image suitable for display at 2x resolution, for example, and don’t want to bother providing a lower-resolution 1x copy of the image, you can simply specify the 2x file as the <img>’s src and be done with it. Use of srcset is optional.

The editor for the src attribute shows the attribute’s value in an editable text field, accompanied by some additional controls and file information, as pictured above.

The text below the src field indicates the image file’s pixel dimensions and size, if the file exists and can be read.

The buttons to the right of the src field make it easy to:

Editing width and height

Specifying an <img>’s desired presentation size via “width” and “height” attributes is optional, but is usually recommended. It’s important to do for images of 2x and greater resolution if you don’t use CSS syling to establish the presentation size of each <img>, since Web browsers ignore image file DPI metadata and instead default to using an image file’s pixel dimensions as its presentation size. Knowing these values up front also enables a Web browser to set aside appropriate layout space for an image before the image file to be used has even been downloaded.

You can specify an <img>’s width and height explicitly, or you can use the “Change presentation size to suit Nx image” resolution indicator button command described above to have TypeMetal choose appropriate values automatically.