Photos - UTACM/TexasACM.org GitHub Wiki

Aspects of a website that don’t involve code are often overlooked. With that said, image optimization for web is a crucial aspect of maintaining a website. This section will go over some basics of managing photos for the ACM website to ensure quick load times whilst contributing to good SEO. Make sure to click on each subsection’s title to expand for more in-depth details.

1. Name your images descriptively in plain language

When emailed photos or pulling from the ACM Google Drive, it’s important you rename photos to be something meaningful. You want to avoid photos that are left by their default name just as IMG08110 or DSC0180. By naming your photos properly, you can help boost the sites page rank and ensure related results populate searches.

2. Leverage alt tags

Alt tags play two major roles people often overlook. Firstly, they are the text alternative to images when a browser can’t render the photo. Secondly, they’re crucial for web accessibility and screen readers for people with disabilities. Skipping alt tags means visitors with disabilities will be missing out from your page with images altogether. It also loses SEO value.

For example, <img src="whiteelephant.jpg" alt="ACM 2018 White Elephant Group Photo"> is an example of an adequate alt tag.

3. Choose adequate image dimensions

Phone cameras and professional cameras alike are increasingly shooting high resolution images that easily exceed the resolution of the average display. Thanks to Google Analytics and industry trends, we can get a rough idea of our visitors’ device’s screen resolution.

We typically find that most visitors (at the time of writing in March 2019) are on 2K displays or roughly 1080p (1920x1080) so we don’t want our images to exceed 2048px on the longest edge of the image. For images that may be shown more prominently on the site from edge to edge of the page margins, it is more acceptable to use larger dimensions such as 4K (3840x2160px). It’s crucial that when you resize images, you maintain the original aspect ratio to prevent distortion.

Images can be resized locally with applications such as Photoshop or GIMP (free) and even online through various websites like Canva. Do NOT simply resize images in the source code, the same [large] image will still be loaded. It also makes it easier for people to steal your original, high resolution images.

4. Compressing images

Last but certainly not least, reducing the file size of your images! Page visitors often became frustrated when images and other content load slowly so it’s crucial ACM loads quickly. Beyond this, mobile users on limited data plans may be data conscientious. Lastly, search engines often take load times into account when ranking pages and search results so there is yet another motivation to compressing your images.

Again, you can use local or online tools to compress images. A quick Google search for “Photoshop Save for Web” or “GIMP Image Compression” yields several results for how to accomplish this. Both pieces of software give accurate estimates for file size. Try to keep images between 150-200 KB max after downscaling to 2048px on the long edge. If it’s over, it’s okay to bump up the quality setting if needed but typically around JPEG 65 on the sliding scale will do the trick.

Some tricks to keep in mind are knowing the best file format for images. For images with lots of details and intricate artifacts, you want to stick to JPEG (e.g. anything shot with a proper camera). For anything else, especially logos and anything with a reduced color palette or small dimensions, it’s worth considering a PNG (portable network graphic). Currently, ACM employs PNGs for all logos such ACM and corporate sponsors.