Image compression in and for Lectora

Several projects i worked on lately i did notice the lack of image compression on the images in Lectora. Offcourse does Lectora itself have a method of compressing images, but i do think that lacks in quality and size. So when delivering a project a developer should watch the quality of the compression.

As i am working on a series of courses explaining Javascript and some more tips and tricks in Lectora ( and Storyline ) on Patreon for all interested this is one of the lessons i am gonna share onthere. Focus will be on Javascript in Lectora, but offcourse sometimes i will wander off and show something asked for or specific like this.

More on that later…

Preview image



  1. Profile photo of Justin Ball
    Justin Ball

    Yes, very interesting Math. I’m surprised at the native functionality in Photoshop hasn’t produced better options, and we still have to rely on plugins.

  2. Profile photo of Math Notermans
    Math Notermans Post author

    @Justin Actually that in my opinion is just the power of Photoshop ( and all Adobe tools ) that they are open for extension for third parties. I wrote plugins that ease my life as designer/developer quite a lot. Last year on LUC2016 i showed my workflow in Photoshop that automagically created a properly setup and working .awt with smart use of scripts and plugins. One of the major drawbacks of that version ( because i based it on CS6 ) was that it was limited to a single page in Lectora. Last year i continued working on that making it a setup with which i can create a complete multipage .awt including questions, quizzes and more… actually a completely working Lectora file straight from a PSD-design.
    Now using CC17 i can:
    – use Artlayers for seperate pages. A designer can mockup a click and it autogenerates it.
    – in the settings you can choose.. create a button for each element… or just for specific named elements ( and you can choose the prefixes for that )
    – in the settings you can choose…convert everything to images…or create css and choose appropriate webfonts for used texts.
    – you can choose to use TinyPNG for compression

    When using Responsive design, you mostly start with the default desktop view.
    Then when you go eg. mobile landscape, all images, buttons etc. get scaled down to fit… while you may not want that…
    In my PSD scripts i now have options for Responsive design…
    The user can choose to keep assets on a 100% scale when creating the mobile version.
    So if you generate a .awt from a PSD… you can choose…use default Lectora behaviour for your responsive views…or keep images to 100%…

    All together this really speeds up my workflow..


  3. Profile photo of Justin Ball
    Justin Ball

    @mnotermans5114, that sounds very interesting. We do use actions and some plugins heavily in Photoshop. We would also use the compression settings saving for jpg and png by modifying the presets then doing a batch conversion of the source images so we would have compressed images to use. That was mostly done using the native functionality in PS, not using a plugin. Might have to make that change based on what you’ve shown. I wasn’t able to tweak settings in our current process to match what the two plugins did in terms of compression/quality.

    I haven’t had a need to use scripts, but now that may change! That sounds like a very efficient workflow process.

  4. Profile photo of Math Notermans
    Math Notermans Post author

    @8ball , It is for sure. If wanted or needed i gladly help setting up a workflow and scripts based upon your needs. At some point i planned offering a service that would do this for both Lectora and Storyline, but after creating this workflow for a few clients i came to the insight that it is too complicated and expensive as a webservice. But using as a custom setup for individual companies it can be of great benefits. And i would love to help you getting it to work for you.

    Kind regards,

  5. Profile photo of The AV-ator
    The AV-ator

    Hey @mnotermans5114
    Do you have any data/examples of how a regular PNG export from Photoshop compares to the tools suggested?
    I guess, just in my own workflow, if I have the image in Photoshop and make my adjustments (levels, color, image size, etc), its pretty simple to click “Ctrl+Shift+Alt+S” and export the PNG natively. Do the other plugins do anything different or more effectively?

  6. Profile photo of Math Notermans
    Math Notermans Post author

    In the sample above, last page it shows a size/quality comparison. And yes especially TinyJPG/PNG does it different and better. Just check the sizes and you will see… For the sample image in my file it is like this:
    Default PNG : 449Kb – TinyPNG: 99 Kb
    Default PNG 8 bits: 111Kb – TinyPNG: 99 Kb

    Personally i dont use 8 bits on PNG images, because you loose some quality, but with this image it looks ok. But still some Kb bigger then TinyPNG and there the image doesnot become 8 bit, so better quality offcourse. Used CC2017 for this test.

  7. Profile photo of David Jumeau
    David Jumeau

    Hey Math! Would this include using different picture elements for retina and non-retina displays?

  8. Profile photo of Math Notermans
    Math Notermans Post author

    Hi David, for sure. Any image needs to load. So without compression it will take longer. For a elearning designer its important to deliver assets as small as possible in the best quality to ensure optimal loading times. The default Lectora compression lacks there. If you do not compress your images upfront before using them inside Lectora you miss out.

Your email address will not be published. Required fields are marked *