Xaringan png vs svg image quality

Question

I find that PNG/JPEG images in Xaringan (xaringan::moon_reader()) html slides are visually soft and fuzzy compared to SVGs. See sample screenshots below.

In contrast, these three formats are visually comparable in standard html report (rmarkdown::html_document()). See screenshot below.

The obvious solution was to use SVG. But, SVGs explode in size for complex figures. So, it's a bit risky to use as default in a template.

This image below for example, is 7MB as SVG while the corresponding PNG is 50kB. Having many such SVG figures can lead to the final document being hundreds of MBs in size.

Using an online tool (https://vecta.io/nano), I was able to bring the 7MB SVG down to 1.6MB (>75% reduction). Huge difference in size without obvious visual change in quality. Still far from PNG sizes.

So, some of my questions are:

Why is the PNG quality bad in xaringan? What can be done to improve it?
Are there tools/devices in R that can decrease SVG size? (simplify/flatten paths?)

Other thoughts/suggestions?

## DON'T CLICK "RUN CODE SNIPPET" AS IT RUNS AS JAVASCRIPT
## THIS IS ONLY TO COLLAPSE CODE

---
title: "Image quality"
output:
  xaringan::moon_reader
---

## dev="svg",fig.height=5,fig.width=5

```{r,dev="svg",fig.height=4.8,fig.width=4.8}
plot(1:5,1:5)
```

---

## dev="png",fig.height=6,fig.width=6

```{r,dev="png",fig.height=6,fig.width=6}
plot(1:5,1:5)
```

---

## dev="jpeg",fig.height=6,fig.width=6

```{r,dev="jpeg",fig.height=6,fig.width=6}
plot(1:5,1:5)
```

# R version 4.1.0 (2021-05-18)
# Platform: x86_64-conda-linux-gnu (64-bit)
# Running under: Ubuntu 20.04.3 LTS
# 
# rmarkdown_2.10
# xaringan_0.22

score 2 · Accepted Answer · answered Sep 11 '21 at 15:58

If I examine the images in my browser (right click on one and choose Inspect), I see that the PNG and JPEG are drawn as 432x432 pixel images, i.e. for the requested 6 inch images, it's assuming 72 dpi. My current display is a 96 dpi retina, so that looks a little fuzzy.

I can add chunk option fig.retina = 2, and it looks much clearer. This will do the plot at 144 dpi and then shrink it to the requested size. Probably some bigger number would look even better, but it does increase the size of the output.

Xaringan png vs svg image quality

1 Answers1