With Containers, you have a selection of sixteen preset masks and the ability to upload your own custom mask (in svg format). Selecting a mask then reveals all the other options, with which to modify the mask.

Once you have selected the mask, there is an option for mask size. The possible selections here are Fit, Fill, or Custom.

Fit is the default and allows the full mask to display as large as possible while at the same time making sure the full mask stays within the boundaries of the image.

Fill however, will make the mask as big as possible, so either on the left/right or on top/bottom the mask will get cut off at the boundary of the image, depending on whether the image is landscape or portrait.

Custom triggers a new option called Custom Size, which allows you to specify a size (any valid CSS unit) for the mask. The example below on the right is set to 70%.

Fit

Fill

Custom > 70%

Mask Position is the next option, which positions the mask over the image, and allows you to display different areas of the image. Here you have a choice of Top Center, Top Left, Top Right, Center Center, Center Left, Center Right, Bottom Center, Bottom Left, Bottom Right, and Custom.

If you choose Custom, a new option appears called Custom Mask Position, where you enter values in pairs, first for the X axis, and secondly for the Y axis, as coordinates for the position ex. 60% 50px.

Below from left to right, we have Center Center, Center Left, and Center Right. Note how different areas of the image are showing through the mask.

Depending on the Column size and the image, you might also want to employ the last Mask option, Mask Repeat. Here you have a choice of No Repeat, Repeat, Repeat X, Repeat Y, Space, and Round.

Below is an example of using the Repeat option, combined with a Custom mask size of 90px. There are many ways to use this feature, depending on your image, mask and desired outcome. As always, the best way to get to know a feature is to experiment. Go Wild!

Captions and Titles are fields that are already available in images in the Media Library, as you can see in the image below. When you upload an image you can add, amongst other things, a Caption and / or a Title. The media based Elements with captions then pull that information directly from the images to display using the new Captions styles.

For images that don’t have captions and titles embedded in the file, you can add them (or override them) in the Element itself. There is one main difference however, between the Image Element, and the Image Carousel and Gallery Elements. With the Image Element, you can add the individual caption and title text on the Captions tab of the Element as it is a single image Element, but with the Gallery Element and the Image Carousel Element, these Image Title and Image Caption options are found by editing the individual Element items, found under the Children tab.

The range of options on the Caption tabs of the three image-based Elements are almost identical, bar for the Title And Caption options mentioned above. But for a full list and screenshots of the options available on the Captions tab, please see the individual Element docs: Image Element, Image Carousel Element, & the Gallery Element

There are a range of Caption styles to choose from. By default, captions are Off. There are two simple caption styles – Above and Below, and then a range of five styled caption designs. These are code named Navin, Dario, Resa, Schantel & Dany. Let’s look at these caption styles individually to see what you can achieve.

As the name says, the Title and Caption are placed above the image with this selection. You can control the color and size of the fonts etc used with the Element Options.

This is exactly the same as Athe previous style, only this time, the title and Caption sit below the image.

This places a color overlay over the image. And we can see the title on the image itself. So here, when we mouse over the image, the overlay disappears, and the title lifts up so there’s room for the caption to slide in beneath it.

OK, Dario is the next style, and this one places the Title near the top, and upon mouseover a border slides in under the title, and the caption slides in from the other side

Resa is a very stylish design. It only shows the title initially, but on mouseover the title and caption are aligned in the center of the image, and a border appears around the inside of the image.

Schantel has the title at the top left, and the caption slides in below this on mouseover, with a background color. There’s also a new option with this style called Image Caption Background Color to control that color of course. There’s also a zoom in effect applied to the image with this style.

Finally, there is Dany. This puts the title at the bottom of the image, and on rollover, the image and title lift up, and the caption is presented with a background color. This option also has the Image Caption Background color option.

Image size is also directly affected by your choice of image format. This is a huge topic, and way too big for a tutorial such as this, but basically, there are two major file fomats you are likely to be using on your website, as well as a few more upcoming and possible formats. There are both vector and raster image formats, and each format has their own strengths and weaknesses. For a more detailed look at image file formats, view this excellent article at HubSpot, or this one at Kinsta.

JPG (.jpg or .jpeg) is the most common image raster format for the web, most suitable for photos. It compresses well (maintains quality relatively well for the file sizes you can achieve). It doesn’t support transparency, but it’s by far the most common image format.

PNG (.png) is also a very common image format, with specific strengths. It was invented to replace GIFs, and is a lossless format and also supports transparency. This means it is great for logos and other images that require transparency. It is also a good format for high quality photos, but the comparitive file size is much bigger than a jpg.

GIF (.gif) is a lossless format, meaning that a GIF retains all the data contained in the file, but they are smaller than JPGs, specifically because they only accommodate up to 256 indexed colors. GIF also supports transparency, but for logos, PNGs are a better format. This format is slowly being replaced by the .png format, but where GIFs still shine, is that they can be animated, and so are very useful in some situations.

SVG (.svg) is a vector format, which while having wide browser support, is not yet as easy a file format to implement as the others. It is however a great choice for logos, or other graphics you want to be tack sharp. Unlike raster formats seen in JPG, GIF, and PNG, an SVG image remains crisp and clear at any resolution or size, because they are mathematically declared shapes and curves, not pixels.

WebP is the new kid on the block, this file format is developed by Google, and was developed specifically to provide better lossless and lossy compression of images. This format does not have 100% browser support at this time, but there are ways around this using image optimisation plugins like ShortPixel. For more info on how to implement WebP with WordPress, check out this post.

Images that are too large are one of the main causes for slow loading websites. So if you want a really slow website, just upload images straight from your phone, camera or other capture device. These are often over 5,000px in width and up to six or seven megabytes in size. This will ensure your pages take forever to load. This approach is incredibly common, yet it doesn’t take into account the size (both in pixels, and in kilobytes, or even megabytes) of the image being uploaded.

But we all want fast loading websites, and so we need to consider these things. To do this, and to determine what size our images should be, we need to understand a few things about images, and about how big the space we are adding the images into actually is. The first thing to understand is how images for the web are sized.

For a start, forget about what ppi (pixels per inch) your image is. It makes no difference in a web browser, and doesn’t affect file size either. It is a printing instruction, and can be completely ignored with images for the web. Despite this, it’s a standard to upload images that are at 72ppi.

The most important figure to understand about images for the web is the pixel dimensions. Capture devices, like cameras and phones, capture images at a fixed aspect ratio and size. The longest length of an image is usually in the range of 3,000 – 7,000 pixels, but this depends entirely on the device. But this is what you most need to consider when preparing your images for uploading to a website. We will cover more on what’s an appropriate size, but as a very rough guide, images around 2,000 – 2,500 pixels on the longest length are considered the largest size you’d ever need to upload. In many cases, images around 600 – 1200 pixels would be more appropriate. And images that are only a couple of hundred pixels in width (like logos) will be fine in small Columns, but would pixelate if added to larger Columns.

When it comes to file size, this is determined by three things – the complexity of the image (an image of the blue sky will be much smaller than the same-sized image of a forest), the pixel dimensions of the image, and the compression applied to the image. There’s not much you need to know about the first one, and the second one will be determined by other considerations, but the compression is also important. This setting, available in virtually all graphics software and via image optimization websites or WordPress plugins, reduces the kilobyte size of an image and optimizes it for the web. The more compression you apply, the smaller the file size. But quality is also reduced. So, a balance between the two needs to be found. Check this comprehensive guide on image optimization.

So, now you know a bit about resizing images, and what formats to potentially use, how do you actually decide how big your images should be? Well, it all starts with your Site Width. You’ll find this setting in Avada > Options > Layout > Site Width. This can be a percetage value, but web design is still largely pixel based, and the current default width is 1200px (this is to do with screen reslolutions, which we will get to…)

Let’s say your Site Width is 1200px. That means that all the content on your site will display across 1200 pixels of the monitor it’s being viewed on. As an example, the content on this documentation, including the sidebar, is 1300px. (You can break the content out of this Site Width by using the 100% Width setting on Containers, or a slider, but again, we will get to that…)

Therefore, if you had a full width Column with an Image Element, an appropriate size for your image would be around 1200px. To determine the image size, we just need to consider the width (in pixels) of the area it will be added to.

So now, let’s say you have two one-half columns, and you want an image to display in one of them. How big does that image need to be? Well, around half of the Site Width would be a good starting point. So, around 600px. If you optionally wanted the image to be able to be opened in a Lightbox, you might initally upload a larger version (perhaps 1000 – 1500px) and then insert a 600px version into the column, and the full size into the Lightbox option of the Image Element.

In the example below, instead of being added via the Image Element, the image has been added to the background of the Column (to enable the overlaid Text and Button Elements). But it’s still being displayed in a one-half Column, and so an image size of approximately 600px would be appropriate. You could still enable a Lightbox with this method as well, only you’d do that via the Link URL and Link Target options in the Column itself.

Now, let’s say you want to use the image in the background of a Container that’s set to 100% width, or as an image in a full screen slider? Both methods break the image out of the Site Width, and now it’s a completely different consideration we have to take. Now, what’s most important is the screen resolution (or pixel width) your users are viewing it on. This can be tricky, as there are many different screen resolutions.

The most common is still standard laptop resolution (1366px). This is why the default Site Width is 1200px, so that the content fits on this screen resolution. But Full HD is resolution, and 4K monitors are gaining in popularity as well (3840px). Some iMacs even have 5K resolution (5120px). So, how do we take all these different screen resolutions into account? A common way to approach this is to use an image size of around 2,000-2,500px. This covers most screen resolutions, and it is not interpolated significantly except for 5K monitors.
In the first example below, the page is using the 100% width template, which means that any container background images go full width. The container itself is also set to Full Height. And so the image size needs to be large enough to fill the screen. In this case, the image used is 1803px x 902px, which is almost the size of an HD monitor resolution. This could be bigger, but here it’s being used as a background image, and so the quality is not as important.

Note: Just to be clear, if viewed on a 5K iMac, this 1803px image would be distributed across the full 5120px of the iMac’s screen (less scrolling bars), effectively reducing the quality of the image. But on a laptop, with a resolution of only 1366px, the image would be more than big enough and would be crisp. It’s all about finding a sweet spot between screen resolution and file size (which comes directly from your choice of pixel dimensions). If you were sure most of your users were using iMacs, you’d probably make this image closer to 4000-5000px, but it would then be a much larger file.

In the second example, the image is being used in a full screen slider. In this case, the image is sized at 2500px width, which on more than 95% of screen resolutions, would be larger than the monitor’s resolution and therefore be nice and sharp. With larger images such as these, optimisation of images using compression becomes even more important to keep file size, and therefore page load speed, down.

Once you know what the largest size is of an image you want to upload, then you need to prepare it. This simply involves resizing it to the desired pixel width, and then applying compression before uploading it to your server. To learn more about image compression, read this detailed blog post, or our own blog post on Image Optimization.

In short, you can use graphics software like Adobe Photoshop to compress your images for web as you save them. Alternatively, there are many good websites, such as Compressor. Additionally, you can also use image compression plugins, such as Short Pixel, to further compress image. A bonus is that you can also use such plugins to generate .WebP images on your site.

A well compressed image that has first been resized to the correct pixel values can be many times smaller than the original file. in the example below, you can see that the original jpg was 805kb, but that with 40% compression, the final size of the image came down to only 163kb, almost 5 times smaller.

As mentioned above, the size of the area the image will be displayed in is the major factor that determines how big it should be. Here are the main theme related areas that will affect this.

Example: As can be seen in the example below, if we start with a Site Width of 1170px (this is what the Charity Website has), but then use a dual sidebar layout, using the global option defaults, the sidebars combined take up 42% of the site width. This leaves approximately 679 pixels for the content area. And then there are the Column margins. So if adding an image in a one-half Column in this situation, it would only need to be around 330px width.

One crucial thing to understand – when uploading an image to your Media Library, a range of images of different sizes are automaically created at the same time. WordPress creates some of these (the Small, Medium, and Large Thumbnail sizes specified in WordPress > Settings > Media, and one unlisted intermediate size) and Avada itself creates a number of sizes to best suit certain situations. These image sizes are then automatically applied to different sections of the site. See the How Avada Controls Responsive Images document for more details on this.

When adding an image to the page content, such as through Elements, you’ll find the ‘Attachment Display Settings’ section at the bottom right of the Media Library. Your choices in this section also directly affect how your images display on the page, as here you are choosing which version of the image to use.

Step 1 – When you upload an image into the page content, the Media Library window will appear.

Step 2 – Select or upload your desired image. At the bottom right side of the window, find the ‘Attachment Display Settings’ section.

Step 3 – Under this section, you’ll find the ‘Size’ option. Using this option, you can select which size to use when uploading an image. You can choose between Thumbnail, Medium, Large or Full Size, plus a range of Avada size settings.

Step 4 – Choose the right image for the area you are adding the image into.

When uploading a background image to an Avada Builder Container, you may notice that only a portion of your image is displayed when viewed on mobile or tablets. This is how the theme naturally handles background images, and is not a responsive issue. The background image is first centered, then it will resize proportionally until the image’s width or height is equal to the container’s width or height (whichever is greater). For example, if you have a 500px x 500px image and a 100px x 350px container, then your background image will be resized to 350px x 350px. Please refer to the examples below for a visual representation of this.

Getting images right is a crucial part of a visually interesting and fast loading website. And there’s a learning curve to be sure. But the benefits to be had are numerous, and it’s all part of the fun of building and maintaining an Avada website!

When you add a background image to a container, this is what happens: Images set as backgrounds on containers span to the height or width of the container while maintaining their aspect ratio; effectively, always filling the container. But containers by themselves have no height at all, so it’s the content (or padding) that determines their height, and the Site Width setting that determines the width (or the screen it’s being viewed on with the 100% width template).

Let’s take a simple example to illustrate. In the diagram below, the image is 1200px wide and 800px high. Let’s also say that the site width has been set to 1200px in the Layout > Site Width option, the page is using the Site Width template, and that the container height is exactly 800px, either through content, or padding. In this case the image would display fully, at its native aspect ratio.

Now if the container height was increased to 1000px, either through content or padding, then the image will now display at 1000px height, and keeping its aspect ratio, 1500px in width. So here the image will be slightly zoomed in, and slightly cropped on both sides.

And here’s a real world example. The container below is completely empty (no column or elements) and has padding set to 200px in height. The image set as a background image is 1200px x 847px, and so grows slightly to the width of the site layout (in this case 1280px) and (on desktop at least) we can only see 200px of its height, in the middle of the image, as this image has a Background Position of Center Center.

But on a mobile device, something else happens. The site goes into responsive mode, and because the width of the device is so much smaller, but the padding of 200px remains, we get an image that is 200px high and at that screen width, we are seeing almost the whole image again. This is just how responsive web design works.

Things are also a little different when you add a background image to a page with the 100% width template. Then, it’s the user’s screen size that comes into play. With a large resolution monitor, for example a 4K monitor, which has a resolution of 3840px x 2160px, then images might have to upscale considerably. It’s always a balance between image file size and pixel size, and so a typical approach is when uploading a container background image on a 100% width template, is to ensure the image is at least 2000px in width, so the upscaling is kept to a minimum.

Here’s a final illustration, showing an example of a container on a page using the 100% width template, on a large monitor. The image displays at the width of the screen resolution (minus any scroll bars etc) and the image will be cropped in height unless the container height equals the images’ native aspect ratio. So for an image with a 3:2 aspect ratio and sized at 2000px, the container height would need to be around 1333px for no cropping to occur. So in most situations, some cropping will occur, and the image will be zoomed in. If your image is very pixellated in a situation like this, it’s because the uploaded background image isn’t large enough to upscale on a large monitor without pixellation.

On the left hand side, the column has simply been resized to 1/2. The full image displays, and is just scaled down to fit the 1/2 dimension. On the right hand side, however, content has been added that pushes the height of the column past where the apsect ratio of the image would make it. And so the height of the image is maintained, while the image is zoomed in on the sides, cropping the image, but keeping the aspect ratio intact.

Hopefully, this article goes some way towards explaining how images work as Container and Column backgrounds. There are a lot of scenarios we haven’t covered here, but the principles are the same. Web design can be complex, but with an understanding of the principles at play around the theme and how it interacts with images, then you can achieve a satisfying result every time.

Lazy Load is enabled in these areas and elements in Avada:

For more information on How Avada Controls Responsive Images, please see the linked doc.

The Image Carousel Element allows you to add beautiful image carousels to your website, with a minimum of fuss. Just add the Element to your desired column.

This is a relatively simple element with some basic styling options, but make sure to view the Image Carousel Element Demo page, to appreciate the different layouts and options on offer. The first two parent options relate to the images displayed on the carousel. Firstly, you need to select or upload the images you want to use, and then choose their size. The Bulk Image Upload option allows you to add all the carousel images in one go, instead of one at a time from the child options. Simply choose the images you want to add by clicking on Select Images and choosing images already in your Media Library by using the Cmd / Ctrl key, or by uploading and selecting new ones (these will be auto-selected). Once you have finished your selections, click Insert into Page. With the fixed size option, a fixed width and height are used, and so, if images chosen have a different aspect ratio or orientation, they will be cropped, so that all thumbnails have the same size. With the Auto option, the width and height will adjust to each image. For best results using the image carousel, it is recommended that you use images of the same size and orientation, to avoid cropping and unusual layouts.

The remaining parent options are styling options, like the Hover type, whether the carousel should autoplay, the maximum number of columns on the screen, as well as some spacing, scrolling, and border options. There is also an option for the individual carousel images to open in a Lightbox.

If you use Autoplay, there is a Global option under Options > Avada Builder Elements > Carousel, called Carousel Speed. You can adjust this to control the speed of the Carousel. This affects all carousels, not just the image Carousel.

Once you have set all your Parent Options, you add Child Items on the left. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. In this Element, this is a very simple section, where you can edit each image for the carousel, or add new ones. Each image can link to a URL if you wish, and there are options for the image links to open in a new window, and you can add alt text to each image.

If you wish to add additional images to the Image Carousel, you can then duplicate existing ones or add new images by clicking on the Clone Item icon, or the + Image button respectively.

Read below for a detailed description of all element options.