Use Photoshop to Save Images for the Web
If you do not have Adobe Photoshop please submit a request with the Help Desk to have them install it for you.
Step 1: Open an Image
- Lets get started by opening an image in Photoshop.
- Click File > Open, and browse for the image on your computer, and click Open. Any image for photo will work.
- Now lets resize the image to a smaller size similar to one you would see on a web page. To do this, click Image > Image Size, enter a new width in the Width field, and select Pixels. In this case, enter 400 pixels and click OK.
Step 2: Open the Save for Web Tool
Assume somebody asked you to deliver a photo at 400 pixels wide, ready to be posted on a website.
Click File > Save for Web to open the Save for Web dialog box. (In later versions of Photoshop, the path is File > Export > Save for Web.)
Browse the different settings and tools in the window.
Step 3: Set up the Comparison
At the top of the Save for Web window are a series of tabs labeled Original, Optimized, 2-Up, and 4-Up. By clicking these tabs, you can switch between a view of your original photo, your optimized photo with the Save for Web settings applied to it, or a comparison of two or four versions of your photo.
Choose 2-Up to compare the original photo with the optimized one by showing side-by-side copies of the image.
Step 4: Set the Original Preview
Click on the photo on the left side to select it. Choose Original from the Preset menu on the right side of the Save for Web window (if it is not already selected). This puts a preview of the original, unedited photo on the left side.
Step 5: Set the Optimized Preview
Click on the photo on the right side to select it. Choose JPEG High from the Preset menu. You can now compare the optimized photo on the right, which will be your final file, with the original on the left.
Step 6: Edit the JPEG Quality
The most important setting in the right column is the Quality value. As you lower the quality, your image looks muddier, but the file size goes down, and smaller files mean faster-loading web pages.
Try changing the quality to 0 and notice the difference in the photos on the left and right, as well as the smaller file size, which is located beneath the photo.
The goal is to find a happy medium between file size and quality. A quality between 40 and 60 is usually a good range and a file size of around 100 KB depending on your needs. Try using the preset quality levels (JPEG Medium, for example) to save time.
Step 7: Save Your Image
Once you are satisfied with the photo on the right, click the Save button. The Save Optimized As window opens. Type a file name, browse to the desired folder on your computer, and click Save. You now have an optimized, web-ready photo.
Descriptive Filenames
When uploading an image to Drupal, please be sure that the filename is descriptive and follows our standard naming conventions. Two of the most common images uploaded to Drupal by editors are slider images and portraits. Examples for each are below, and with both, you will notice each part provides useful information:
A descriptive filename for a slider image, is “wrestling-team-slider-A02369.jpg”
- “wrestling-team” tells us (and search engines) what the photo is about (this may be similar or the same as the alt text you will enter when you add the image to the page)
- “slider” tells us the image has been saved at the appropriate size for our slider feature located at the top of most webpages (1280 x 549 pixels at 72dpi).
- “A02369” tells us this photo may have been downloaded from SUNY Oneonta’s Photo Library, and allows someone to quickly find the original photo in the future if necessary (this reference number will need to match the unique number from the filename in the Photo Library)
A descriptive filename for a portrait, is “smith-joe-portrait-2021.jpg”
- “smith” gives us a common search term (last name) to search the current Drupal library and see if someone has already uploaded a photo of Joe Smith
- “joe” allows us to sort through all photos that have “smith” in the filename so we can locate the correct individual from the Drupal library
- “portrait” tells us the image has been saved at the appropriate size for our portrait style (400 x 480 pixels at 72dpi)
- “2021” gives us a date of when the portrait was taken so we can be sure we are using the most recent version if multiple portraits are in the Drupal library
One of the benefits of following this naming convention, is, Drupal editors can easily locate existing images that may work for their content without having to locate a photo in the Photo Library, resize it, and be sure it is properly optimized for the web. For the example of a slider photo, you can simply search “slider” and select one of the images with “slider” in the filename to freshen up your page (Note: some sliders images are optimized for SUNY Oneonta’s homepage, and have “hp-slider” in the filename).
Another best practice when writing a filename is to avoid using spaces or special characters (except for hyphens). This avoids technical issues and ensures friendly URLs for those who want to link to your content, and how links display in search results.