Testing supported image formats in a gallery

[tartley]

Environment

Python Version: 3.10.6
Nikola Version: git latest (commit 483ffd8 Wed Mar 1 22:52:02 2023)
Operating System: Linux Pop!_OS 22.04 LTS (Derived from Ubuntu 22.04)
Browser: Firefox 110.0.

Description:

I manually tested all the supported image formats in galleries. I plan to submit some fixes for the problems I found, but I know nothing, so let's discuss here & correct my misunderstandings first.

I infer the supported image file name extensions are defined at nikola/image_processing.py:46, which equates to:

bmp, gif, jpeg, jpg, png, svg, svgz, tiff, webp

In a brand new site, generated using nikola init -dq site, I tried each of the above image types in a gallery, specifically:

• Run nikola build
• nikola serve and view the image preview in a gallery
• Click on the preview to view the full size image in the default viewer, BaguetteBox.

'y' in the table below means everything worked as I expected. Also, I record some diagnostic information:

• Does bagetteBox claim to support this image type?
• What does Python's mimetype.guess_type() return for this image filename?

Testing Results

Extension	Build site	Image preview	View image	baguetteBox support	.guess_type(x)
.bmp	y	y	KINDA[4]	NO,BUT[5]	('image/bmp', None)
.gif	y	y	y	y	('image/gif', None)
.jpeg	y	y	y	y	('image/jpeg', None)
.jpg	y	y	y	y	('image/jpeg', None)
.png	y	y	y	y	('image/png', None)
.svg	y	y	KINDA[4]	NO,BUT[5]	('image/svg+xml', None)
.svgz	y	NO[2]	KINDA[4]	NO,BUT[5]	('image/svg+xml', 'gzip')
.tiff	y	NO[3]	NO[3]	NO,BUT[5]	('image/tiff', None)
.webp	y (recently fixed in #3671)	y	y	y	(None, None) [1]

• NO[2] svgz preview: The preview is blank. The filename/title is not displayed in the preview space. But the mime types look good (even the 'gzip' encoding), and the full image displays correctly when I click on the preview, so I think this lack of preview ought to be fixable. Perhaps our thumbnail generation is handling svg but not svgz? The filename/title is displayed in a tool-tip on hover, so that part works.
• NO[3] tiff preview is blank, although we display the filename/title in the preview area, and as a tool-tip on hover. Also, trying to view the image actually downloads it instead. I notice that browser support for displaying TIFF images is limited to IE, Edge and Safari, and does not work in Chrome, Firefox (where I am). So maybe, once KINDA[4] and NO,BUT[5] are fixed, tiffs will work fine in browsers that support them. But we should probably warn users away from using them because of the browsers that don't support them.
• KINDA[4] Clicking to view a bmp, svg, svgz does display the full image. But, unlike the other images in the gallery, this isn't a transient javascript image overlay, it is instead just a plain link to the image file. So it doesn't display any of the gallery's normal [<] or [>] buttons to view previous, next images, nor the [x] to get back to the gallery. The only way out is the browser back button. Related: Images affected by this are skipped over when using the [<] and [>] buttons to switch between images. This might all be caused by NO,BUT[5].
• NO,BUT[5] Javascript image viewer BaguetteBox only supports (gif,jpg,jpeg,png,webp) out of the box. But apparently one can pass in a "filter" option to add extra types, like SVG. Do we already do this? I don't see it when grepping our source for 'filter'. The call to baguetteBox.run() is in each theme's templates/base.tmpl. Fixing this might just fix all instances of 'KINDA[4]'.

Perhaps a suitably simplified and user-oriented version of the above table would be useful in user-facing documentation about images and galleries?

Proposed actions

• Investigate why svgz previews don't work (see NO[2])
• Evaluate whether a modified template, which passes 'filter' to baguetteBox.run, is better at handling bmp, svg, svgz, tiff.
• With the above fix in place, try tiff images in a browser that supports them. This will mean acquiring a Mac w/Safari or Windows box w/Edge, and creating a development environment on it. Or use the "browser support" link, above, to find a minor browser I could use on my Linux laptop.
• Add some text to the handbook "Image and Galleries" section, listing the supported image types (unless it's somewhere already? I couldn't find it.), and perhaps use a simplified version of the above table to describe to users any shortcomings or bugs affecting each type are (e.g. bitmaps don't display in baguetteBox, we just link directly to the file.) Include in this a mention that tiffs are not displayed in major browsers like Chrome or Firefox. Ideally, this table would mostly just shrink down towards nothing, as the problems with different image types get fixed.
• Add other image formats to the samplesite gallery. "Converting a sample image to PNG/GIF, and perhaps adding some simple SVG would be beneficial for both the demo site and tests." (from discussion here)