Depending on the blog style you plan to use, each one uses different featured image sizes, while some may be more flexible, this tutorial gives you a guideline for you. Please note that I only provide widths in pixels (px) and not height, because your height can be almost anything you want…
- Blog Style 1 – Maximum width 720px
- Blog Style 2 – Maximum width 720px
- Blog Style 3 – Maximum width 1140px
- Blog Style 4 – Maximum width 400px
- Blog Style 5 – Maximum width 560px
- Blog Style 6 – Maximum width 560px
Blog Style 5 If you use the Grid blog style, I recommend you keep your featured image height as consistent as possible so that each row is equal in height for a more uniform layout. If you can make your images the same height, this would be the ideal solution. However, if you are using the Masonry Blog Style 6, then height is not an issue.
Page Images (Including Featured Images)
If you plan on adding large images to your pages, such as a “Featured Image“, you can have a maximum of 2350 pixels! The reason for this width is because this theme includes custom page templates that let you go fluid — means 100% the width of your allowable screen resolution and browser window.
- Regular Page Templates – Maximum width 1140px
- Fluid Page Templates – Maximum width 2350px
If you are wondering if these sizes applies to the “Banner” sidebar position, it does! The only exception is that the banner sidebar is full width (100%) of your viewable screen. Although you can have any width, you may want to consider people who have high resolution screens, such as 2560 pixels in width.
To accommodate these huge resolutions, you may want to use banner images that will fit these larger resolutions. For example, I use a 27″ monitor with a resolution of 2560×1440 pixels…that is huge, but this also means if I were to expand your website, you can have a banner image that is big enough to fit that from left to right of my screen.
Another example is the live demo site for Influential…if you were to expand the browser window on a large screen resolution, the original banner image is 2560×750 pixels at its biggest viewing size.
With Influential, your images and graphics are responsive. This means as you reduce your viewing window, your images will automatically self-adjust by reducing their size to fit the reduced view. This is why when you view a responsive website in a tablet or phone, your images will shrink to fit.
Also remember that image height will be relative to the width as they adjust to the viewing window. For example, if you have an image that is 800×600 and you reduce the screen by 50%, your width will be 400px which means the height will be 300px.
Caution Try to avoid adding a fixed with to an image or graphic because this could cancel out responsive image styling. If you force an image to be 1000px in width, even in a phone or tablet, your image will still be 1000px in width and will cause a horizontal scrollbar in your window.