Editing Image Attributes
- choose a different image file (using the ∞ button to the right of the “src” field)
- open the referenced image file in another application (using the → button to the right of the link button)
- make and use a resampled copy of the original source image (typically downsampled, for appropriate display size and faster downloading)
- save a copy of the original image to a different file format (.jpg or .png)
When you work with
<img> element using the attribute editor, TypeMetal also tries to help you choose an appropriate display size for the image, by automatically inferring appropriate “width” and “height” attributes for the
<img> when it can.
If you use the convention of naming Retina-resolution image files with an “@2x” filename suffix — for example, “email@example.com” — TypeMetal takes a hint from the “@2x” suffix and sets “width” and “height” to half the image’s pixel dimensions. This causes the
<img> to render at the same apparent size on Retina- and non-Retina displays.
Specifying a “width” and “height” for an
<img> is optional, but usually recommended. Knowing these values up front enables a Web browser to set aside appropriate layout space for an image, before the referenced image file has even been downloaded. Keeping
<img> elements’ width and height attributes up to date is tedious to do by hand. TypeMetal strives to make life easier by computing them for you automatically.
An Example: Downsampling a Large Image
Suppose you’ve created an
<img> element that references a large image (perhaps a full-size original .jpg file from your digital camera). You want the image to be shown at a reasonable size on your page, and you also want a smaller image file that takes less time for browsers to fetch. TypeMetal makes this common task easy.
In the attribute editor for the
<img>, you’d click the “Resample to” check box to indicate that you want to resize the image to a different number of pixels. Since this requires creating a new image file, and switching the
<img> element to point to it, TypeMetal changes the “Reference at its original location” setting above to “Copy to”.
You’d then type a number in the “Width” field to the right of “Resample to” — perhaps 400, to indicate you want the new copy to be 400 pixels wide. TypeMetal computes a corresponding “Height” that preserves the proportions (aspect ratio) of the image.
Next, tell TypeMetal where you’d like to save the new image file. The easiest way to do this is to click the (∞) button at the right edge, opposite “Copy to”. TypeMetal then prompts you to choose a destination folder and file name using a standard “save” panel.
Finally, choose the image file format you want using the “Save as” popup button. If you chose JPEG, use the “JPEG Quality” slider to specify the amount of lossy compression to apply. The status field below the slider tells you what the size of the resultant image file will be.
When you’re happy with your selections, click the “Commit” button to create the resampled image file, and to rewire the
<img>’s “src” attribute to point to it.
If you change your mind and want to cancel, click “Revert”, or simply close the attribute editor. You can also Undo (Command+Z) after you’ve clicked “Commit”, although TypeMetal can only Undo the attribute changes to the
<img>; the Undo won’t undo creation of the resampled image file, or any other file operations that the
<img> attribute editor performs.