: Saving image files with maximum compatibility for different displays? There's a website I'm working on where students can read their textbooks online, page by page using an implemented PDF viewer.

@Nimeshi706

Use Vector Where Possible

If possible and feasible use a vector format. You have source files that are vector and SVG or PDF are options, so use one of those.

You are displaying textbook pages in a PDF viewer, but since they are 'low resolution' I am assuming the pages are being converted to raster images. Since you have source files in vector format, you should convert these to PDFs (you are displaying these in a PDF viewer after all) and keep everything as vector data.

Raster Images

If you have to use a raster format, use whichever is suitable. There is some discussion about which formats to use in this question:


What web graphics formats to use?


The important thing with raster formats and high pixel density displays is to take in to account actual pixel dimensions, not virtual pixels. Generally speaking you either serve different images based on the display or always use the higher resolution images. If you don't want to serve different sized images based on the display then you should use images at least x2 the intended viewing size - preferably x3. But you will have to balance this against acceptable file size etc.

Since you are displaying in a PDF viewer, which means the images will be zoomed, use the absolute highest resolution you can get within an acceptable file size.

Vote Up Vote Down