We have no maximum width/height for logos. Rise will automatically shrink down your images even if you import a really big image.
There is similarly no maximum size for cover photos but avoid images that require exact cropping.
if you'll take a look at Adam's video here, he elaborates a bit about responsive images, the recommendation to avoid images that require an exact cropping, and our suggestion to focus on a conceptual scene. This starts around the 2:35 mark in his video.
Is there a reason that you need to modify your logo? Are you having difficulty with something?
It's not an exact size that the logo will be. Since Rise is responsive, the max height varies depending on the screen size of the device you're using.
Rise will scale the logo size up or down to fit the max height, while also keeping the proper aspect ratio. That prevents the logo from looking stretched or distorted.
If you have something you wish for us to take a look at, please feel free to share.
Thank you for the response John. I guess to clarify my question, I am asking what is the optimal proportion for the logo? I tried uploading a few different ratios (square, 3:2, 2:1) and I got different results each time. I'm hoping you can give me an answer so I can stop guessing :)
I have the same doubt. Every time I upload the cover photo in different sizes I've got different positions and results. I would like to know which is the size that works better but as I see no one really define it. What everyone says is "the bigger the better", that Rise is responsive and will shrink the image if is too big. Hope anyone gives us an answer.
I am trying to upload a cover photo and I've tried various sizes but I keep getting the same results. It takes my photo and zooms it in beyond recognition. I have attached a screen shot of how it looks as compared to the photo itself.
Denise - that source photo you're using is really tiny, only 720x380. Way too small for a cover photo. If you use a higher resolution one, it will work fine. Looks like you got it from Shutterstock. I know they have high resolution photos so you should be able to download a higher one from there.
Thanks for responding. That's what I was saying in my original post...I tried images of various sizes. I just attached this one to show what it should look like. But I have tried it with a very high res, medium res, lower res...still...same results.
Adam - can you please recommend a ratio for us to use? I am having the same issues as the group above. If I post things to Youtube, they recommend a specific ration to use and it's perfect. For Rise, I can't seem to see what I should use. Thank you!
Caryn - YouTube videos have a fixed size of 16x9 regardless of the device
that they are played on. That’s why they can specify a specific ratio. But
cover photos have different ratios depending on the device they are viewed
on. Play with the responsive previews and you’ll see what I mean. For
example, compare portrait phone to landscape phone.
If you can upload a cover photo you’re working with I can make some
recommendations.
I am also experiencing unexpected results with the cover image. I have tried images of all sizes, and the end result is always blurry, with some of the image bleeding off the sides. Can you please take a look at the attached images? The Header_Team_GSII_HiRes.png is the cover image I want to use. The Cindy_Lyons_CoverImage.png is a screenshot of what it looks like, uploaded.
I have tested this extensively and you will never be able to ensure that your Rise cover image with logos or text will appear properly using Articulate's one-image approach. Unfortunately, Articulate frequently points to https://articulate.com/support/article/Best-Practices-for-Images-Videos-and-Audio-in-Rise-Courses#images, which doesn't really address how to control what appears in the available screen space on any specific device.
Because of the limitations to the one-image cover image in Rise, our branding solution was to use a logo watermark with a 50% text contrast (see attached file: rise_coverimage.jpg). The second attached file (Rise - logo1.png) shows it placed in a Rise course.
Earlier this year, we published an Apple iMessage add-in app as a charitable fundraiser and we had to provide the iTunes Store with more than a dozen different images to handle all the devices, screen sizes, orientations, etc. Creating the extra files was not that onerous if the graphic designer knows the size specifications. While there may still be some Rise image zooming required (depending on the device), there would be far less chance that a logo/text will be covered up using the multiple vs single cover image approach. With media queries, it is virtually instantaneous.
For example, try the following w3schools.com example (resize the browser window and the image swaps at 400px).
FEATURE REQUEST: Provide Rise authors with the option to design and upload additional cover images that will show based on device size and orientation. Articulate can specify the required dimensions for each uploaded image; then automatically swap out the image(s) using CSS based on the user's device size/orientation.
Note: The same image control problem occurs with the "Image full width" and "Text on Image" blocks and these blocks would also benefit from Articulate allowing Rise authors to design and upload additional alternative images.
Thanks for sharing those images here. Our team was also recently discussed this and submitted a feature idea on cropping of images and allowing for more author control of that. We'll include this discussion in that feature request - so that we can keep you posted here!
In the meantime, the best practices for working with images in Rise are detailed here.
The cover photo is set to "cover," which means it is going to cover the entire width of the image space no matter what. Your image space is always going to be different depending on what kind of device you're using. You can, however, change the height of the image by modifying the HTML. This will show more of the photo (vertically). If you are not sure how to do this, let me know and I'll post.
Thank you, Adam, for giving a concrete response that Denise's image at 720x380 was too small. It would be helpful to know what is the bare minimum size required for a cover photo.
Hopefully Quinn is still subscribed here, but you are certainly welcome to reach out to the user directly via the 'Contact Me' option on the user profile if you do not hear back soon.
Hi, what size is require for a cover photo...I have read the information & makes mention rise will format....however the image is too large for the area....can someone advise..
Is it better to use jpeg or png image.....any suggestions would be appreciated
I had success using an image measuring 2048 x 725 px for my cover photo. Not sure of the exact ratio but everything I needed to display did so without being cropped.
I found that if I set up a photo with the main point of interest centered vertically and horizontally in the image frame, it works for both landscape views and portrait.
I also had trouble with the cache keeping the older version as I tried out various positions of my image in the frame. I fixed that by adding a number to the file name for each new version. ftpLogo1.png ftpLogo2.png, etc.
Here are some samples showing the whitespace in my uploaded image and how the logo itself displays on various devices.
(I don't normally include text in my cover photos but wanted to emphasize to the learners what FTP stands for.)
42 Replies
We have no maximum width/height for logos. Rise will automatically shrink down your images even if you import a really big image.
There is similarly no maximum size for cover photos but avoid images that require exact cropping.
if you'll take a look at Adam's video here, he elaborates a bit about responsive images, the recommendation to avoid images that require an exact cropping, and our suggestion to focus on a conceptual scene. This starts around the 2:35 mark in his video.
Hello, John - What size (width/height) does Rise automatically shrink down the logo to? I'm trying to modify our logo with this 'shrinking' in mind.
Hello Christy and welcome to E-Learning Heroes :)
Is there a reason that you need to modify your logo? Are you having difficulty with something?
It's not an exact size that the logo will be. Since Rise is responsive, the max height varies depending on the screen size of the device you're using.
Rise will scale the logo size up or down to fit the max height, while also keeping the proper aspect ratio. That prevents the logo from looking stretched or distorted.
If you have something you wish for us to take a look at, please feel free to share.
Thank you for the response John. I guess to clarify my question, I am asking what is the optimal proportion for the logo? I tried uploading a few different ratios (square, 3:2, 2:1) and I got different results each time. I'm hoping you can give me an answer so I can stop guessing :)
I have the same doubt. Every time I upload the cover photo in different sizes I've got different positions and results. I would like to know which is the size that works better but as I see no one really define it. What everyone says is "the bigger the better", that Rise is responsive and will shrink the image if is too big. Hope anyone gives us an answer.
Hi Anna!
Due to the responsive nature of Rise, this may be the expected behavior.
Justin and Adam explain it best here.
If there is something that you would like our team to take a look at, you are welcome to share here.
Hi all,
I am trying to upload a cover photo and I've tried various sizes but I keep getting the same results. It takes my photo and zooms it in beyond recognition. I have attached a screen shot of how it looks as compared to the photo itself.
Denise - that source photo you're using is really tiny, only 720x380. Way too small for a cover photo. If you use a higher resolution one, it will work fine. Looks like you got it from Shutterstock. I know they have high resolution photos so you should be able to download a higher one from there.
Hi Adam,
Thanks for responding. That's what I was saying in my original post...I tried images of various sizes. I just attached this one to show what it should look like. But I have tried it with a very high res, medium res, lower res...still...same results.
Can you attach the high res for us to check out?
Adam - can you please recommend a ratio for us to use? I am having the same issues as the group above. If I post things to Youtube, they recommend a specific ration to use and it's perfect. For Rise, I can't seem to see what I should use. Thank you!
Caryn - YouTube videos have a fixed size of 16x9 regardless of the device
that they are played on. That’s why they can specify a specific ratio. But
cover photos have different ratios depending on the device they are viewed
on. Play with the responsive previews and you’ll see what I mean. For
example, compare portrait phone to landscape phone.
If you can upload a cover photo you’re working with I can make some
recommendations.
I am also experiencing unexpected results with the cover image. I have tried images of all sizes, and the end result is always blurry, with some of the image bleeding off the sides. Can you please take a look at the attached images? The Header_Team_GSII_HiRes.png is the cover image I want to use. The Cindy_Lyons_CoverImage.png is a screenshot of what it looks like, uploaded.
Thank you.
I have tested this extensively and you will never be able to ensure that your Rise cover image with logos or text will appear properly using Articulate's one-image approach. Unfortunately, Articulate frequently points to https://articulate.com/support/article/Best-Practices-for-Images-Videos-and-Audio-in-Rise-Courses#images, which doesn't really address how to control what appears in the available screen space on any specific device.
Because of the limitations to the one-image cover image in Rise, our branding solution was to use a logo watermark with a 50% text contrast (see attached file: rise_coverimage.jpg). The second attached file (Rise - logo1.png) shows it placed in a Rise course.
Earlier this year, we published an Apple iMessage add-in app as a charitable fundraiser and we had to provide the iTunes Store with more than a dozen different images to handle all the devices, screen sizes, orientations, etc. Creating the extra files was not that onerous if the graphic designer knows the size specifications. While there may still be some Rise image zooming required (depending on the device), there would be far less chance that a logo/text will be covered up using the multiple vs single cover image approach. With media queries, it is virtually instantaneous.
For example, try the following w3schools.com example (resize the browser window and the image swaps at 400px).
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image_mediaq
FEATURE REQUEST: Provide Rise authors with the option to design and upload additional cover images that will show based on device size and orientation. Articulate can specify the required dimensions for each uploaded image; then automatically swap out the image(s) using CSS based on the user's device size/orientation.
Note: The same image control problem occurs with the "Image full width" and "Text on Image" blocks and these blocks would also benefit from Articulate allowing Rise authors to design and upload additional alternative images.
Hi Donald and Cindy,
Thanks for sharing those images here. Our team was also recently discussed this and submitted a feature idea on cropping of images and allowing for more author control of that. We'll include this discussion in that feature request - so that we can keep you posted here!
In the meantime, the best practices for working with images in Rise are detailed here.
Hello, Robert,
The cover photo is set to "cover," which means it is going to cover the entire width of the image space no matter what. Your image space is always going to be different depending on what kind of device you're using. You can, however, change the height of the image by modifying the HTML. This will show more of the photo (vertically). If you are not sure how to do this, let me know and I'll post.
Hope you've found your solution!
Thank you, Adam, for giving a concrete response that Denise's image at 720x380 was too small. It would be helpful to know what is the bare minimum size required for a cover photo.
It would be great to even get the ratio or dimensions of the Cover Photos included with Rise so we can use this as a baseline.
Can you post this please. Thanks!
Hello Stuart and welcome to E-Learning Heroes :)
Hopefully Quinn is still subscribed here, but you are certainly welcome to reach out to the user directly via the 'Contact Me' option on the user profile if you do not hear back soon.
Hi, what size is require for a cover photo...I have read the information & makes mention rise will format....however the image is too large for the area....can someone advise..
Is it better to use jpeg or png image.....any suggestions would be appreciated
Thanks
Hi, please advise...thanks
It would be great if there was a page we could reference that had the size ratios for all of the different image types we can use in Rise.
For example I have included a link to a reference page I use when developing Wordpress websites using a particular theme: https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi
This is slightly more detailed than such a page for Rise would need to be but gives a flavour of what users might find helpful.
I had success using an image measuring 2048 x 725 px for my cover photo. Not sure of the exact ratio but everything I needed to display did so without being cropped.
I found that if I set up a photo with the main point of interest centered vertically and horizontally in the image frame, it works for both landscape views and portrait.
I also had trouble with the cache keeping the older version as I tried out various positions of my image in the frame. I fixed that by adding a number to the file name for each new version. ftpLogo1.png ftpLogo2.png, etc.
Here are some samples showing the whitespace in my uploaded image and how the logo itself displays on various devices.
(I don't normally include text in my cover photos but wanted to emphasize to the learners what FTP stands for.)
This discussion is closed. You can start a new discussion or contact Articulate Support.