Best practices for external resources in Author
Overview
Internet connections have improved over time and are much faster than they used to be, while graphics algorithms are more or less the same. As a result, page loading is much faster than in the past.
Still, you have to be careful and optimise the weights of the elements you are going to include in your developments. There are scenarios, such as navigation on mobile devices, that benefit especially from this optimisation of elements.
In developments created with Author you can include the following types of graphic and multimedia elements:
- Images
- Audios (mp3)
- Vídeos (mp4)
Images
As mentioned before, there are four types of image formats to include in Author. Each has preferred applications.
The main point to consider is the optimisation of the weight in Kbps. Guidelines are given in the specific sections for each of them.
The second point to consider is the size in pixels. Try to make the image at least as wide in pixels as the gap that contains it to avoid blurring the image.
Since this is a responsive scenario, assume that the size of images can vary between devices and between themes. Even depending on structures that are created in editing. So the default size of an image in a Lesson or Sydney theme, 880 pixels wide, will not be the same as in a Paris theme, whose default size is 960 pixels wide.
To find out the size of an image, you can use the inspection tools of your preferred browser. In general, these tools work in a similar way in all browsers.
Here is an example of how to access Chrome's inspection tools
Another way of accessing Chrome's inspection tools. (Continued)
In this case with the inspection tool we select an image of a Lesson theme to know its size, in this case 880px wide
In this second case we include the image in a row of two columns and altered the size of the second column that includes the image. With the inspector you can know the minimum size of the image for that specific gap, 358px
JPG
This is the preferred image format to use.
You should apply compression tools that allow you to optimise its weight.
As a reference, in Photoshop, you can apply a compression factor between 50 and 70% to generate images with sufficient quality and low weight.
In this example, we achieve a reduction of almost 1.5 Mb to just 40 Kbps only by applying a 50% reduction and with hardly any loss of quality
In case you do not have this type of tool at your disposal, there are free online services to optimise the size of jpg images. One of the most efficient is TinyJPG.
This format is used to output photographic images or illustrations. It is also widely used for backgrounds of sections, pages, etc.
PNG
This is the type of image to be used when the image contains gradients or elaborate details and some kind of transparency is needed. Preferably use the PNG-24 format so that the transparency is as clean as possible.
If you use Photoshop, you must be careful with its creation as it is a format without compression and very heavy files are generated without the user having any configuration options. In this case, you can also resort to an external service such as TinyPNG, which allows you to greatly optimise these images taken from Photoshop.
SVG
This is a type of image format that can be used when working with vector formats. It has an optimal resolution on any screen, a very good transparency and a reduced weight and you do not have to worry about the space it occupies, as it will always be displayed in an optimal way.
It requires vector software for its creation (Illustrator, Inkscape…).
Apart from vector images, it is very useful for creating diagrams, tables, and other elements of this type.
PRO TIP 1: If the image includes text, make sure to convert the text to curves to avoid incorrect displays.
Where to convert text to outlines in Illustrator to avoid losing typography in the final SVG
PRO TIP 2: There is an animated SVG format that can be included as a standard image and that enriches the look of the content. There are not many image banks that include this type of element. There are some creation tools on the market, depending on the skills of the content creator.
SVGator
Expressive Animator
Free Online SVG Animation Generator
GIF
This is an image type that should be avoided as much as possible because it is limited by its maximum number of colours, 256, which makes it a bad choice for complex images. Its transparency is also very limited and it tends to generate artefacts and dirty cuts.
Its natural replacement for complex images with transparency is PNG, while for vector images SVG is a much better choice.
Audio
Generally include mono files because they are lighter in weight. If you can access the audio properties, make sure that the bandwidth does not exceed 128kbps in the case of a human voiceover..
Screenshot of the export window from Audition
If the audio is mixed with sound effects, music, etc., you can consider the option of increasing the bandwidth to 320kbps and even exporting it as stereo.
Video
For video, you can set these parameters as the ones that will give you the best results.
Preferred video size:
1920x1080 pixels
Bandwidth:
between 1,5 and 2Mbps
Audio:
mono, 128Kbps (see audio section)
Profile:
Baseline, 4.1
There are factors that cause two videos of identical length and resolution to weigh differently. The amount of information on screen and the speed at which images change are two of them. So a bandwidth of 1.5Mbps, which works well for a video with slow pacing, flat colours and little visual information, may be completely inadequate for another video based on a real image, with a high editing pace. In this case, even 2Mbps may not be enough.
Unfortunately with video a lot of trial and error comes into play.
PRO TIP: Handbrake is a free and open source software that allows you to optimise very heavy videos to very good levels, while maintaining a more than acceptable output quality.
Note on the profile: Web video players support mp4 with other more advanced profiles (Main). However, experience shows that on certain occasions on some mobile devices, profiles other than Baseline have caused problems. It should be noted that Baseline is not ideal for video resolutions higher than 1080p.