How to Edit and Manage Images | Athenaeum - Presented by the Barony of Madrone

Athenaeum Site Standards

Profile Image

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, consider using your device or an image that shows something about your art or craft. Remember it will be small when viewed. You can consult with Athenaeum tech team staff for alternative profile image ideas.

Featured Image

1300px wide x 300px tall horizontal format

Your featured image, a horizontal, banner format image, will show in the “exhibit catalog”, which is the directory of exhibits. You can see this catalog if you navigate to Exhibits>Past Exhibits. The image also appears as a representative banner at the top of your exhibit page when a viewer opens it.

This image needs to be 1300 wide x 300 px tall, with a possible 350 pixels if necessary. Why no more than 350 pixels tall? Because we want both your chosen featured image AND the title of your exhibit to show in the browser page when the exhibit is first opened. Please crop, resize, or edit an image into that format. If you don’t have an image suited to a banner format, consider a creative layout, or contact Athenaeum technical staff for help. If you happen to insert a featured image that is beyond requested size, Athenaeum technical staff will make changes to align with the guidance.

Page Images

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.

Image Naming

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.

Image Compression

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.

Alt-text

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.

Basic concepts

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.

File Size

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

File Type

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.

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.

Releases and Waivers

See our release form article for more information:

Release Forms vs Citations

SCA release form FAQ and forms (these are the same as the forms we’re providing on the Athenaeum site):

https://www.sca.org/wp-content/uploads/2019/12/ReleaseFormsFAQsWEB.pdf

https://www.sca.org/wp-content/uploads/2019/12/ReleasePhotographerFillable.pdf

https://www.sca.org/wp-content/uploads/2019/12/ReleaseModelFillable.pdf

Please rename your releases as you save them using the “fillable” form. For example, 2021_MacEveny_Creative.pdf. Waivers and releases should be uploaded through the Upload Tool at the bottom of the Exhibitor Release page, or emailed to our Exhibitor Wavers and Releases Mandalorian, The Honorable Aurora Rose Prindel, at athenaeum@baronyofmadrone.net.

Photo Tips


Cropped to 1200x900px	Resized to 1200x900px