Photos & Images
Sign up for WordPress Training/Work Sessions, held each Thursday in the Health Science Library.
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.
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. Still, others are not able to download and install 3rd party applications on UVA computers. So, 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 Block||Dimensions|
|Hero/Banner Image||1920 x 500px|
|Media Call Out Banner||595 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 Content||No larger than 430px in any direction. Good ratio: 430 x 290px|
|Gallery Slide Show||Recommended 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.
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.
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.
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: