If the first two lines of large text are on a web page, they are being rendered as pure text (vector shapes), always to the full resolution of whichever display they’re on. If you are looking at this on an iMac with a Retina display, it has a resolution of 218 ppi, so that is the resolution of the website text on your computer, and that is why it looks so much sharper than text in an image on the page.
In contrast, the text in the PDF is not being rendered as pure text but as pixels, because it was said to be taken from a screen shot of a PDF. Therefore, the sharpness of the text depends on:
- Whether the text in the PDF is pure text, or if it’s also an image rendered to a limited number of pixels, which will look mushy.
- The magnification of the PDF at the time the screen shot was made, since a screen shot at 200% could capture sharper type if it was text and not pixels.
One suggestion would be that, instead of taking a screen shot of the PDF, try opening the PDF directly into Photoshop. This gives you the opportunity to enter a ppi value like 300 ppi, so that any vector or text elements in the PDF should show more detail. But I still would not recommend this because it's not a good idea to pre-render text into pixels. Especially if you are then going to turn it into a low-resolution web graphic, because the low resolution text will always look worse than the fully rendered “real” text on the web page itself.
The best practice way of doing this is: Bring in the image on its own with no text, prepare it for the web, and upload the image. Then add all text on the web page itself, so that the text always renders at the full resolution of the display.
What you should not do is take the 218 ppi of your iMac display and use that as a guide for the ppi resolution of the image or text. Displays come in many different resolutions today across desktops, laptops, tablets, and smartphones, so 218 ppi would work only for others viewing on a Retina iMac.
Instead of thinking of web graphics in terms of 72 ppi, instead think in terms of the pixel dimensions (width and height) required for the website. For example, does the web design suggest an image size like 1200 px maximum so that they fit the page layout? Web browsers automatically scale images for all of those different screen resolutions that are out there; if you are export a 1118 px wide image, different web browsers will try to keep it looking a consistent size regardless of whether it’s being viewed on a older 96 ppi desktop screen or a 530 ppi smartphone screen. That’s why 72 ppi doesn’t really fit in anywhere anymore; it’s all about how many pixels wide and tall.
AdChoices