Forum Discussion
- DiarmaidCollinsCommunity Member
Wow. That's meticulous research dude. That's amazing, the difference.
Thank you everyone for your patience, and apologies for the slight confusion on the file types! Let me take your findings back to the team Matthew so we can review this function of Storyline 360. I just want to confirm that when you say you "replaced the published image with the original", this means you went into the Storyline output\mobile folder after publishing and replaced the processed image with a raw version of the same image?
EDIT: Nvm, I just saw your earlier post confirming this. Thank you.
I really appreciate the extra effort you've all put into this.
- Michael Marcos
Customer Support Product Liaison- DiarmaidCollinsCommunity Member
Full disclosure - I don't generally import images with text in them so I don't encounter this issue that often. It's clearly obvious that text is affected. I think there is probably more leeway with images without text. I, unfortunately, tend to recreate any charts, diagrams or text images within Storyline itself to bypass these publishing issues (yet another productivity limiting 'hack' or workaround that's been embedded into my workflow).
But, from the link I posted a little bit further up, there is (was) clear degradation in image quality if the image is embedded in a non-rectangular frame. This may be fixed now but if I require bespoke image 'frames' I do it outside Storyline and import the image as a transparent PNG - just another workaround to broken Storyline functionality. I have not tested if it's fixed.
But at least we know arrows are no longer blurry.
I'm just circling back here to let everyone know that we will be taking investigating this further on our end. The results Matthew got from the steps he documented earlier are not expected behavior. I can't give an ETA on how soon it will take to fix this as that can change depending on how complex of an issue the original image quality issue may turn out to be though.
Thank you again for your patience as we continue to chase down this issue!
- DiarmaidCollinsCommunity Member
Ooooh. Yes, please.
And also maybe smooth integration of Lottie Files too? While we are at it...
:)
<give 'em an inch they'll take a mile>
- MarkKirby-c9f94Community Member
Diarmaid you did argue compellingly that Articulate should "get things fixed first, new features later". Really appreciate your stellar contribution to the thread/issue. I did take it to Articulate's CEO Lucy Suros, on LinkedIn and get a reply from her...see below
- DiarmaidCollinsCommunity Member
Wow. I'm blushing here. I wouldn't exactly call myself a hero but if it gives me an excuse to keep wearing my underwear over spandex with a cape then... uh... wrong forum...
wrong thread... OMG<delete> <delete><delete>
Matt's the real hero. I was just procrastinating from doing the work I was supposed to be doing while everyone else is still on holiday.I can't help but notice that the screengrabs you posted are really blurry. Have we considered that maybe we all need glasses?
- MarkKirby-c9f94Community Member
Part of a branching scenario, with a convoluted workflow - a random number in Storyline (1,2 or3) to select different sales vs time history, then using an Excel spreadsheet, with a linked picture to save output as an image, which is then used as a decal in Fusion360 to give me the illusion of a P&L sheet (12 different sheets depending on the scenario choices). Talk about a procrastination runway, lol.
- DiarmaidCollinsCommunity Member
WOW.
- JohnFanelyCommunity Member
OK so when I create learning, I create it with the thought in mind that my 80 year old father would be able to understand a topic or process without ever having been exposed. I simplify process verbiage and add visuals both animated and static.
NOW, I'm going to ask you all, that are clearly cerebral folks to bare with me for a second.
You talk about using SVG's. Is there an easy way to help me understand why JPEG's or PNG's are not used? When I searched for an answer, it's because I use JPEG's and PNG's. Seems like the issues happen with all of these.
Just making sure I'm not still living in the stone age chiseling on a stone tablet here.
Thanks in advance folks!
- MarkKirby-c9f94Community Member
Hi John
I too want to use the easiest image format (like jpeg or png), so the ONLY reason I was looking at SVG was that ALL my images are blurry when published in Storyline. The blur only really shows up (horribly) when image has text in it (which is maybe why there isn't more of an outcry, as perhaps users typically add text natively inside Storyline on top of an image as a time consuming work around). Diarmaid and Matthew are clearly much more expert in image formats than I am. I am an engineer and just want my images to appear on screen without massive degradation because Storyline is doing something to them.
- DiarmaidCollinsCommunity Member
Hi John. Pretentious neanderthal here with airs above my station. Chiselling hard. Like chalk. Zug zug!
I had a very long neanderthal-man-splain written about the differences in file formats and the pros and cons but a power outage wiped it before I could hit send. Which I'm kind of glad. I probably went way overboard.
Short version: There are 2 main image types; Raster images (also known as bitmaps) and Vector files.
Bitmaps are images compiled of pixels. The more pixels in an image (generally) the more detail the image will contain. The more pixels crammed into an inch (known as dots per inch or DPI for short) the sharper the image will appear. The downside with more pixels is the file size gets bigger.
JPEGS are predominantly used online because it is a 'lossy' compression file type that allows one to scrunch down the pixels to create smaller file sizes. This used to be important back in the early days of the Intertubes (but also again now with mobile data charges). The downside is the more the image is compressed the more pixellated it looks with things called 'artefacts' appearing around the edges of details. The trade-off is getting the happy medium between image quality and file size.
GIFs were/are predominantly used for flat graphic images, such as logos, illustrations, etc, due to its file capabilities of eliminating unnecessary pixel information (basically colour - the 'flatter' the colour (no gradients, shadows, etc) the less colour used, the smaller the file size. Ideal for icons. Also, the file format allowed for transparency and animations making it the de-facto choice for spicing up static pages/slides.
PNGs are the cool kids on the block cos they can (theoretically) do anything, but their primary use is that they are way better at handling transparency than GIFs. File sizes, in general, are slightly larger than equivalent JPEGs (much more so if transparency is included). Use only if transparency is needed.
The downside to all these formats is that if the bitmaps are enlarged or scaled upwards, they lose their sharpness and become blurry or 'soft'. The bigger the scale upwards the worse the effect.
Vectors use mathematical magic to display the information. Vectors are points (uh, in space) and vector lines um... join together creating shapes. The more vector points, the more shapes, the more 'complicated' the image. Sort of... There are many different Vector formats out there, such as WMF, EMF, EPS, the KLF, and SVG each with their own 'best use' advantages and disadvantages. I have never gotten an EMF to work for me. Ever. I don't know why it exists.
SVGs are known as Scalable Vector Graphics, and are the super cool new thing (they have been around for decades) and offer uh, scalable... vector... graphics to be used in your site/slide/artwork. The trouble is, Storyline is really behind the curveball (is that a phrase?) on this and its implementation is a bit below par. It should allow us the import of SVGs as images but then offer the flexibility of being treated as 'shapes' within Storyline to allow tweaking or editing of strokes, fills, transparencies, etc. It kind of worked with the Powerpoint workaround but Articulate have broken that official 'hack'.
SVGs should replace any instance of a static GIF used in the past. Any logos that were transparent GIFs or PNGs probably should be upgraded to SVGs (unless it's a mad logo with rainbow gradients and drop shadows everywhere). That's the short answer, really.
Here's a link to a demo I mocked up attempting to show the difference in image quality of the various file formats. But for some reason, my Photoshop seems to be creating 300dpi images that look the exact same as 72dpi images and I don't know why.
https://360.articulate.com/review/content/7a1e3edc-580c-43ee-ab83-800ca1baaffd/review
You should be clearly able to see the relevant image degradation of the GIF format compared to the others and also how SVGs scale beautifully.
Uh, ok, that still wasn't short. Apologies to everyone. I really should be doing something else but I don't want to.
- JohnFanelyCommunity Member
That sir is a clean explanation and much appreciated. Agreed that the text is blurry, however I still feel like the images aren't as crisp as they can be. Please see the two attachments. These are an example of one of my sons figures. PPT is cleaner overall as compared to SL360. To me it should just be that simple.
Also and again just a simple mind thought. Once an image is captured, even if it has text, it transitions from layers of an onion, to a flat picture of an onion. In my mind, the text then becomes a image. It's no longer text.
- MarkKirby-c9f94Community Member
Yes the PPT image is crisp and SL360 image is much worse.
- RandySimmons1Community Member
I reported this issue in summer of 2021 and tried for a few months to get it resolved to no avail. I gave up and just do the best I can. Sure would be nice if SL fixed this basic issue.
- MarkKirby-c9f94Community Member
Hi Randy,
Likewise I reported it months ago, and got nowhere. This is why I resorted to asking for help from their CEO on LinkedIn earlier this week, as the community has suffered largely in silence (or within our own echo chamber anyway).