U074 – My images are blurry
BookWidgets automatically compresses images in order to reduce loading times when students open widgets.
Usually, image compression will go by unnoticed. However, notably in the case of the image containing text, the text may become blurry and illegible. There are two things you can do.
PNG or JPG?
Choosing the correct filetype can already help. PNG and JPG are image file formats that are already compressed in and of themselves, but they rely on different compression methods. This causes them to perform better or worse, depending on the type of picture you're using. As a good rule of thumb, ask yourself the following question:
Does my image contain more than a (few) dozen colors, or less?
- Use PNG for computer-generated images. Think of text documents, pictures of company logos, icons or emojis,... These pictures have a relatively low amount of distinct colors, in which case the PNG filetype is more potent.
- Use JPG for photographs, i.e. pictures made with a camera, or pictures of paintings. These images tend to contain hundreds or even thousands of unique colors, in which case the JPG filetype compression format will be more efficient.
Increasing resolution
- In the widget editor, to the top-right of any image you've added, click the cogwheel followed by Edit.
- Find the Size parameter in the bottom-right of the editor.
- Turn off the Automatic slider.
- Increase the Height and Width parameter, taking into account the ratio of the image.
The Size parameter affects the image resolution rather than its actual dimensions when displayed in the widget.
Which values should I pick?
You'll want to strike a balance between values that are too low (blurry image) and too high (increased loading time).
Note that since most computer monitors are less than 1900 pixels wide, setting the Width to anything higher than 1600 usually won't have any added benefit. Only if you use an image where students are supposed to zoom in and look for tiny details (Where's Waldo?), then overstepping this threshold can be useful.