Taking digital images and editing them for website use is an easy-to-learn skill. Tools, support articles, and help from the Athenaeum tech team abound!
Pixels vs Inches
Digital images consist of thousands of tiny individual squares, called pixels. When discussing image size for website photos, ultimately all that matters is the number of pixels contained in the file. Do not pay attention to the PPI/pixels-per-inch count, nor the inch/cm measurement from your image editing software.
We want to keep image resolution (as measured in pixels) reasonable, and file size in Kbytes or Mbytes small, for optimum page load time and storage management.
Your file size is measured in kilobytes or megabytes. While dimensions of your image or one factor contributing to file size, other factors include level of detail, compression, and file type.
A late model phone cam takes 12 megapixel photos. That is 4000 x 3000 pixels, which is a large file with an incredible amount of detail. By comparison, my MacBook Pro screen is 2560 x 1600 pixels, and my phone screen is considerably smaller.
We suggest that for website photo purposes a maximum 1200 pixels in any dimension is a good maximum size, and our file size upload maximum for the site is 2 Mb.
Actual file size is also determined by the file type and the level of compression. Most cameras default to a JPEG format, which also compresses your image and loses some data and quality in the process. PNG files are the other commonly used format, and they do not compress and instead create fairly large files. Here is a comparison using the same image in different dimensions/formats:
|Image Dimensions||Image format & quality||Image size in Kb|
|3024×4032||PNG/best||18,200 Kb (18.2 Mb)|
|3024×4032||JPG/best||3,800 Kb (3.8 Mb)|
|3024×4032||JPG/med||2,100 Kb (2.1 Mb)|
|800×1200 px||PNG/best||2,000 Kb (2 Mb)|
|800×1200 px||JPG/best||1,300 Kb (1.3 Mb)|
|800×1200 px||JPG/med||215 Kb|
In general, we would recommend a JPEG format for your web images. That has been the standard format for web images for quite a while now. Other formats are available for specific needs. A image format decision tree I’ve shamelessly swiped from this web site, Best image sizes for websites in 2021: tools, speed testing & FAQ (foregroundweb.com), is below:
Cropping vs Resizing
When you are editing your image, you have two options to reduce image size.
Cropping: If there’s a particular part of the image that’s important, vs extraneous image detail you can trim, cropping is your best bet. You select a rectangular subset of the photo, and by cropping, you remove everything else. Most artisans use cropping a lot to focus in on their subject matter!
Resizing: If your image works well to illustrate your subject as a whole, but it’s just too large, you can resize it smaller. There’s generally a “constrain proportions” box that keeps everything to scale when you do resize.
|Cropped to 1200x900px||Resized to 1200x900px|
Still vs Video
Most digital cameras and phone cameras can take both still photos and video. We encourage that you use both! Still photos can be uploaded to your media library on the Athenaeum site. We would prefer that you upload any video content to YouTube and embed the video in your exhibit page. If you do not have a personal YouTube account, we can work with you to upload it to our branch account.
Athenaeum Site Standards
250px x 250px head shot
Your profile image should be a 250×250 px head shot. If you are uncomfortable putting a photo of yourself on this site, consult with Athenaeum tech team staff for alternative profile image ideas.
1300px wide x 300px tall horizontal format
Your featured image, a horizontal, banner format image, will be used in the exhibit catalog. It needs to be 1300 wide x 350 pixels tall. Please crop, resize, or edit photo into that format. If it is not suited to a banner format, consider a creative layout, or contact Athenaeum technical staff for suggestions.
Maximum 1200px in any one dimension, maximum file size 2 Mb.
Presenting your exhibit online using a WordPress template should incorporate lots of images to break up your text. LOTS of photos! Even so, please consider this guidance on image size to keep page load time reasonable, and our storage requirements manageable. Also, please remove any unused or duplicate images from your media folder.
We’ve all seen web sites which take forever to load. Often this is due to the use of oversized images or a slow connection. Compression of the image can reduce the size of your image files, while not sacrificing apparent image quality. Many photo editors have tools inside of the program to compress and preview your images. Often you can compress an image to half the original size or better without noticing any image degradation. You may find it best to save your original file, then compress a copy and compare the image to the original to determine if image quality is still acceptable. Continue to do this until you find one which is not acceptable, and then go back to the last acceptable version. Remember to compress copies of the original image, as compressing an image which is already compressed can give you distorted results.
In order for us to easily manage images across the site, please rename your image files using this convention: <Year>_<Your Name> <Image Title>.
For example, my picture on the Athenaeum page is titled: 2020_MacEveny_staffphoto.jpg.
Also called “alt tags” and “alt descriptions,” alt text is the written copy that appears in place of an image on a webpage if the image fails to load on a user’s screen. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website. Accessibility matters; please use this capability for each image! WordPress gives you a text block to easily enter alt-text content.
Releases and Waivers
See our release form article for more information:
SCA release form FAQ and forms (these are the same as the forms we’re providing on the Athenaeum site):
Waivers and releases should be sent to our Exhibitor Wavers and Releases Mandalorian, The Honorable Aurora Rose Prindel, at firstname.lastname@example.org.