Image Size Guide
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.
Factors That Influence Image Sizes
Slider Image Sizes
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 on the right 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.