To display figures on your website, it is necessary to convert PDF files to image files in PNG format. However, the conversion sometimes results in low-quality figures, especially if there are texts in the PDF original files. Below are the procedures I used to convert PDF files to high-quality PNG files. It includes two step:
1. use Preview to convert PDF files to PNG files
Open your pdf file with Preview on Mac OS. Click File->Export. Select PNG from the Format field. Below the Format selector, there is a text box Resolution, which is the key to preserve high quality. Make sure to input quite high number, say 300 pixel/inch. Click Save. This produces a png file of high quality
2. use OptiPNG to reduce PNG file size
The PNG file from the above step is usually quite big, which may make your website slow to load. The OptiPNG (http://optipng.sourceforge.net/) program can used to reduce file size. With the default settings, it is able to reduce the png file size by half without perceptible loss in image quality.
You may see a PNG figure produced with the above procedure in my MethPipe website (http://smithlab.usc.edu/methpipe/).