Formatting Illustrations (Production Guide)
Illustrations – figures – are placed in the article after the paragraph where they are mentioned.
The goal is to provide clear, readable images at the smallest file size, to keep the download time for each article light.
Size the image to the largest display size. WordPress and the responsive code will adjust the display size for smaller screens.
- Article illustration: No more than 610px wide. Smaller for tall images, or images that would have to be scaled up to the full column width.
- Article “featured image” thumbnail for the contents page: 145px x 105px
Pay attention to the resolution, so we have the smallest possible file size, with good display quality. This is important for access on mobile devices, slow connections, and outside the US
Save illustrations as .JPG, .PNG, or .GIF to get the best quality at the smallest file size. In general:
- Use JPG for photographs
- Use PNG or GIF for diagrams or screen images
Name the files with the issue number, the (first) author last name, and a sequential number:
For example: 13-1-lastname#
- This makes it possible to easily figure out where an illustration is used in the magazine.
Figure numbers or not?
Yes. The current UX Magazine style includes figure numbers used as a reference in the text and as the first word in the caption.
- They are helpful in tying the illustration to the text meaningfully.
- They are helpful for screen readers or anyone searching for the illustration mentioned in the text.
Captions and alt text
Figures in the article must have a caption for the formatting to work correctly, and must have alt text for accessibility
Captions are part of the visible article text and provided in the manuscript.
- Start with “Figure #.”
- Include any image credits in the caption, following the rest of the caption text
- Insert images from each article, so they are correctly “attached” to the article. This makes it much easier to find and handle the media files.
- Check the file size once it has been uploaded and be sure that you have inserted the correct size. Check the filename and make sure it is in the correct format.
- Remove the “title” from the image, so that it does not appear in the image tag. (This is a good practice to prevent garbage or repetitive information)
- Set Alignment to None; Link URL to None; Size to Full Size – usually