Below is a general guide on how to gauge how big or small your images should be to fit your website, as well as to look crisp and high definition on your viewer’s screens. The size of your images depend on multiple factors, such as your site width, sidebars, and sliders, among others. Continue reading below to learn more about these factors, as well as how to view the image sizes we use on our demo sites. Also consider reading our handy ‘A Comprehensive Guide To WordPress Image Optimization’ blog article to learn the basics of image optimization.
IMPORTANT NOTE: Generally speaking, image sizes will be unique to your own site setup. There is never a “perfect size” for all sites, it depends on many factors and is unique to each person’s site.
Factors That Influence Image Sizes
Site Width – Located in the Theme Options > Layout panel. This setting allows you to set the overall width of your site, which can affect how big or small your images will be. This also affects your columns, which will affect any images you display inside them.
Sidebars – Located in the Theme Options > Layout panel. Having a sidebar allows you to set a sidebar width, which can affect image sizes. Content width is automatically calculated.
Dual Sidebars – Located in the Theme Options > Layout panel. You also have the option to have 2 sidebars on each side of your website, and this can greatly affect image sizes, as well.
Individual Spacing – Image sizes greatly depend on individual elements’ spacing such as paddings and margins. A good example is column spacing that affects how wide columns are displayed on the page, which in turn affects how big your images in columns will display.
Slider Image Sizes
Fixed Width – If you’re using a fixed width slider, then the appropriate image size for your slider would be your slider width and height. For example, if you have a slider width of 1100px and a slider height of 500px, then your image size should be 1100px wide and 500px high.
100% Width – As for siders that are 100% width, the image size you should use depends on a few factors such as the screen it’s being viewed on, and the slider height. As a general rule, we currently use images that are 2000px wide for our demos which is usually big enough to make images look great on all common screen sizes. As 4K monitors penetrate the market in bigger numbers, this might have to increase. The height of the image depends on the pixel value you’ve set for the slider. For example, if you have a slider that is 100% wide and 500px high, then your image size should be around 2000px wide and 500px high.
Full Screen Slider – Images for Full Screen sliders fully depend on the screen it’s being viewed on. Because it’s difficult to tell what screen your viewers are viewing your site on, it’s best to use a general size that is big enough for all general screen sizes. As a guide, we use images that are around 2000px wide and 1100px high for full screen sliders on our demos.
Demo Image Sizes
If you’ve recently imported a demo and would like to know the size of a certain image on the demo, you can either check the Media Library for the corresponding image, or check the image on the front end directly. To view the images directly on the front end, please follow the instructions below.
How To View Demo Image Sizes
Step 1 – Locate the image you’d like to see the size of. For example, blog images on the Classic demo.
Step 2 – Right click the image, and select the ‘Open Image in New Tab’ option.
Step 3 – Once the image has opened in a new tab, you will see the size beside the image’s name on the tab. For example, imagename.jpg (500×500). If you cannot see the size, simply hover over the tab and after a while, the image name and the size will be displayed here.
Step 4 – Once you figure out the size of the image, you can then create your own image in that size then upload it to your site.
How To View Demo Image Sizes (Alternative)
In the event that you’d like to view the size of a Fusion Builder container background, or other images that cannot simply be viewed by right clicking it and selecting the ‘Open Image in New Tab’ option, then please follow the steps below.
Step 1 – If the ‘Open Image in New Tab’ option is not available, click the ‘Inspect’ option instead.
Step 2 – The Developer Console will appear on the right hand side of the screen. A portion of code will also be highlighted, which represents an area on your website. Hover over each block of code until the whole background is highlighted. Please refer to this image as an example.
Step 3 – Once you’ve found the block of code that represents the area you’d like to inspect, click on the block of code. In the Styles section below the Developer Console, find the ‘background-image’ section and you will see a URL. Hover over this URL to see the image thumbnail and the image size. Please refer to the image below as an example.
Fusion Builder Container Image Sizes
When uploading a background image to a Fusion 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.
Portfolio Featured Image Sizes
Each portfolio post that you create requires you to upload at least 1 featured image for the post to display. To learn more about the Portfolio’s Featured Image settings, please click the button below.
Attachment Display Settings
When uploading an image into the page content, such as through shortcodes, you’ll find the ‘Attachment Display Settings’ section. This section affects how your images display on the page. Please continue reading below to learn more about this section.
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. To the 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.
Step 4 – Set the ‘Size’ option to Full Size to guarantee that the image you’re uploading will appear crisp and high quality.