Optimal image sizes to upload to the asset library

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:

  1. Navigate to Assets.
  2. On the Asset you wish to resize click Edit Asset
  3. In Edit Asset click Image Sizes on the left hand menu
  4. Select the image size you need and click Resize Image


As a general principle always upload the maximum image size you will need to use.

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?

Thanks

Hello Nick, we’d recommend that Hero images be 1440px wide as this will cover you for our largest image width.

Currently in Bloom our theming doesn’t cover adjusting hero images to the same extent as in Evolve. What are you trying to achieve?

Thanks

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.

Thanks @Andy_Moorman - always appreciate your input.

Hi fellow Evolve users & friends,

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:

  1. Navigate to Assets .
  2. On the Asset you wish to resize click Edit Asset
  3. In Edit Asset click Image Sizes on the left hand menu
  4. Select the image size you need and click Resize Image

Thanks for your insights and patience :slight_smile:

Hi Beth!

The image resizing is carried out automatically by Evolve now when you upload your original image - no manual work needed!

It also chooses the right image to display based on the screen size and dimensions being used by the viewer.

Thanks for the feedback.

While I have your attention as both an Evolve expert and a design expert, can you help me solve a conundrum?

The image I posted above is unreadable for the learner. How can I improve this? Would you suggest I use a zoom-in feature? Does that exist in Evolve?

If I can do both I would be delighted. Please share your insights and expertise.
With gratitude,
Beth

1 Like

Hi Beth!

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.

image

1 Like

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 Gary,

There is no Image Sizes view in the Asset library, what are you wanting to 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!

1 Like

Yep - my 15 Jun reply - “The image resizing is carried out automatically by Evolve now when you upload your original image - no manual work needed!”