Converting Equations to Images

Background

There are a few options for inserting equations into a website.

The easiest is a plugin that generates equations based on inline LaTeX/TeX. These load rendering scripts when a user visits the website, which isn’t fast since the user has to both download the scripts and render the equations. Having additional plugins or external scripts also has potential security issues. Examples of this approach are KaTeX, Simple Mathjax, and WP-KaTeX.

Another option is to use a plugin that pre-generates images such as WP QuickLaTeX. This plugin uses a remote server for processing the equations. By default, the images are hosted there as well, but by changing a few setting they can be cached locally. Also be aware of the license, “QuickLaTeX.com is a linkware, free for personal and non-commercial use in exchange to backlink”.

The more manual but configurable option is to generate images locally using tools then uploading them, which will be covered below.

Sample TeX

\documentclass{article}
\usepackage{amsmath}
\usepackage[active,tightpage]{preview}
\PreviewEnvironment{equation*}

\begin{document}

\Large

\[
t=
\dfrac{\text{capacity (Ah)}}{\text{current (A)}} *
\dfrac{\text{1 day}}{\text{24 hours}} *
\dfrac{\text{1 year}}{\text{365 days}}
\]

\[
t =
\dfrac{\text{capacity (Ah)}}{\text{current (A)}} *
\dfrac{\text{1 yr}}{\text{8760 h}}
\]

\[
t =
\dfrac{235*10^{-3}}{0.3*10^{-6}*8760} =
89.4 \text{ years}
\]

\end{document}

Above was saved as all_equations.tex

TeX to PDF

sudo apt install texlive-latex-base texlive-latex-recommended preview-latex-style

mkdir -p pdf

pdflatex -output-directory=pdf all_equations.tex

Creates all_equations.pdf (along with log and aux files)

Project Website: TeX Live

PDF to SVG

sudo apt install pdf2svg

mkdir -p svg_orig

pdf2svg pdf/all_equations.pdf svg_orig/equation-%02d.svg all

Creates a separate equation-##.svg for each equation

Change 02 to zero pad a different amount

Equations are not cropped to content

Project Website: PDF2SVG

Crop SVG

sudo apt install inkscape

inkscape --verb=FitCanvasToDrawing --verb=FileSave --verb=FileClose svg_orig/*.svg

Opens each equation in the Inkscape GUI, takes about 3 seconds per equation. Errors out on “New document 1” at the end with inkscape 0.92.4-3.

Had cropping issues with inkscape when using \LARGE in the TeX. The PDF looked good, so it must be an bug with inkscape.

Project Website: Inkscape

Note about Mobile

PNG images converted from the SVG files generated above look great on a desktop, but are blurry on mobile. The width varied between 142-345 pixels and height varied between 13-47 pixels.

One solution is to generate images 200% bigger and display them at 50%. Using this method increases the file size, but looks great on both mobile and desktop. The width varied between 266-648 pixels and height varied between 26-88 pixels.

SVG to 200% SVG

sudo apt install librsvg2-bin

mkdir -p svg

for FILE in svg_orig/*.svg; do rsvg-convert $FILE -o svg/$(basename $FILE) -z 2 -f svg; done

The default format is PNG, so the format option is needed

Project Website: Librsvg

SVG to Optimized/Cleaned SVG

sudo apt install python3 python3-pip

pip3 install scour

mkdir -p svg_scour

for FILE in svg/*.svg; do scour -i $FILE -o svg_scour/$(basename $FILE) --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none; done

Command above uses “maximum scrubbing” settings for scour

Project Website: Scour

SVG to JPG/PNG/WebP

sudo apt install imagemagick

mkdir -p jpg png webp

for FILE in svg/*.svg; do convert $FILE jpg/$(basename $FILE .svg).jpg; done
for FILE in svg/*.svg; do convert $FILE png/$(basename $FILE .svg).png; done
for FILE in svg/*.svg; do convert $FILE webp/$(basename $FILE .svg).webp; done

Takes about 1 second per file

Project Website: ImageMagick

PNG to Optimized PNG

sudo apt install optipng

mkdir -p png_opt

optipng png/*.png -dir png_opt

For this sample set, -o5 (slow) didn’t reduce the file size at all

Project Website: OptiPNG

File Sizes

After converting 26 equations to each file type at both sizes, the results are summarized below.

File Type	100% Size	200% Size
SVG	648.4kB	787.0kB
SVG (Scour)	362.9kB	432.9kB
JPG	105.0kB	236.4kB
PNG	67.0kB	140.7kB
PNG (Optimized)	N/A	126.4kB
WebP	47.2kB	92.0kB

SVG has lossless scalable text, but is the largest size.

JPG has great compatibility, but is larger than PNG in this scenario.

PNG is a great compromise between size and compatibility.

WebP is the smallest, but might have compatibility issues.

Script

Converts a TeX file to optimized PNG files.

IN_FILE=all_equations.tex
OUT_FORMAT=equation-%02d

mkdir -p pdf

pdflatex -output-directory=pdf $IN_FILE

mkdir -p svg_orig

pdf2svg pdf/$(basename $IN_FILE .tex).pdf svg_orig/$OUT_FORMAT.svg all

inkscape --verb=FitCanvasToDrawing --verb=FileSave --verb=FileClose svg_orig/*.svg

mkdir -p svg

for FILE in svg_orig/*.svg; do rsvg-convert $FILE -o svg/$(basename $FILE) -z 2 -f svg; done

mkdir -p png

for FILE in svg/*.svg; do convert $FILE png/$(basename $FILE .svg).png; done

mkdir -p png_opt

optipng png/*.png -dir png_opt