There are a number of factors to account for when using images in hero unit sections of your website. Push10 has an excellent primer, and here is a helpful excerpt:
By default, the ideal website hero image size for full-screen background images is 1,200 pixels wide. However, if users are browsing on larger screens, these images need to scale up to fill the screen. This can often introduce some blur into the image. If the image is just a background image, this blur is often acceptable – even desirable. But if the image is a foreground image, or contains vital elements that must be sharp, we will often create larger source images in the range of 1,800 pixels or so. The upside? Sharper images. The downside? Larger files which lead to longer load times.
Whether you’re using the featured image or the add media feature you upload your files to ProudCity just like you would attach a file to an email.
Once you have selected and uploaded a file, make sure to fill in the file details: title, caption, alt text and description. This will help with SEO and in the future when searching the media library to reuse the file.
Once files have been uploaded to ProudCity they live in media library for future use so you do not need to upload a new file every time you would like to use media in your content. If you are diligent with you file descriptions as mentioned above, the search feature will be even more helpful as your media library goes.
Editing image in the dashboard
Once media is inserted into your content you can double click the image to get some quick edit options to format your text around your image.
If you click on the pencil icon you will get even more options for editing your media, including editing the size of the image. We recommend that you use the present thumbnail, small, medium, large and full size settings for consistency. If you need even more advanced editing capabilities, you can select “edit original” to rotate, crop and customize dimensions.
Credit and licensing
There is a lot of free media out there, make sure that you are getting permission and licensing if you’re using media that you did not create or pay for.
Creative Commons (CC) is the most common media license to encounter on the web, and essentially breaks down into 3 concerns (the actual licenses are more nuanced, but the gist is):
Use my stuff, just cite me!
Use my stuff, just not for commercial uses and cite me!
Use my stuff, but you can’t change it and cite me!
Featured images are pre-formatted into some of our content types and templates such as news posts and departments. Oftentimes the feature post is highlighted in the header of content and previewed as a thumbnail on another page or list.
The add media option provides the admin with more flexibility to post media throughout their content. Simply put your cursor where you want the media to inserted and select add media to start the process.
Media input with the “Add Media” method will not show up in teasers lists, however. To have an image display in the teaser view and to take more direct control over the appearance of a post, simply check the “Hide Featured Image” checkbox on the edit page after selecting a featured image.
There are some instances where a “portrait” (taller than wide) or “landscape” (wider than tall) style image may look awkward or not fit nicely into your content. If you are starting from a very large image, it could be possible to crop (see below) the image to the appropriate aspect ratio. Often it is just easier to select a new image.
No minimum file size but some displays of images will not look great if you’ve started with a smaller image. For instance, the “Page Header” widget in “Header” or “Full Header” mode really needs an image at least 1100px wide to not become visually distorted.
ProudCity recommends that video and audio be posted through a free online account like YouTube. These services automatically make video streamable to mobile devices, and will easily reach the broadest audience. YouTube has the additional benefit of being consumable by the home page Social Wall.
Not especially. The standard file types listed above all have some level of “compression” and will be fine for web-based publishing. There are certain, more rare, image formats like .tiff and .raw that are “un-compressed,” will likely be too large for easy viewing on the web, and should be avoided.
Because government serves a wide constituency, structured content in web pages is critically important in addressing the needs of all website visitors. It is particularly important for presenting truly accessible web content.
While ProudCity addresses many content structure issues “behind the scenes,” whether you’re using the our visual or text editors, it’s important to understand the basics and best practices of structured content as you design your web pages.