Whenever working with images for websites, we should always think about these considerations:
- Purpose of image
- Image file format (JPG/PNG)
- Image Size
- Accessibility
Purpose of Image
Generally we will use images to either Illustrate concepts or as decoration to enhance what is being presented. It is then important to use the right type of image in the proper format.
Illustrative images combine text and graphics to show information in a graphical way and enhance your presentation. Decorative images don’t necessarily have any text or other graphics.
Image File Format
PNG files
Illustrative images such as the “Total Wellbeing” graphic above are best uploaded as “Portable Network Graphics” aka PNGs. PNG files are excellent at keeping image quality high with a low file size, as long as the image contains only text and graphics. If a PNG file has decorative or pictorial content, then the file size will be much larger, making them impractical for web use. This is because the PNG file format does not use compression.
JPG Files
JPG (or JPEG) files use compression to make file sizes smaller, which makes them ideal for decorative or pictorial images. Compression throws out pixel information in areas where there is not a lot of detail, leaving the now familiar compression artifacts that make low quality images look pixel-y. If the image is sized large enough, then the compression artifacts are not noticeable.
Image Size
Image size in WordPress is controlled through the block settings on the sidebar. We have set up some presets which will show if the original image is larger than the preset. That way if you upload a small image it won’t get enlarged too much and look bad. Please leave the image style as Default in the block settings to maintain consistency throughout your site and our suite of Student Affairs websites.
Using the proper file type as noted above will also make it easier for users with slower download speeds to see your content. A common mistake is to use a PNG file for decorative images. A PNG file will always make a slower download than a JPG if used for decorative or pictorial images.
Accessibilty
In order for screen readers and search engines to understand the intent of the image, follow these rules when adding an image:
- Use alt text if the image or graphic contains text
- Don’t use alt text for decorative images
Use the Alt Text box in the image settings to add customized Alternative Text. You may also add a caption if you wish.
