Saving image files with maximum compatibility for different displays?

Question

There's a website I'm working on where students can read their textbooks online, page by page using an implemented PDF viewer.

But I've noticed that this doesn't look particularly great on different devices and so far I made the mistake of using standard, relatively low resolutions.

So my question (and I'm sorry if this is a little vague or subjective): what's the best file format to use in this scenario?

• Big resolutions, sharp text on any device including retina displays

• I still have access to the "source pages" that use vectors, so .svg is an option along with .jpg, .pdf and .png

• Preferrably, I don't want to use different files depending on the user's resolution or display

• Relatively fast loading times are a must, so if a little bit of compression is unavoidable then it's not necessarily a dealbreaker

Does anyone have any experience with optimizing their files for online embedded viewing?

Answer 1

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.