Information shared on behalf of ACES Web Support
Introduction
Larger image sizes can be the culprit behind sluggish Web pages, frustrating users and sometimes prompting them to abandon the website altogether. In our fast-paced digital world, where user attention can be short, optimizing photos is vital to create a favorable browsing experience. It also improves accessibility. By understanding image formats, dimensions, and resolutions, the New Mexico State University community can develop websites with faster load speeds and increase user engagement while accommodating people with limited bandwidth and on various devices (such as mobile).
Benefits of Optimizing Photos and Images for the Web
Optimizing your photos properly improves page load speed, bandwidth optimization, mobile responsiveness, and user experience. Optimizing photos reduces image file size. This is crucial, as large image files can significantly slow down web pages, leading to higher bounce rates, decreased user satisfaction, and more data consumption. This is particularly critical for users who may not have a strong Internet connection or who have limited bandwidth. This can be especially helpful if you want to reach people in rural communities since it decreases the amount of data required to load images. Furthermore, optimizing photos is critical because of the prevalence of mobile browsing. Since information is increasingly sought on mobile devices, faster image delivery can ensure that images can be viewed seamlessly across various screens.
All these important factors contribute to a positive user experience, reducing loading times and providing immediate visual content. Websites that are easier to load allow users to stay engaged longer and explore other pages on your website. This enhanced reliability and accessibility of information is especially important for educational institutions. By optimizing photos, universities can ensure that prospective students, current students, instructors, researchers, alums, and the general public can easily access the resources they need, enhancing the learning experience and facilitating knowledge dissemination.
Ways to Optimize Photos and Images for the Web
Optimizing pictures for the web involves various techniques, such as selecting the optimal image format, altering its resolution, and considering the image's dimensions. By employing these strategies, you can ensure your pictures are effective for online viewing.
Optimal Image Format:
JPEG (Joint Photographic Experts Group) is preferred for Web use when choosing an image format. JPEG files are known for their compression algorithm, which reduces file sizes without compromising image quality. This means that JPEG is ideal for quickly loading Web pages.
2. Resolution Optimization:
Resolution can significantly optimize an image's visual impact while minimizing its effect on Web page load times. A resolution of 72 DPI (dots per inch) is widely recommended for effective Web optimization, since it ensures image clarity while maintaining a smaller file size. By adjusting the resolution of your images to 72 DPI using image editing programs, you can optimize them for web usage.
3. Optimal Image Dimensions:
Determining the appropriate size for a photo on your website is essential to avoid excessive file sizes. It is recommended to set the width or height in pixels (px) to optimize loading times and overall website performance. Click here to see how different-sized images look in the Cascade Content Management System (CMS). Maintaining the image's aspect ratio while resizing is important to prevent distortion. You can also consider cropping the image to refine its composition if needed.
To view an image’s pixel dimensions, you will first need to locate the file and open the image. (“Preview” is the most common image viewer for Mac users; “Photos” for Windows users.) These dimensions represent the number of pixels in the image.
Mac: Click on “Tools” in the menu header and click “Show Inspector” to view the image’s dimensions.
Windows: Click on the three dots on the right side of the menu header and click. “File Info” to view the images’ dimensions.
Tools like Preview, Paint or Adobe Photoshop, or online editing platforms, can help you alter the file type, resolution, and dimensions of your images. By utilizing these tools effectively, you can ensure that your website allows for a seamless user experience while staying visually appealing across various devices.
Instructions on Changing File Format
If you are using a Mac computer, the best way to export a photo to JPEG is to open it in "Preview." Once the image is open, go to the "File" menu on the top toolbar. From there, you will choose "Export." This will open a dialog box where you can rename the file, select its destination, and change its format. Select the "Format" option, and choose "JPEG." Once you click "Save," your photo will be exported as a JPEG file.
If you're using a PC or Windows to export a photo to JPEG, you must open the image in the "Paint" app since the default "Photos" app doesn't allow you to convert to JPEG. Begin by right-clicking on the image and selecting "Open with" followed by "Paint." Once this image opens, go to the "File" menu on the top toolbar. From there, click the "Save As" command. This will open a dialog box where you can rename the file, choose a destination, and change the image format. Click on the "JPEG/JPG" format, and finally, click "Save" to export the photo as a JPEG file.
Instructions on Adjusting Size
To adjust the size of an image using "Preview" on a Mac, open the photo you want to alter, go to the "Tools" menu at the top of the screen, and select "Adjust Size." This will open a dialog box where you can modify the image's dimensions in pixels. You can choose specific values for width and height. As you change the size, the resolution will automatically adjust. Once you're satisfied with the size adjustment, click "Save."
To adjust image size using the "Photos" app on a PC or Windows, open the Photos app and locate the photo you wish to export. Right-click on the image and select "Open with" followed by "Photos." Once the picture is open, click on the "..." (More options) button at the window's top-right corner. Choose "Edit & Create" from the drop-down menu and then select "Resize." This will open a dialog box where you can adjust the image's dimensions. You can enter specific values for width and height. As you modify the size, the app will preview the changes. Once you're satisfied with the size adjustment, click the "Save a copy" button at the window's top-right corner. This will save a copy of the resized photo.
CMS Size Examples (By Pixel Width)
100 px
150 px (Standard Mugshot Image)
250 px
350 px
450 px
700 px
Conclusion:
Mastering image optimization is a pivotal step toward creating an excellent Web experience for users. Understanding optimal image formats, image resolution, and image dimensions can help websites achieve faster page load speeds, save bandwidth, and enhance user engagement. These techniques also collectively contribute to a visually captivating website. By implementing these optimization techniques, the New Mexico State University community can create a web experience that caters to its users' diverse needs.
For a condensed version of these recommendations, see our tip sheet: https://aces-websupport.nmsu.edu/tutorials/photos.html
Written by: Yvette Navarro, Web Developer