Help! What is the best quality for images for backgrounds in standard Storyline 2?
Nov 29, 2016
Hello! I have been searching on the forums and I found answers regarding it is best practice to resize your images before importing into Storyline. My question for you....
I am using standard size of 720 X 540. I downloaded and used a background image of 854 x 561 px (72 dpi)for a background on a slide. I imported directly into Storyline 2. When I published and tested my file (see link below), the background is blurry. What am I doing wrong? I am not a graphic designer. I am using Chrome to view as that is what the browser the end product will run on. Am I over thinking this?
Would it have been better if I did a larger size like 1690 x 1111 px (300 dpi) and then resized to the 720 X 540 before importing? Thoughts? Help?
Here it is as a sample. I know it will expire in 10 days so I attached an image of the output as well. http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/sto_1b2ovrb0k1a0n1neh16oan2d1slg9/story.html
Also, any additional insight of what size image files to use when working with Storyline 2? I find most my images to not be crisp upon export.
Thank you!
10 Replies
Hi Katherine,
You'll see our recommendations for the best quality images and videos detailed here. I took a look at your image and the link to your course and I didn't notice a blurriness - but perhaps you could share the original image too so that folks could compare the two?
Also, hopefully some of our community members will be able to chime in with their own ideas for best practices as well.
I also did not see any blurriness. I generally use a high-resolution PNG file that matches the aspect ratio of my project as closely as possible and make sure that the image output quality is at maximum.
I'll also confirm that I'm not seeing any blurriness, Katherine.
If it doesn't look blurry when you preview in SL, then it could be something in the browser. You may want to check that there is no zoom enabled in Chrome—Cmd or Ctrl -/+ depending on whether you have a Mac or PC.
Generally speaking, I'll work with as large of a source image as I can get. If you're using stock photography, this becomes a balancing act between credits and image size—usually the regular or large size will work well for a default 720x540 project. Just keep in mind that you can always scale an image down and not lose quality, but try to avoid having to scale it up from the original size. Like Scott, I also prefer PNG to other formats when working in SL2.
Hope that helps!
I didn't see too much blurriness either. Like Michael, I prefer to work with a very large/high-resolution image, and PNGs tend to produce the best quality (in my opinion) when used in Storyline.
Just like others have stated, I do not notice any blurriness at all. We like to use a story size of 900 x 540. For background pictures, we use Shutterstock and edit the size in Shutterstock before downloading to match our story size. No issues with blurriness at all. PNGs typically look better, but we use a lot of JPGs that look good too. Great suggestions from Michael Jones!
Hi Katherine!
I think because you've constrained the size of the player we're not seeing any blurriness; though if you were to allow it to go full-screen we would. Like others, I only use high-res images and largely prefer PNGs.
Thanks for the tip on the browser. My browser was set higher than 100%!
Thank you for the article. That is very useful. I did notice when I optimized the player output, it appears crisp. Thank you!
Thank you all for the feedback.It is all very helpful. I have now optimized the quality of images in the output, adjusted my browser settings, downloaded a larger .jpg and resized the image before putting into in Storyline. The results are exactly what I'm looking for.
Thank you again!
You're quite welcome, Katherine!
This discussion is closed. You can start a new discussion or contact Articulate Support.