You can boost engagement and interactions with your workplace team members by using high-quality images and video in your content. In general, you should always design for mobile screens first, which vary widely in size and dimensions.
The Media Library is where you store your favourite images for use in content creation. You can upload logos, banner images, background images and pictures of your workplace.
- JPEG / JPG: This is the most common image format for digital images. These files tend to have more compression, thus reducing quality. Ensure the image you are uploading is sharp and in high definition.
- PNG: Although not as compressed PNG images are data-rich and sharp. PNG images are highly recommended to create high quality and engaging content.
Here are some great sites for obtaining high-quality free images:
💡 Tip: Do not use images that contain text. The text may get distorted or cut off when the image is resized to fit a user's mobile screen. In addition, this causes an accessibility issue for users who are relying on screen readers, which cannot read it. Instead, use a Hero content block that adds a title and subtitle as readable text on top of the image, or Heading and Paragraph content blocks to add information above or below an image.
Images are resized and optimized for viewing depending on the user's mobile device or browser, so it is difficult to specify exact dimensions. In general the recommended dimensions for a modern, mobile device are:
- Tall: 896 x 560px
- Medium: 896 x 308px
- Short: 896 x 229px
The exact dimensions are less important than the aspect ratio of length versus height:
- For a landscape image, crop to an aspect ratio of 16:9,
- For a portrait image, such as a person's head and shoulders, choose 4:5,
- For an image that is mostly balanced and square in proportion, use 1:1,
- A 9:16 should only be used as a background image, since it would fill the mobile screen.
Do the images look blurry? Pixel density is the measurement of how many pixels fit into a square inch of screen space. The more pixels, the sharper the image will appear.
As long as the image is least about 1024 pixels wide horizontally, the image should appear clearly. The standard resolution for web images is 72 PPI (often called “screen resolution”). Most modern cameras, even on mobile phone have a resolution of over 10 Megapixels, well above the minimum requirements.
If the image appears blurry, it may have degraded in resolution by being compressed and sent as email attachments, or downloaded from websites that lowered the resolution. Try to find the original high resolution version, or take an alternative image.
Images and text can be placed into grids or as a mosaic using containers. In the example below, images and associated text are placed in row containers, which allows for a pleasing effect and is easy to read.
Adding videos to your content is easy. While there are lots of video hosting and streaming platforms out there, we use YouTube as the gold standard.
Link to a video
You can link to a video on any website, not just YouTube, by inserting an Info Row, or a Link Row. Drag and drop the content block into the layout, then click on Link to insert a link to the video site.
Embed a video
To embed a video, drag & drop the YouTube Content Block into your Post or Page. Copy and paste the ID number of the video into the YouTube Video ID field.
For example, the video at the top of this page has the following ID:
YouTube channels can be made private so the videos you use in Lane are not visible to the entire internet. Although if your video goes viral, our hats off to you!
The Video Content Block allows you to embed any link that ends with .mp4. This is useful for sites like Vimeo that allow you to select the type of media player.
If you have any questions about images or videos, contact the Help Desk at firstname.lastname@example.org. We will be happy to help!