JPG (Joint Photographic Experts Group) uses lossy compression and does not maintain original data during compression. This format is most commonly used for images, photography, and anything with a lot of color.
Web ready graphics are images that have been produced for the expressed purpose of being used in a web-based setting. These images differ from images made for print, or traditional graphic design in a few ways. Click through the tabs below to see the multiple components of what makes an image web ready and how these concepts apply to the work we produce.
Acceptable file types for web ready images are JPG, PNG & SVG and each have their own purpose.
PNG (Portable Network Graphic) is a lossless format - meaning it does not lose any data when compressed. There are two types of PNGs - PNG-8 & PNG-24.
- PNG-8 uses a more limited color palette with just 256 colors, has somewhat better transparency and exports at a small size.
- PNG-24 uses an unlimited color palette, maintains transparency but exports at a larger size.
SVG (Scalable Vector Graphic) is also a lossless format. This format is highly compressible and lightweight and allows for still or animated images.
Zoom in on the map to view more detail.
SVG images are typically used with maps or large scale images that require lots of detail. The preferred file formats are JPG and PNG. JPG for photographs, and PNG for any vector images.
Typically, images that are web-ready have little to no additional margins or padding around the outside of the image. These components are added in development, using CSS. When there is excess margin space in an image, it causes a disconnect in the flow of the content and, often, makes the image appear smaller than it should be.
Do
Don't
The exception to this is when scale needs to be represented.
For example: We have an image request for two farm animals, that will appear side by side, in the same interactive that is asking students “Which one is bigger?”
Though the image size can be adjusted in the code, to scale display height, it's much cleaner for this size difference to be depicted in the graphic design work, for the sake of consistency.
We will discuss recommended image sizing and orientation later in this resource.
Retina Display is the name for the high-resolution screen technology used on various models of the phone, tablets, and computers. This means that images need to be produced in at least double their display size to render properly on a Retina Display screen, due to pixel density. Pixel density is measured in pixels per inch (PPI) and is how many pixels are present in one square inch of screen. The greater the density, the smoother the images.
Do
Don't
In production, this image would be set to display at 200px. The image on the left was created at 600px and the image on the right at 200px. You can see that the image saved larger than the intended display sized is cleaner and crisper. The image created at display size would display pixelated on a retina display screen.
For demonstration purposed, these images are being displayed slightly larger than they would be used, to see the difference in image quality. (250px-400px to account for responsiveness.)
Except for some SVG files, images are generally not accessible to screen readers and should only contain text when necessary. Images of charts, tables or phrases should be produces as an HTML entity, and not in an image, if the image is being used as a learning aid in the course content.
There are occasions where text is needed in an image, for example: labeling a plot line. When adding readable elements to an image, keep the following in mind:
- Readability- When text is needed in an image, it needs to be readable at the image display size. For instance, labels on a graph that is being produced at 1600px wide will display around 800px wide and needs to be readable to students at the smaller size.
- Contrast- Images that need text should have sufficient contrast. Labels should be black on a white background as much as possible. When different colors are needed, they should have enough contrast with the background to be readable by low-vision users (avoid light text on light backgrounds and dark text on dark backgrounds).
Do
Don't
NOTE: Any complex images containing graphs, infographics, complex illustrations or conceptual imagery will require a long description to be added in the HTML. Developers, if a long description hasn’t been provided for you, talk to you project ID to have one written.
