The minimum image size we allow is 512px.
This is called a “Small Image” in the Evolve Builder.
Full width components, Hero Images, Header images etc will need to be a minimum of 1024px.
This is called a “Large Image” in the Evolve Builder.
Our largest image size is 1440px.
This is called an “Extra Large Image” in the Evolve Builder.
When uploading images we would recommend uploading at the size an image is likely to be used at.
N.B. If the image is only going into a ½ width component then 512px is fine but if that image is going to be used in a full width component or background image etc then we would recommend uploading at 1024px. Article dividers expect images that are a minimum of 1024px
In all cases Evolve can create additional image sizes as needed.
To resize images:
Navigate to Assets.
On the Asset you wish to resize click Edit Asset
In Edit Asset click Image Sizes on the left hand menu
Select the image size you need and click Resize Image
I understand the dimensions of the requirements for image assets. But when adding images to evolve courses there are various options to dictate the positioning and behaviour of the image in the course.
What is the best dimensions/proportions for the hero images in Bloom, they don’t appear to have the same controls on positioning and behaviour of the image?
What’s the best size for a card? I uploaded assets and made them in multiple sizes, but they look terrible as card and nothing like how they look in the training video.
Hello @Tiffany_Walz without seeing the original asset or course it is difficult to know where the issue is coming from. If you’re able please contact support.
I would start with an image at a higher resolution than the final intended use - so if the flip card is going to be a single one then at least 1440px. If it is going to be used alongside others in a row of 4 then 1024px should be enough.
If you want transparency make sure the image is a .png file not .jpg.
Finally check in your graphics programme that you are using at least 72DPI.
We are looking at getting a template Flip Card added here to help with image resolution.
We’ve found there are three things to consider when working with images. First, is the image size in pixels. Second, is the ratio of width to height. Finally, is the image size in MB.
For pixels - we generally create in-component images at both 1024 px and 512 px wide.
Headers and backgrounds are larger than 1024 px. For them we work at 1440 px and 1920 px - but I suggest you play around to find the best fit.
For ratios - Image height is a ratio of the width. If, for example, we want a portrait image it will be 1024 wide by 2048 high. If we want landscape it will be 1024 wide by 512 high. The main thing is to keep the width fixed.
For size in MB - we do all we can to drive the size down to improve load speeds. TinyPNG is pretty good and allows batch compression, but it has some limitations. Recently, Google launched squoosh.app which is pretty flexible and allows a lot of optimisation settings. It’s open source on Github.
When I try to follow the direction from Nov '17 to create additional image sizes I get to step 3 but I don’t see the Image Sizes on the left-hand menu? Did this screen change since these instructions were published?
To resize images:
Navigate to Assets .
On the Asset you wish to resize click Edit Asset
In Edit Asset click Image Sizes on the left hand menu
Select the image size you need and click Resize Image
It sure does! In the graphic component, add your image and then Turn on “View image in Lightbox” in the Graphic settings below. Magnifier is also available but this only zooms in on a small area of the image as displayed.
You will need to make sure you upload a larger version in pixels - say 2048? Whatever is readable at full size.
However another suggestion I have would be to make this a PDF that you can link to instead (or even as well as)? Especially if the text is readable by a screen reader for those who need it - it would be a much more accessible solution.
Hi all,
This is really good advice. I’m just wondering am I missing some privileges as I am unable to see the option for Image Sizes. Any advice on what I can do?
Hi Helen, it looks like this was removed in an earlier version as can see you’ve already answered this one. I’m looking at using Photoshop now to further prep my images so should be good here. thanks!
I have uploaded a hero image to the menu page with a width of 2048 pixels, but it still appears only on the page with a width of 1024 pixels.
Does it make sense? maybe the menu page has different settings?
Yes - the image is being restricted by the width of the menu page and it’s structure.
In the Theming you need to go to Menu > Layout and then either clear the max width or set the max width to be greater than 1024. If you then just want the image to be wider but not the items under it, use the Menu Items Max Width setting below that to control it.
