Hello all, when I do a screenshot of a web page to add to my slide in Storyline 360 the screenshot is blurred and it is the same problem if I use the screenshot tool from Storyline 360 or from an external screenshot tool and copy the picture... How can I get a clear screenshot ?? When I record my screen to make a video with SL 360 tool it is clear so I don't understand why I loose the quality of the picture when it is a simple screenshot. Can you help me?
It is a screen cap of a map? I know Google maps blurs itself when you take a screen cap of it. Otherwise I would check you monitor resolution or use snipping tool to try it again.
Are you scaling or stretching the image at all after you've inserted into Storyline? If so, that could account for the loss in quality so I'd start by reviewing the best practices here.
@Ashley no I don't need to scale or stretch the image because I take full screen so it's more or less the size of the slide in SL 360
And what I really don't understand is : why it's clear when I record a video of my screen with SL 360 tool but it's blurred when I take just a screen cap with SL 360 tool
See how the quality of the screen caps change... And I just uploaded the screen cap to the SL 360 Tool. There is a really lost of quality, it is blurred.
With your permission, I'd like to take a look at your project file and one of the image files that you've added so we can investigate what's happening. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.
When taking screenshots you need to ensure a couple of things.
The image should always be captured at the size you want to use and using formats such as png or gif are preferred over jpgs as the jpg algorithm will interfere with the look and feel. Screenshot should never be scaled either bigger or smaller as this will affect what they look like. If you are using a 720x405 slide size then you should not capture an image bigger that this.
Storyline prefers 96dpi images and some capture tools capture at a lower setting, these will be changed to 96 dpi on publish.
Finally check the output settings as image quality can be downgraded on publish.
I would hope it captures at 96DPI the biggest problem I have ever had is ensuring that the capture size matches the screen size, 720x405 is a small area so you may want to increase your slide size.
Above Leslies says one of your images is 1920x1013 spring that down to fit in 720x405 will reduce the quality of the image
Thanks for sharing your file so that I could take a look, Claudia. I replied back to you via e-mail in your case and it looks like you and Phil have reached the same conclusion.
Hi there. I am having this problem as well - blurry screenshots. How do I tell what size my screenshot is capturing at (I used SnagIt) what size my slide size is, and what size my screen size is? From what I am understanding all of these sizes must be very similar to avoid blurry screenshots? Thanks!
When using Snagit, the size of the screenshot will be displayed at the bottom of the image capture:
In Storyline, you can check the slide size by navigating to the Design ribbon >>then click on Story Size:
For your display, you'll want to be sure that the Scale and Layout are set to 100%. For more details on using images, we have a great resource that provides some tips here:
Hi, I am also having this issue. I've tried the steps described above - making sure browser and display resolution are 100%; taking a screenshot that's the same size as intended for the course; inserting as a PNG rather than JPEG...still it's blurry.
I see you've tried quite a few things already. Can you share the image file and your .story file with us? Just click here, and we'll reach out to you soon after we dig in and test things out!
30 Replies
It is a screen cap of a map? I know Google maps blurs itself when you take a screen cap of it. Otherwise I would check you monitor resolution or use snipping tool to try it again.
Hi Marie,
Are you scaling or stretching the image at all after you've inserted into Storyline? If so, that could account for the loss in quality so I'd start by reviewing the best practices here.
Hello, thanks for your answers!
@Jahan no it's not a Google Maps screen cap
@Ashley no I don't need to scale or stretch the image because I take full screen so it's more or less the size of the slide in SL 360
And what I really don't understand is : why it's clear when I record a video of my screen with SL 360 tool but it's blurred when I take just a screen cap with SL 360 tool
Hello Ashley, thanks for your answer!
No I don't need to scale or stretch the image because I take full screen so it's more or less the size of the slide in SL 360
Hello Jahan, thanks for your answer !
no it's not a Google Maps screen cap, it's a normal web page
Hi Marie,
Have you looked into the display/resolution of your monitor or even the browser while you take the screenshot? I'd try setting both of those to 100%.
What's your slide size in Storyline?
Hello Ashley,
See how the quality of the screen caps change... And I just uploaded the screen cap to the SL 360 Tool. There is a really lost of quality, it is blurred.
Thanks for your help !
This post was removed by the author
Hi Claudia!
If the original image is 2736 x 1824 and it's shrinking down to 394 x 607, that's a significant decrease in size.
We recommend that you start with an image size that has similar dimensions to the imported size.
If images are larger than your slides, they'll automatically be scaled down to fit, which can result in a loss of quality. Here are some tips for working with larger images.
This post was removed by the author
Hi Claudia,
Thanks for the additional information.
With your permission, I'd like to take a look at your project file and one of the image files that you've added so we can investigate what's happening. You can share it publicly here, or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.
Hello, thanks Claudia for your message !! I hope they will find a solution or I'll have to change my project or use another tool...
Hello Leslie,
can you check with the screen caps I uploaded before as well ?
Thanks
Oh, no! Sorry that we missed your reply, Marie.
I do see a difference based on the images you've shared.
Did you get a chance to look into the display/resolution of your monitor and browser and setting both of those to 100% as Ashley shared above?
What's your slide size in Storyline? It looks like your image size is 1920x1013 and
Hello Leslie,
I checked my browser setting and it is 100% and my slide size in Storyline 360 is 720x405 16:9.
I tried again to do screen caps and it is still blurred I tried to change browser (Internet Explorer and Google Chrome) but it is the same...
This post was removed by the author
When taking screenshots you need to ensure a couple of things.
The image should always be captured at the size you want to use and using formats such as png or gif are preferred over jpgs as the jpg algorithm will interfere with the look and feel. Screenshot should never be scaled either bigger or smaller as this will affect what they look like. If you are using a 720x405 slide size then you should not capture an image bigger that this.
Storyline prefers 96dpi images and some capture tools capture at a lower setting, these will be changed to 96 dpi on publish.
Finally check the output settings as image quality can be downgraded on publish.
This post was removed by the author
I would hope it captures at 96DPI the biggest problem I have ever had is ensuring that the capture size matches the screen size, 720x405 is a small area so you may want to increase your slide size.
Above Leslies says one of your images is 1920x1013 spring that down to fit in 720x405 will reduce the quality of the image
Thanks for sharing your file so that I could take a look, Claudia. I replied back to you via e-mail in your case and it looks like you and Phil have reached the same conclusion.
Hi there. I am having this problem as well - blurry screenshots. How do I tell what size my screenshot is capturing at (I used SnagIt) what size my slide size is, and what size my screen size is? From what I am understanding all of these sizes must be very similar to avoid blurry screenshots? Thanks!
Hi Kristin,
Happy to help here!
When using Snagit, the size of the screenshot will be displayed at the bottom of the image capture:
In Storyline, you can check the slide size by navigating to the Design ribbon >> then click on Story Size:
For your display, you'll want to be sure that the Scale and Layout are set to 100%. For more details on using images, we have a great resource that provides some tips here:
Hi, I am also having this issue. I've tried the steps described above - making sure browser and display resolution are 100%; taking a screenshot that's the same size as intended for the course; inserting as a PNG rather than JPEG...still it's blurry.
Please help!
Alex
We're happy to help, Alex!
I see you've tried quite a few things already. Can you share the image file and your .story file with us? Just click here, and we'll reach out to you soon after we dig in and test things out!
Was there any update on this? I'm having the same issues