5 tips for creating picture perfect web images

Image examples

A professional looking site has crisp, attractive images that display well on desktop, tablet and mobile. Here are five tips you can follow to make sure your images look picture perfect in the WMS.

1) Start with the highest resolution image you can find

Use original, high-resolution copies of images. Try not to use images that have already been cropped and edited for other web pages.

2) Use a consistent ratio when cropping images

Create a sense of design consistency by cropping images with the same ratio — 16:9 and 4:3 are two ratios that are commonly seen in web page layouts. Using a consistent ratio will also ensure images placed in half-width blocks and third-width blocks lineup nicely.

Ratio examples

Portrait images work well when placed in the sidebar or in node content, but aren’t recommended for Statement, List or Call to action blocks, or for use in slideshows.

3) Consider image dimensions carefully

What’s the best size for images in the WMS? The answer to this question varies for different WMS tools and features.

Images placed in blocks will resize automatically based on whether the block is set to full-width, half-width or third-width. That said, if you size your images to at least match the largest possible width, 1200px, you’ll ensure it will display nicely no matter which width your set your block to. Alternately, if you crop an image to fit in a third-width block (e.g. 150px wide), then decide to change that block to a half-width or full-width block, the image will probably appear blurry and stretched.

Images placed outside blocks can be cropped to whatever dimensions you feel look appropriate. As with images placed in blocks, if you crop the image to the largest possible width, 1200px, you can then adjust the image dimensions to fit your requirements in the image settings. This will ensure the image will display nicely whether viewed at 1200px or 100px.

The recommended image size for McGill Profiles is 220px x 220px.

View recommended image sizes for slideshow galleries in the IT Knowledge Base.

4) Less is more…

Keep image adjustments to a minimum and avoid using filters.

In most cases you’ll need to crop your images. Beyond that, unless you employ specific image branding that requires complicated image editing, it’s best to keep your image adjustments simple. If you use a professional photographer, he or she has probably already made any necessary adjustments to correct any lighting or exposure issues.

5) …but bigger is better!

After you’ve cropped and edited your image, save it at the highest possible resolution. Files uploaded in the WMS must be less than 25 MB, so save your edited image at as high a quality as possible while staying within the file size restriction.

Bonus tip! Watch your composition

Check out our previous post, 5 template block tips for alpha site managers, for image composition tips.

Do you have advice to share with other site managers on creating images in the WMS? Share your tips in the comments below!

Comments are closed.

Blog authors are solely responsible for the content of the blogs listed in the directory. Neither the content of these blogs, nor the links to other web sites, are screened, approved, reviewed or endorsed by McGill University. The text and other material on these blogs are the opinion of the specific author and are not statements of advice, opinion, or information of McGill.