Tag Archives: Image Editing

Website Image Size and Format Guide

Image Size and Format Guide

For image width dimensions (in pixels)  for specific uses on our website, see the list at the end of this guide.

See the Images in Drupal guide for further information on how to upload and embed images.

Creating Images for the web

Speed is important!

Website visitors don’t care what format your images are in, they only care that they are viewable and downloaded in a timely fashion (even on slower connections). To accomplish this, images should be optimized for both speed and usability.

Image Mode: Use RGB format.

Image file format

JPG: Use this in most cases! This file type is good for saving images with millions of colors, including photographs and graphics with a variety of shades and gradients.

GIF: Best for line art/cartoon-like drawings.

PNG: Also an acceptable format, but not needed in most cases.

Please do not use other image file formats on the website.

Rules for Saving Images:

  • Make sure you have saved a copy of the original image, so that you can come back and edit it again later if needed. This may be a different format such as, .raw, .tiff, .png, or .psd, or it may simply be the original size of a .jpg (e.g. from your digital camera) It is especially important to save the original if layers have been added to the image or graphic file.
  • .jpg files are often larger and take longer to load. However, most image editing tools allow you to select the file compression for .jpg. For example, you can choose Maximum, Very High, High, Medium, and Low. Try saving larger images under several compression settings and then test them for quality rendering and load times. Balancing quality, compression, and load times can be a judgment call depending on the particular image and the web document it appears in.
  • Final web images should be saved at the same size at 72 pixels per inch resolution.
  • An ALT tag is required for each image.

File sizes:

Choose the optimal size based on how you are using the image:

  • For banners or hero images, a file size up to 60KB is acceptable.
  • For high end photographs, try to keep them to within 100KB at an absolute maximum.

List of image sizes:

When any image is uploaded, Drupal applies the Focal Point you assign to that image and then crops and scales the image for the area in which it will be used. (Please refer to the Images in Drupal guide article for this in depth).

This means that some images could be used in places that are more horizontal, some more square or vertical, etc.

If we decide to use an image that has a small original size in a Feature Large Flexible Content Item, it may display as very pixelated as Drupal is trying to make a small image fit in a big display element.

With this in mind, it is a good idea to upload images that can work in the following categories:

Image categories:

  • WYSIWYG Images: 800 x 600px
  • Squares and Vertical orientation: Thumbnails; Headshots used for Admissions Officer;  staff directories; News – Portrait; Social Media Connect; etc.  400px wide, (minimum dimension 350x464px)
  • Horizontal orientation: Most Flexible Content Items; News – Wide; Hero; etc.     1900×1022 (2:1 aspect ratio)

Previewing an Image

Remember, you can see the Preview of all the image sizes and orientations for any image you add to a content item.  Here is an excerpt on the Preview function from our Images in Drupal article

we can click on the Preview link under the thumbnail to see that this focal point we picked really will be the best part of the photo to never get cropped out.

 

This puts a pop-up window within our pop-up window that displays all the site-wide Image Styles of the image while employing the Focal Point we just selected. We clicked the Focal Point to be on the bike rider in the middle of the path.

These Image Styles are in a horizontal-scroll pane. If you scroll down you can see the original image for comparison.  Here is a view of the horizontal-scroll-pane moved to see the difference between the News/Event Detail Portrait and the News/Event Detail Wide image styles.

When you are finished with the Preview, you can click the X in the upper right of the Image Preview (inner pop-up window) to close the preview.

 

Preparing Images for the Web in MS Word 2016

Before uploading your images to Drupal, it’s important to correctly crop, size, and optimize them to ensure they will display correctly and be accessible. The document below provides instructions for performing those tasks within MS Word 2016 on Windows and MacOS.

PreparingImagesfortheWebinMSWord2016
Title: PreparingImagesfortheWebinMSWord2016 (0 click)
Caption:
Filename: preparingimagesforthewebinmsword2016.pdf
Size: 345 KB

 

Embedding videos and other media/interactive content in blogs

Note: WordPress limits what content may be embedded and where for security reasons (e.g. to prevent malicious code from being inserted into a blog). If code is removed or changed when you attempt to embed it, please contact Web Services help@brynmawr.edu for assistance.

Content may be embedded in a WordPress post or page from most major video and image sites, as well as sites like PollDaddy and Scribd. A complete list of supported sites is available in the WordPress Codex. Please contact Web Services for assistance if you want to embed code from other sites, or if you want to embed code in areas other than a post or page (e.g. the sidebar).

Embedding content in a blog post or page:

Find the URL (address) of your video (e.g. http://www.youtube.com/watch?v=2Kyadx7KvkU ) or other content and copy it.

Paste the URL into your post or page where you want the content to appear.

Publish your post when it is done.

Changing the size of embedded content:

You’ll need to use the embed shortcode in your post or page. In the post or page where you want the content to appear , type [embed width="x" height="y"] [/embed] where x and y are your desired width and height (in pixels).

Find the URL of your content or other content and copy it.

Paste the URL in between the embed opening and closing tags, like so: [embed width="400" height="233"]http://www.youtube.com/watch?v=2Kyadx7KvkU[/embed]

Publish your post when it is done.

FAQ:

How the heck do I figure out what size my content should be?/My content is squished!

Visual content like videos and images usually need proportional width and height (aspect ratio) to look right. If you’re changing the size of the content when you embed it, you’ll need to keep this in mind. Many sites have different default sizes for you to choose, or will help you calculate proportions for a custom size. A few examples for finding the size are provided below, for use with the shortcode tag instructions above. For help changing content sizes with another site, please refer to that site’s documentation, or contact Web Services via the Help Desk for assistance.

In YouTube:

Click “Share” beneath the video.

Click “Embed” in the menu that appears.

You cannot use the Embed code here, but you can refer to the listed width/height combinations, or use the custom size calculator (e.g. type “200” in width, and a proportional height will appear, and you can copy these into the width and height in your embed tag).

 In Flickr: (for images)

Click “Share” above the image you would like to share.

Click “Grab the HTML/BBCode”

You cannot use the Embed code here, but you can refer to the listed width/height combinations in the dropdown menu.

 In Flickr: (for slideshows)

Click the “Slideshow” button on the page for the photo set you would like to turn into a slideshow.

On the Slideshow page, click “Share”, then click “Customize this HTML” in the menu that appears.

You cannot use the Embed code here, but you can refer to the preset sizes listed (e.g. small/medium/large) or enter a custom size. Be sure to leave the “maintain aspect ratio” box checked to keep the proportions correct.