As the quality of photographs taken by smartphones increases, so too does the raw size of the file. In order to ensure that visitors to your website have the best experience possible, it’s essential to optimize your photographs and digital graphics for the web.
The two most important things to address when using images in your word.emerson content are:
- Image file size: the amount of storage space your image takes.
- All sites on word.emerson live on the same server and thus have to share the storage space available.
- Word.emerson sites are limited to a total of 2,000 MB of storage space.
- Individual file uploads cannot exceed 2MB in size.
- Image dimensions: the height and width of your image, i.e. the amount of space on the screen your image takes up.
- If your image is larger, the computer will attempt to crop it down, which may result in the loss of important visual information, such as cutting a person’s face out of the photo.
- Most themes that make use of the “featured image” option for posts will attempt to fit whatever image you choose into the dimensions required for the theme.
- Editing your image’s dimensions yourself will allow you to make sure that the image and post work together to convey the information that you want them to.
Below we’ve compiled a list of guides and links to tools to help you optimize your images. Some links are Lynda.com videos, which are free for members of the Emerson community. See “Using lynda.com” for more information.
Please note: most links will take you out of Emerson websites.
General image optimization
- Creating Optimized Web Graphics (Lynda.com)
- Use image optimization tools (Lynda.com)
- The Ultimate Guide to Image Optimization for WordPress
If your image’s file size is less than 2MB, you can do basic editing within WordPress.
Preview (Mac OS Only)
Preview is the built-in document and image tool for Apple Mac OS computers.
Adobe Creative Cloud
Adobe CC is provided free to Emerson faculty, staff, and full-time students for their personal machines, as well as being available on lab computers around campus. If you don't already have Adobe CC installed on your machine, the following guides can help:
- Official Photoshop Tutorials
- Export options in Photoshop
- PNG is a lossless image format, but file sizes tend to be larger. If the image is cropped down appropriately, it shouldn't be an issue.
- JPG does lose some image quality, but you can adjust how much is lost in the Export As menu.
- Optimize web graphics with Photoshop (Lynda.com)
- Illustrator for Web Design: Image Optimization (Lynda.com)
- Quick image optimization (Lynda.com)
- PIXLR (Also available as a mobile app)