image type

[gsaray101]

Hello All,

I am using ggplot to create charts and saving them into .png files. I then use jquery to display these charts in a web page. I am getting criticism that images are not sharp etc. I would like to hear others who used ggplot2 to chart and served the images via the web site. What format they used etc? I would really appreciate any insight?

Regards,

[Brandon Hurr]

I've not hosted things, but I have noticed similar things when exporting lower resolution PNGs and putting them into documents and presentations. If you up the image size when saving from ggplot it will help, even if you end up resizing them in HTML. 

Alternatively, you could try SVG output instead, but keep in mind your target audience. I'm stuck with IE8 on my work machine thanks to overbearing IT and IE8 and before cannot load SVG, but all other modern browsers can (Opera, Safari, Chrome, etc...). SVG should always be "crisp". 

--
You received this message because you are subscribed to the ggplot2 mailing list.
Please provide a reproducible example: https://github.com/hadley/devtools/wiki/Reproducibility
 
To post: email ggp...@googlegroups.com
To unsubscribe: email ggplot2+u...@googlegroups.com
More options: http://groups.google.com/group/ggplot2

[Ernest Adrogué]

Hi,

11-01-2013, 21:51 (-0800); gsaray101 escriu:

Maybe you can tweak something to make the images a little bit crisper but I
think that tiny charts will always be hard or even impossible to read. I
would try to make the images as large as possible and also to make them
clickable so that the user can see a larger version of the same image in a
new window.
Cheers.

[Ista Zahn]

Hi,

When using a bitmap format like png, the most important thing is the
resolution. The tradeoff is that the better the resolution the bigger
the file. Here are some examples:

library(ggplot2)

p <- ggplot(mtcars,
aes(x=wt, y=mpg)) +
geom_point()

png("pngDefault.png")
p
dev.off()

png("png_6X6_res_300.png", width = 6, height = 6, res=300, units="in")
p
dev.off()

png("png_6X6_res_600.png", width = 6, height = 6, res=600, units="in")
p
dev.off()


ggsave("ggsaveDefault.png", plot=p)

ggsave("ggsave_6X6.png", width = 6, height = 6, plot=p)

ggsave("ggsave_6X6_dpi_600.png", width = 6, height = 6, dpi=600, plot=p)

grep("png", system("ls -l", intern=TRUE), value=TRUE)
## [1] "-rw-r--r-- 1 izahn users 98653 Jan 12 12:36 ggsave_6X6_dpi_600.png"
## [2] "-rw-r--r-- 1 izahn users 34392 Jan 12 12:36 ggsave_6X6.png"
## [3] "-rw-r--r-- 1 izahn users 44820 Jan 12 12:36 ggsaveDefault.png"
## [4] "-rw-r--r-- 1 izahn users 34392 Jan 12 12:35 png_6X6_res_300.png"
## [5] "-rw-r--r-- 1 izahn users 98653 Jan 12 12:35 png_6X6_res_600.png"
## [6] "-rw-r--r-- 1 izahn users 4390 Jan 12 12:35 pngDefault.png"

Viewing thes images in Firefox I find that all but pngDefault look
reasonably sharp. The fonts look somewhat better on the ggsave
versions, but that could be my eyes playing tricks on me. When viewing
in Firefox the 600 dpi images look great at full size, but no so good
when scaled down, so you might try saving to a smaller size (but
keeping high resolution). In terms of size even largest on is only 96
KiB, which is not really that big for modern browsers/networks. Of
course if you have 50 of these on a page that will add up quick...

Hope this helps!
Ista

[Joshua Wiley]

I have also had some good luck with SVG for online graphics. They
work pretty well in recent browser versions of at least Firefox,
Chrome, IE (9 & 10), and Safari.

Of course you can also up the resolution as Ista showed you. I will
point out that depending on the elements of the image, vector graphics
can be huge or small. For example a barplot with three bars may be
quite small in vector graphics. A scatter plot with 15 million points
will be a nightmare and you would almost certainly want to
pre-rasterize that (not serve the data and force poor users' browsers
to do that).

This strays from ggplot2, but if you have many of these on a single
webpage and typical users are only interested in a handful, you might
serving thumbnails on the initial page that when clicked take you to
the full image. This can speed things up for your users and decrease
the bandwidth you are using. Just as a quick example of how easy
these are to automatically make, I have three test images from R in
various resolutions and dimensions, which I want to scale all to have
about a total of 10000 pixels

Joshua@Nessa ~/pictemp
$ ls
test1.png test2.png test3.png

Joshua@Nessa ~/pictemp
$ identify *.png
test1.png PNG 672x672 672x672+0+0 8-bit PseudoClass 46c 14.5KB 0.000u 0:00.000
test2.png[1] PNG 1220x895 1220x895+0+0 8-bit PseudoClass 46c 20.4KB
0.000u 0:00.000
test3.png[2] PNG 1220x502 1220x502+0+0 8-bit PseudoClass 46c 16.9KB
0.000u 0:00.000

Joshua@Nessa ~/pictemp
$ convert *.png -resize 10000@ thumbnail.png

Joshua@Nessa ~/pictemp
$ ls
test1.png test2.png test3.png thumbnail-0.png thumbnail-1.png thumbnail-2.png

Joshua@Nessa ~/pictemp
$ identify *.png
test1.png PNG 672x672 672x672+0+0 8-bit PseudoClass 46c 14.5KB 0.000u 0:00.000
test2.png[1] PNG 1220x895 1220x895+0+0 8-bit PseudoClass 46c 20.4KB
0.000u 0:00.000
test3.png[2] PNG 1220x502 1220x502+0+0 8-bit PseudoClass 46c 16.9KB
0.000u 0:00.000
thumbnail-0.png[3] PNG 100x100 100x100+0+0 8-bit DirectClass 10.5KB
0.000u 0:00.000
thumbnail-1.png[4] PNG 117x86 117x86+0+0 8-bit DirectClass 8.19KB
0.000u 0:00.000
thumbnail-2.png[5] PNG 156x64 156x64+0+0 8-bit DirectClass 9.38KB
0.000u 0:00.000

--
Joshua Wiley
Ph.D. Student, Health Psychology
Programmer Analyst II, Statistical Consulting Group
University of California, Los Angeles
https://joshuawiley.com/

[Winston Chang]

One other possibility is lack of antialiasing: if you're generating the images on Windows or Linux, some or all of the elements will not be antialiased. One way to work around this is to use CairoPNG from the Cairo package to generate the images.

On a Mac, the default is to use the Quartz output device, which does properly antialias everything.

Regarding file size: the command-line program optipng will make your png files smaller, without changing the appearance.

-Winston

--