Implementing Images in Your Content
Below you’ll find three different ways to include images in your content. These are suggestions, and the best one will be based on your content and how you prefer it to look.
Right or Left Align Images
Best to use when just simply adding an image to a page (ex. T1 content) where it’s okay for the content to wrap in and around the content. This prevents large gaps below the image if the content is taller. You have complete control over image size and aspect ratio.
Right Aligned Image
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Left Aligned Image
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Media + Text Block
Great for when you want to place text and an image side-by-side, but not integrated and wrapped within the text (like above). Allows for additional alignment options and greater control over each column’s width. One con is that you cannot adjust the image’s aspect ratio and size like a standard image block.
Horizontal Middle Aligned
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Top Aligned
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Advanced Columns
Advanced columns are good for putting basic content (paragraphs, lists) into columns. You can definitely place images within the content, but if your content and images are not the same size, you may get some gaps between the content above/below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in.
Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tips on Choosing Images
Remember: Don’t use Google Images, Pinterest, or social media to find your photos!
Stock:
- Stock images have sets of laws attached to them.
- Copyrighted images can only be used if you have permission from the creator or whoever owns the rights.
- Creative Commons: Sets of licenses that allow different levels of usage
- There are quicker options
- Some sites such as iStock.com require you to pay to use the images
- Free sites like Stock Xchange and Flickr use Creative Commons. Pay attention to which license is on the images
- Be sure to give credit if using a stock image
Self-Taken:
- You own the rights! This means you can change, manipulate, and edit the photo as you wish.
- You avoid any sort of copyright issue that could come up.
- Adds a personal touch and makes your site unique because that image isn’t going to be found anywhere else.
- It does take time between taking the photos and editing them.
Image Checklist
- Be relevant: Don’t post something off topic
- Support your content: Product photos, graphs, charts, etc.
- Convey proper mood: Images are the first thing your viewer sees. Don’t confuse them between the text and images.
- Add Alt Text: This helps for accessibility, SEO, and AIO.