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. The dimensions can be set 2 ways: the image can be resized in a photo editing program or the dimensions can be changed via the image properties (NOTE: resizing with the image properties DOES NOT change the file size, only the size at which the image will display).
Image Resolution:Image resolution is measured 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 in order to have a higher quality image after compression. The industry standard for web use is 72 DPI (for reference, most print-quality images are saved at 300 DPI).
There's also a few things you'll need: the photo you are wanting 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 3 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.
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 type of images well because they have a large color palette to work with.
JPGs can also be saved and compressed at varying quality levels, depending on their use, and allows 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 large benefit over JPGs: transparency.
Due to fewer options when saving, PNGs are not ideal for large-scale photographs. To maintain a crisp photo, the file size would be much larger than a JPG with the same visual quality.
GIFs were one of the first image types on the web (along with JPGs). They generally have much smaller file sizes due to a very limited color palette. GIFs also allow for transparency, but most images that used to be saved as GIFs are now saved as PNGs instead.
GIFs do allow for animation, however, which neither JPGs or PNGs support.
|USE CASE: Photographs, hero banner images, news or event thumbnails.||USE CASE: Logos or small icons.||USE CASE: Limited use; animated GIFs.|
All three images are displayed with the same 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 can be included 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), this allows the browser to "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 commonly 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 very important to make sure the images you are uploading are optimized for the best experience possible for both your users and your brand on as many devices as possible.
There are a few key ways to ensure your images are saved properly:
Resize to the right dimensionsThis is a very important step, and one that gets forgotten a lot. Most images are not going to be automatically 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 and they can help you out). The dimensions listed on these admin information pages will help guide you in creating images that are the correct dimensions for your content areas.
Use the "Save for Web" Compression option when possible
A lot of image editing programs like Adobe Photoshop have an option to "Save for Web". This option is different than 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 being able to ensure quality images.
Compress Your ImageEven when using "Save for Web" (or something similar) in your photo editing program, it's very important to also 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 really shrink this down and recrop the image to make it 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 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 may be different than the one on the website, so we may need to crop or recenter our image.
Once satisfied with the new image, it's time to save it. In Photoshop, there's a specific command called "Save for Web" that optimizes the image file for web use. Remember, this command is different than the regular "Save" which does not compress images as much. 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.
In the "Save for Web" dialog box, there are a few options to keep an eye out 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 5 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 up, we won't see very 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 web is always going to be a compromise - balancing visual quality against file size.
Don't forget, we aren't done! It's important to run our image through an image optimization program too, to make sure 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 very crisp and clear, looks great, and the focus is 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 in 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. A common question we get is "What should my alt text be?" and unfortunately there isn't a short or easy answer. Alt attribute text varies greatly 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 go into the image properties and add additional alt text.
- You do not need to add "Image of" or "Photo of" to your alt text, but if your image is a drawing, painting or diagram, it may be useful 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 a good place 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 that are being resized in the image properties.
- Avoid adding text to images when possible. Not only can text get very small and hard to read on mobile devices (remember, most of your images will shrink automatically on mobile!) but it can be very difficult to communicate the same content in the image's alternate text attribute.
- If you are adding images to a group of similar content (a news pattern or hero rotator, for example), make sure all of the images in that area have the same 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 that relates to the template that you are currently working on. This page should have a list of all images dimensions. If you are unable to 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 very wide screens or very small screens?
Depending on the template, the pattern you are uploading your image in 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 would 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; there may be a minimum height set, in order 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 iModules 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 make sure the images they are uploading are the correct dimensions and are reviewed on multiple screens and devices.