Search

Photos & Images

Graduates from the UVA School of Medicine Class of 2019.

Graduates from the UVA School of Medicine Class of 2019.

About

WordPress Training

Sign up for WordPress Training/Work Sessions, held each Thursday in the Health Science Library.

Learn More

Quality photography and imagery are important elements on any webpage. The right photo can capture the user’s attention and help them better connect to the content on the page.

Photos can also impact Search Engine Optimization (SEO) and the time it takes for your website to load as well.

Below are some resources and guidelines that will help when preparing images for your website.

WordPress Training

Sign up for WordPress Training/Work Sessions, held each Thursday in the Health Science Library.

Learn More

Cropping & Reducing Image Size

Digital cameras, and some phone cameras, frequently provide images that are too large to post on the web. Raw images from cameras have a LOT more pixels and a LOT more data in them than are needed for web viewing. Websites work better when images are sized and optimized properly for screen viewing.

We don’t all have Photoshop or know how to use it and not all of us have a department budget to buy software. Here are some tools that can get you going with image optimization without any new software whatsoever.

Image Sizes for Page Builder Blocks

For the Page Builder blocks, as well as the main banner on the homepage, it’s important to use the correct dimensions.

Page Builder BlockDimensions
Hero/Banner Image1920 x 500px
Media Call Out Banner595 x 376px
3 Column Call Out Boxes
456 x 290px
Faculty/Resident/Fellow Listing
Portrait: 240 x 325 pixels. After uploading to the Media Library you will be able to choose multiple preset sizes such as Full, Medium, and Variable Width.

Square: 250 x 250 pixels. In the Media Library, Medium and 150 x 150 are the best options.
Captioned ContentNo larger than 430px in any direction. Good ratio: 430 x 290px
Gallery Slide ShowRecommended maximum size: 1055x1055px. For best results, all images should be same size
Standard for Internal pages (converts well to WP image display settings "thumbnail" and "medium")755 x 540px

Check out our Style Guide for additional sizing and style info.

Reducing Image Size (No Cropping)

The following free tools will allow you to keep your photo as-is, but reduce its size for the web.

CompressNow: If all you want to do is reduce the size of the image for the web, but not crop it, then CompressNow is just about the coolest thing out there. Simple, simple, simple. You upload the image to the browser, hit “compress now” and it compresses it right there for you to download. You can also do up to 10 at a time.

ShrinkPictures: As with CompressNow, this is a free online tool where you upload an image and it compresses it for you.

Another option is to make sure you save the image as a .JPG and not .PNG files. Jpg’s compress the image and gets rid of unnecessary information, while PNG’s hold on to all of the images information, which takes up more space on your website.

Image Cropping

If you want to do more with your images, like crop them or manipulate color, Ribbet is a great option. This in-browser photo editing tool is free and enables you to crop, resize, and manipulate the image in your browser, and then download for use.

Screenshot of online Image Editor Ribbit.

Another great resource for editing images is a free tool called, RedKetchup. This website features a variety of photo tools including image resizing, image compression, image conversion and more.

Don't have Photoshop?

Here are a few online free editing options that do not require you to download anything to your desktop.

Pixlr: Pixlr is a browser photo editor for all your editing needs, it is similar to photoshop but even easier to use and you don’t have to download any software.

Ribbet: When you first get to the Ribbet website, it will ask to download or Enable Flash. Click the Flash option to continue to the editing page on the website. Here you can do simple edits such as Cropping

Red Ketchup Red Ketchup is a free to use, In browser set of online tools for photo conversion and resizing. It is particularly useful for resizing multiple photo’s at once to exact dimensions.

Learn More at a Thursday Training Session

To learn more about optimizing images, please join us for one of our Thursday Word Press work sessions (sign up). If you are not able to attend on Thursdays, let us know and we can arrange to meet you personally at another time: