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 3,000 MB of storage space currently. (Proposed change for Fall 2023: 250MB)
- Individual file uploads cannot exceed 100 MB in size currently. (Proposed change for Fall 2023: 2-4MB)
- 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.
Please note: most links will take you out of Emerson's websites.
General image optimization
WordPress
If your image’s file size is less than 100 MB, you can do basic editing within WordPress.
Preview (macOS only)
Preview is the built-in document and image tool for Apple Mac OS computers.
- High Sierra image editing guide
- Mojave 10.14 image editing guide
- Catalina 10.15 image editing guide
- Big Sur 11.0 image editing guide
Preview is a useful tool for simple resizing if you don’t want to do any other editing at this point. Follow these instructions on how to resize images using Preview. You’ll be able to see how big the file size will be after resizing, as shown below:
Adobe Creative Cloud
Adobe CC is provided free to full-time Emerson faculty, staff, and 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:
Photoshop
- 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.
To resize photos in Photoshop, look for Image > Image Size. Towards the top of the Image Size window, you'll see the current file size, followed in parentheses by the size the file will be after the changes you've specified.
Lightroom
To resize photos in Lightroom, use Export (scroll down this page to the section titled “Export photos in the format of your choice”). The size of the file that will be created from the specifications that you select here is displayed at the bottom of the window:
Web-based tools
Editors
- PIXLR (Also available as a mobile app)