Images are a fantastic way to increase engagement with your audience and show off your site to the best of its ability. Online images are used in many different ways, and we have incorporated images into OpenCities as often as possible. However, images still need to be optimized for your site. We want to help make your site as beautiful as it can be. So here are some tips on what images will work best on OpenCities.
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 in OpenCities.
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 2 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: This measures how much disk space your images take up. It can be tempting to upload large images to maximize quality, but bear in mind that 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. As a general rule, it’s best to stick to images no larger than 500 kilobytes.
- 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 common file type that is well-suited to photographs and has a relatively small file size. Most images on your site should be JPEGs.
- PNG: great for technical illustrations and images with text in them as these files 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 useful for technical diagrams as they render hard edges cleanly, but today PNGs are a better option.
- SVG: these files are vector-based images, meaning they contain 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. These files are ideal for logos.
General tips
- Before you upload any images, make sure you have permission to use them.
- Use alternative text to describe your images for people who are reliant on a screen reader. 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 just used for design, should have empty alt text.
- 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, however, include a simple alt text for the image.
- If the image is a link, the alt text should describe where it goes.
- Try to 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 backgrounds 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.
- Keep web accessibility practices in mind when you're uploading images. Think about, for example, the level of color contrast in your images, if your GIFs move quickly or flash, or if 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 16x9 frame, for example), we’ll automatically crop and, if necessary, resize your image to fit.
Our system tries to preserve the important 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 both desktop and mobile devices after they’re uploaded. Desktop and mobile layouts for your site 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 it is 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 do upload images containing text, double-check all of these images across multiple devices to make sure your image text has been retained.
Background images
A website's background image sits behind the page content and helps define how your site looks. 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 full width of the browser window. 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 2000px wide
- Format: JPEG
- File size: 300 - 500 kilobytes
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 the natural surroundings of your city on desktop screens but render awkwardly on mobile and tablet screens.
Images on pages
Many of the modules on an OpenCities site 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 in the theme manager. To do this, go 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 image uploaded to 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 kilobytes
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 480px.
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 make sure 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. They should also be roughly 900px wide and should not be 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 and are used to highlight visual content and publicize events, facilities, and other items on your website.
Most banners are the width of the main content area.
The ideal properties for these are:
- Image size: 1140px wide
- Image format: For most images, JPEG. If your slider contains text, use PNG
- File size: Up to 500kb
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 1920px wide
- Image format: For most images, JPEG. If your slider contains text, use PNG
- File size: Up to 500kb
The height for banner images can vary, as it is 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 there is still the potential for clipping on the left and right sides of images even if the recommended dimensions are used. 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 500kb
When a user clicks on an image in a gallery, it will expand to the dimensions of the original file. If the image's dimensions do not fit the browser window, the image will shrink until the whole image fits inside the browser. For this reason, there is no recommendation for the size of images in galleries.
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 kilobytes
For Top Task icons, we recommend using a .png image that is 60px wide.
Images for social media
You may want to upload general-use images in a format suited to social media. This means that the same images 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 of images in your Files Library that have the right 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 which you can modify, which 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 need to ensure that you have permission to use them (including permission to edit and publish them if you need to).
If you want to find your own stock images, you can check out services like Shutterstock, Getty Images, Unsplash, and Foter.
Stock photos aren’t the only option – read on to Your community for some other ideas.
Your community
Images from your community are usually better than stock photos. Here's why:
- They’re unique: The images probably aren't being used in other places online.
- They're authentic: They represent your area better than generic stock photos.
- They're cheap: Photos you've sourced yourself will probably be cheaper than using stock photo libraries; or even completely free.
You can explore your area yourself and take photos, or you can reach out to 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).
If you have any suggestions for great ways to use images, leave them in the comments! We’d love to hear your ideas.