Saving and optimizing images for the Web has been a mysterious and intimidating process for many admins. But it doesn't have to be! With just a few small nuggets of information, you will be better prepared to improve your site's performance and your users' experience.
Table of Contents
- Getting Started
- Understanding File Type Options
- Saving Images Properly
- Walk-Through of Saving Images with Adobe Photoshop
- A note about images and accessibility
- Best Practices
- Frequently Asked Questions
1. Getting Started
Before digging in, it is helpful to define commonly used terms:
-
File Size:
How much data the image file takes up on the server. Measured in kilobytes (KB) or megabytes (MB). Images with larger file sizes will take longer to download and can slow down your website. Most images uploaded to your Encompass site should be less than 400kb (on average).
-
Image Dimensions:
Width and height of the image in pixels.
You can set the dimensions in two ways: Resize in a photo editing program or image properties.
NOTE: Resizing with the image properties DOES NOT change the file size; it will only change the size at which the image will get displayed). -
Image Resolution:
You can measure Image resolution is in DPI (dots per inch), which is how printers know how much ink to use. The higher the number, the more dots, the finer the image details. On the web, where we are not as reliant on DPI, it's acceptable to use a lower DPI value to have a higher quality image after compression. The industry standard for web use is 72 DPI (for reference, you can save most print-quality images at 300 DPI).
You'll also need a few things: the photo you want to edit, a photo editing program that allows for cropping and resizing, and an image compression tool. Below is a list of photo editing (for cropping, resizing, color edits, etc.) and image compression services (compressing file sizes):
| Image Editors | Image Compression |
|---|---|
|
2. Understanding File Type Options
There are three main file types used on the web and supported in the Encompass Image Manager: JPG/JPEG, GIF, and PNG. Each file type has pros and cons, and it is important to keep these in mind when creating and saving your images.
JPG |
PNG |
GIF |
|---|---|---|
|
File Size: 14.57 KB |
File Size: 105.7 KB |
File Size: 26.72 KB |
|
JPGs (also known as JPEGs) are the most popular file type for images on the web. JPGs handle these types of images well because they have an extensive color palette to work with. JPGs can also be saved and compressed at varying quality levels, depending on their use, allowing for greater balance and control between file size and quality (crystal clear vs. grainy images). |
PNGs have become much more popular in recent years due to the large bandwidths people have on their mobile devices. Generally speaking, PNGs have fewer save options but do offer a significant benefit over JPGs: transparency. Due to fewer options when saving, PNGs are not ideal for large-scale photographs. The file size would be much larger than a JPG with the same visual quality to maintain a crisp photo. |
GIFs are one of the first image types on the web (along with JPGs). They generally have much smaller file sizes due to a minimal color palette. GIFs also allow for transparency, but most images are now saved as PNGs. You can use GIFs for animation, however, but this does not support JPGs or PNGs. |
| USE CASE: Photographs, hero banner images, news or event thumbnails. | USE CASE: Logos or small icons. | USE CASE: Limited use; animated GIFs. |
All three above images are with the exact image dimensions of 400 pixels wide and 250 pixels tall. As you can see, the JPG example photo is significantly smaller in file size while still looking just as clear as the PNG AND being smaller in file size than the GIF, even though the GIF supports fewer colors! The GIF also has a grainy texture in the mountains, where there is a nice clean gradient on the JPG and PNG.
A note about SVGs:
SVGs are one of the newer image formats on the web, and you can include them as a separate file or inline. Their power comes from their responsiveness and scalability; as they are built with XML code (sets of coordinates that draw lines and shapes), the browser can "draw" the element live. This means the image can grow or shrink in dimensions without affecting file size, unlike the rasterized image formats mentioned above, which will start to pixelate (become grainy) when enlarged too much. Most of the time, SVGs are used for logos and icons. Please note that the Encompass Image Manager does not support SVGs, but that the Design Team can use them for site logos or icons where possible.
3. Saving Images Properly
As noted before, the larger an image's file size (measured in KB or MB), the longer it will take to download onto a user's device (remember, mobile devices like phones and tablets download the same images as laptop or desktop computers!). So it's essential to make sure the images you are uploading are optimized for the best experience possible for your users and your brand on as many devices as possible.
There are a few key ways to ensure you save the images properly:
-
Resize to the correct dimensions
This is a significant step and one that gets forgotten a lot. Most images will not automatically be the correct dimensions when you receive them from a camera or marketing team; they will need to be resized to the correct dimensions to fit into the site where you want them to go. The dimensions for all the images in your Encompass site should be available to you on an admin information page (If you do not have an admin information page or can't find it, please reach out to our Customer Support team). The dimensions listed on these admin information pages will help you create the correct dimensions for your content areas.
-
Use the "Save for Web" Compression option when possible
Many image editing programs like Adobe Photoshop have an option to "Save for Web". This option is different from a regular "Save" as it generally will give you more compression options when saving your images, allowing you to get smaller file sizes while still ensuring quality images.
-
Compress Your Image
Even when using "Save for Web" (or something similar) in your photo editing program, it's also essential to run your image through an image compression tool. There are many free options available (check out the list at the top of this article). You'll be surprised about how much extra file size savings you can get!
4. Walk-Through Example of Saving Images with Adobe Photoshop
To begin, let's pretend we are going to be adding a new slide to our iModules Alumni homepage hero banner:
We have the new image that we want to use to promote our alumni travel trip to the Grand Canyon this fall.
But this image is HUGE! The image dimensions are 5488 pixels wide by 3659 pixels tall, way too big to fit in the space we have for our hero images, and it's 2.4 MB in file size. We need to shrink this down and crop the image to fit well on our new slide. We know what the image dimensions SHOULD be because we already checked the admin information page, and it says that hero images should be no larger than 1,700 pixels wide and 765 pixels tall.
We're going to open the image in Adobe Photoshop (or whatever photo editing program is preferred) and resize the image to the correct dimensions. (There are multiple ways to resize the image and canvas, it's entirely up to you on how you do it.) We can also make any color adjustments we like at this point. Remember, the proportion of the image we are working on may differ from the one on the website, so we may need to crop or re-center our image.
Once satisfied with the new image, it's time to save it. In Photoshop, a specific command called "Save for Web" optimizes the image file for web use. Remember, this command is different from the regular "Save," which does not compress images. To open the "Save for Web" dialog, go to "File," → "Export," → "Save for Web (Legacy)." If you're into keyboard shortcuts, it's Alt+Shift+Control+S on Windows and Command+Option+Shift+S on Macs.
There are a few options in the "Save for Web" dialog box to watch for Image Type and Image Quality. We know from doing our research that JPGs are the best format for photographs like this one, so we know that for "Image Type" we want one of the JPG options.
For Image Quality, Photoshop provides five preset values: Low (10), Medium(30), High (60), Very High (80), and Maximum (100). These change the number that shows in the "Quality" field, though this number can be adjusted by hand if preferred. In general, the High setting (60) is a good standard. If we adjust the quality value, we won't see much changing on the image, but the file size will get much bigger! Our file size at the High preset is 241.3 KB (remember, we started at 2.4 MB!). If we increase our preset to Very High, our file size jumps to 425.7 KB, almost doubling from High. Saving for the web is always going to be a compromise - balancing visual quality against file size.
Don't forget; we are not done! It's important to run our image through an image optimization program to ensure we are as optimized as possible. We ran this image through TinyJPG and compressed it by an additional 27%, knocking the final image size down to 175.7 KB.
The image is crisp and clear, looks great, and focuses on where we want it to be. We are now ready to upload this image into the hero slider and add the new content.
To recap, we had a very large photo that would have slowed down our site's load times that was also not the correct proportion and updated it to be the correct dimensions and significantly smaller file size. Every little KB saved helps our site load quicker and gives our users a better experience.
5. A note about images and accessibility
When adding images to your site, it is important to make sure you add an appropriate alternate text attribute (or alt text) so users who use a screen reader will also be able to consume your content. We get a common question is "What should my alt text be?" and unfortunately, there isn't a short or easy answer. Alt attribute text varies significantly by how the image is being used and the content around it. Below are a few good general rules:
- If your image is linked, it MUST have alt text. Ideally, the alt text would be the same as whatever text appears on the image ("Register now," for example).
- When adding an image with the editor, you do NOT have to add alt text, but the system will add an empty alt attribute on your image. This will cause a screen reader to ignore the image entirely unless you add additional alt text into the image properties.
- You do not need to add "Image of" or "Photo of" to your alt text. Still, suppose your image is a drawing, painting, or diagram. In that case, it may be helpful to include that information, depending on the context in which the image is being used ("Architectural rendering of the new Alumni House," for example).
- Be succinct. Standard alt text on an image would be a few words to describe the image's content, or at most 1-2 short sentences.
- If the image is decorative only (a divider line, for example), an empty alt attribute is appropriate (this would look like alt="" in the HTML).
Remember, these few rules are not the only rules for alternate text but are good to start. By adding correct alternate text to your images when you build a page, you are helping ensure everyone can use and enjoy your site. For more information, please read the article(s) posted on the WebAIM site.
6. Best Practices
- Always run images through an image compression tool. Every little bit saved helps!
- Always resize images down to the dimensions they will be in the content area BEFORE uploading them; this helps avoid bloated pages with images resized in the image properties.
- Avoid adding text to images when possible. By doing this, the text gets very small and hard to read on mobile devices (remember, most of your images will shrink automatically on mobile!). Still, it can be tough to communicate the same content in the image's alternate text attribute.
- If you add images to a group of similar content (a news pattern or hero rotator, for example), make sure all images in that area have the exact dimensions.
7. Frequently Asked Questions
- How do I know what the correct image dimensions are for my site or template?
You should have access to an admin information page related to the template you are currently working on. This page should have a list of all images dimensions. If you cannot find this page, please reach out to Customer Support, and they will either help find the correct page or reach out to the design team to create one for you. - Why are my images getting cut off on vast screens or tiny screens?
Depending on the template, the pattern you upload your image to may have a fixed height on the image area. Generally, this is done to help ensure a consistent visual look across sections (not having different-sized news article thumbnail images, for example). It also is done often on hero rotator or image sections in an attempt to limit the height of full-width images on large screens; if there is no maximum height set, the image will grow proportionately (both width AND height), and the content below the image falls farther and farther down the page. The inverse is true on smaller screens; a minimum height may be set to show a nice feature image on smaller devices. This can cause the left and right edges of the image to fall outside the view of the image area.
The Encompass Design Team sets the images to reposition at a center-center location, so the edges of the image may start to disappear, depending on both the width of the screen and the set height of the area. Restrictions like these can be removed upon request, but be aware that a lot more responsibility will fall on content creators to ensure the images they are uploading are the correct dimensions and are reviewed on multiple screens and devices.