2

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?

  • Without getting into hardware specifics, it is super important to understand that you simply cannot have "sharp text" at every arbitrary size on some screens. "Crisp text" (an undefined term) relies on the ratio of the size of the glyph to the size the grid of pixels used to draw it. Retina displays are going to have an easier time with it, but it sounds like your text is fixed (pre-rasterized) and being scaled up – Yorik Mar 15 '16 at 19:04
3

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:

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.