Images are a fantastic way to increase engagement with your audience and showcase your site to the best of its ability. Online images are used in many different ways, but they still need to be optimized for your site. We want to help make your site as beautiful as possible, so here are some tips on what images will work best.
Looking for something specific? Use this table of contents to jump to what you're looking for:
- Image Properties
- General best practice tips
- Automatic cropping
- Background images
- Images on pages
- Rotating Banners
- Image Galleries
- Icons
- Images for social media
- Where can I find images?
If you're looking for a specific size for a content type, we recommend first checking your city's or council's style guide. Otherwise, you can refer to Recommended dimensions for image sizes.
Image Properties
The best practices for images are discussed in terms of image size, file size, and format, so let's discuss those first.
-
Image size: The measurement for online images is in pixels and is given in two different ways:
- Width by height (an image that is 2000 x 1125 is 2000 pixels wide and 1125 pixels high)
- A single measurement for the long edge of the image (2000 pixels for an image that is 2000 pixels along the longest side)
- File size: How much disk space your images take up. It can be tempting to upload large images to maximize quality, but these can take a long time to load for site visitors with slower connections. For your site visitors, the frustration of waiting for images to load is likely to overshadow the extra visual fidelity of large images. Generally, it’s best to stick to images no larger than 500 KB.
-
Format: This is the file type of your images. There are several common formats for web images, and each of them is suited to different situations:
- JPEG: A standard file type that is well-suited to photographs and has a relatively small file size. Most images on your site should be JPEGs.
- PNG: These files are great for technical illustrations and images with text, as they offer clear, crisp edges for elements like text or architectural details. PNGs are typically larger than JPEGs and should be used sparingly. Additionally, there are concerns regarding accessibility for images with text.
- GIF: The only common image format to support animation and should only be used for this purpose. Before the wide adoption of PNG images, GIFs were also helpful for technical diagrams as they render hard edges cleanly, but today, PNGs are a better option.
- SVG: These files are vector-based images containing image information defined by mathematical rules rather than pixel maps. This means they can be shrunk and enlarged to any size without losing image quality, making them ideal for logos.
General Tips
- Before you upload any images, ensure you have permission to use them.
-
Use alternative text to describe your images for people using screen readers or with slow internet connections. You can write alt text for an image when you select it from the Files library before you insert it into the page. Here are some basic guidelines for alt text:
- It should be brief (less than 250 characters is a good guideline)
- It should convey the purpose of the image, not necessarily just the description.
- Avoid phrases like "image of" or "photo of" in your alt text, and avoid using the image's file name as your alt text.
- Decorative images or images only used for design should have an empty alt text attribute.
- For complex images, such as charts or graphs, you should provide a more detailed description of what the image conveys alongside the image. This will be helpful to both screen reader users and visual users. You should still include a simple alt text for the image.
- If the image is a link, the alt text should describe where it goes.
- Avoid text in your images; it’s often hard to read and can clash with your site design. Large chunks of text belong in the body content of your page, not the images. Not all images used on a site will include alt text, so text in images won't always be available to a screen reader. Additionally, some text may be clipped, depending on where the image is used.
- If you must use text in your images (in logos, for example), use the PNG image format to ensure it renders cleanly, and use high-contrast colors to separate the text from the background visually.
- Your images should be named descriptively, with relevant keywords. This will help you and other content authors find them in your files library, and it is also good practice for SEO.
- When uploading images, keep web accessibility practices in mind. Consider, for example, the level of color contrast in your images, whether your GIFs move quickly or flash, or whether you have an image with text that a screen reader cannot read.
Automatic Cropping
If you upload images that don’t match the aspect ratio of the frame they’re intended for (by uploading a square image for a 16 x 9 frame, for example), we’ll automatically crop and, if necessary, resize your image to fit.
Our system tries to preserve the essential parts of your image by centering any crops on detected faces (and other important elements), but no automatic system is perfect. It’s always best to check how images look on desktop and mobile devices after uploading them. Your site's desktop and mobile layouts can have different aspect ratios for image frames, so make sure you don't just check one device.
Generally speaking, it's best to ensure your images fit into an aspect ratio of 16:9, 4:3, or 1:1, with a central focal point so they are less likely to be cropped.
Our automatic cropping algorithm favors face detection over text, so, once again, it’s best to avoid images containing text as a general rule. At the very least, if you upload images containing text, double-check all of these images across multiple devices to ensure your image text has been retained.
Background Images
A website's background image sits behind the page content and helps define its appearance. We've developed the OC Featured Background content type to add background images on your homepage or in sections of your site.
Background images will expand or shrink to fill the browser window's width. Because the size of this window will vary by device and screen size, there’s no list of background image attributes that are perfect for every visitor. We can, however, recommend a good compromise:
- Image size: at least 2000 px wide
- Format: JPEG
- File size: 300 - 500 KB
This is slightly larger than the most common screen resolution for desktop computers (1920 x 1080) to ensure that your image fills the viewer's whole screen.
If your site theme allows your background image to extend into header space, a taller background image (2000 x 1500) will work better.
Tips and Tricks
- The focal point for your background image will depend on the theme of your site. However, images that lack a distinct focal point are more compatible across different devices.
- If your site theme has a white or light-colored welcome message, consider applying a dark gradient to your background images so they’re darker at the top of the screen. This will help the text stand out. Alternatively, you can apply a background color to the welcome message itself.
- If your image is much wider than it is tall, check Fade from image to solid color when image is shorter than the page. Your image will fade smoothly into the background color as users scroll down.
We don’t recommend uploading images more than twice as wide as they are high. These are great for showing off your city's natural surroundings on desktop screens but render awkwardly on mobile and tablet screens.
Images on Pages
Many of the modules in the CMS come with image fields of various sizes.
If you’re an OC Site Designer or OC Site Manager, you can inspect and change the size of your site’s content images by going to More > Theme Management > your theme > Images sizes. You can also inspect an image in your browser to find exact pixel measurements.
The dimensions of content images, which are the main images uploaded to the page's image field, vary by which template is used and are also affected by the devices your site visitors use to access your site; images are rendered at different sizes depending on whether people are viewing pages on a desktop, tablet, or mobile.
A safe compromise for all images uploaded to the page image field is:
- Image size: 900 pixels wide
- Format: JPEG
- File size: Around 200 KB
The above image size is recommended to fit all content types with multiple templates, so you can choose an image that will still render correctly if you change templates. However, if your style guide notes that content authors must use the default template for all content types, you may have many pages that use the default page image. If this is the case, you may choose to use images with a width of 480 px.
The aspect ratio of your images (how tall they are compared to their width) doesn’t matter too much, so long as the difference isn’t too extreme – we automatically crop images to fit your site. Images will shrink or expand to fit the container, and the system will clip any excess, so it’s a good idea to ensure the subject of your images is in the center of the frame in case this happens.
A Featured Image, which is found on the OC Elected Officials content type, takes up the width of the main content area. It should also be roughly 900 px wide and not too high so site visitors can see what's below the image.
Rotating Banners
Rotating banners can be placed on your homepage or any content type with a WYSIWYG Editor. They highlight visual content and publicize your website's events, facilities, and other items.
Most banners are the width of the main content area.
The ideal properties for these are:
- Image size: 1140 px wide
- Image format: For most images, JPEG. If your slider contains text, use PNG
- File size: Up to 500 KB
Homepage banners can also be full-width if your theme has been set up this way.
For full-width sliders, the ideal image properties are:
- Image size: at least 1920 px wide
- Image format: For most images, JPEG. If your slider contains text, use PNG
- File size: Up to 500 KB
The height for banner images can vary, as specified in your theme, and there are different settings for different devices.
We’ll automatically resize images that fall outside of these dimensions, but it’s best to upload images that are at least as big as what we’ve suggested above. When images don't meet these dimensions, they need to be upscaled, resulting in poorly rendered or clipped images.
Please note that even if the recommended dimensions are used, there is still the potential for clipping on the left and right sides of images. For this reason, we recommend using images without any text. For more information about accessibility concerns with banners, please see our Rotating banners content.
Image Galleries
Image galleries are great for organizing and showing many images at once. They can be added to any page with a WYSIWYG Editor and will display in a left-to-right grid. If you want them to have a uniform presentation, you must ensure that the images' dimensions are the same.
The ideal properties for these are:
- Image format: JPEG
- File size: Up to 500 KB
When a user clicks on an image in a gallery, it expands to the dimensions of the original file. If the image's dimensions do not fit the browser window, it shrinks until the whole image fits inside the browser. For this reason, there is no recommendation for the size of gallery images.
Icons
There are many places on your site where you will need icons, such as the Top Tasks menu, in the utility bar, or on maps and the site footer. These icons can be custom icons that you upload yourself. They should have the following attributes:
- Image size: No smaller than 22 x 22 pixels and no larger than 72 x 72 pixels. (We will automatically downscale images larger than 72 x 72)
- Image format: JPEG or PNG
- File size: 10 to 20 KB
We recommend using a PNG image that is 60 px wide for Top Task icons.
Images for Social Media
You can upload general-use images in a format suited to social media. This means the same photos can be used across your site and your organization's social media presence. For example, the current recommendation for images on Facebook posts is 1200 x 630. Using this dimension on content page images increases the likelihood that content shared by your team or community will generate nice link previews.
You can create a folder in your Files Library for images that have the correct dimensions for a default news or events page template. That way, your content authors will always have a reliable set of images to choose from. If you want to do this, we recommend creating some rules, such as sizing and resolution guidelines, and finding attribution-free images that you can modify and that all your content authors can follow while sourcing imagery.
Where Can I Find Good Images?
Stock Image Libraries
You may choose to use stock images on your site. A few stock image libraries have a wide selection of images, although, where possible, you should use images you have created yourself or from your community. Regardless of where you source the images, you must ensure that you have permission to use them (including permission to edit and publish them if necessary).
If you want to find stock images, you can check out services like Shutterstock, Getty Images, Unsplash, and Foter.
Your Community
Images from your community are usually better than stock photos because:
- They’re unique, and the images probably aren't being used in other places online.
- They're authentic and represent your area better than generic stock photos.
- They're likely cheaper than stock photo libraries, which may have subscription fees.
You can explore your area yourself and take photos, or you can ask your citizens for their photos. You could run a photo competition in your community or use an online form to get people to upload their own photos (make sure that you get their permission to use their images on your website).