HTML Lotech Solutions ( Jump to site home pagewww.lotechsolutions.com)

Displaying screengrabs in FrontPage

Topic status automatically displays here - do not remove.

Add me to your favorites!Bookmark this topic  Print this topic

Sizing

Some on-screen messages are ridiculously sized, and don't fit within your page layout when copied to your topic. For example:

xyz

Image 1: Original screengrab image saved as JPG at 100% original image size

Only FrameMaker could produce a message 650 pixels wide (whilst providing formatting property boxes with fields only 15 characters wide!). This message just fits within the printed page width (of 700px) when allowance is made for margins and alignment with the text and other page display elements.

To overcome the problem of fitting large images onto the page, HTML supports the the resizing of images, however, resizing images containing text often distorts the text, making it harder to read and distracting in appearance (with blobby enlargements on some characters, and missing parts on others). For example, the following image is the same image as used in 'Image 1' above, however, is displayed at 90% of the size of the original:

xyz

Image 2: 100% sized image JPG displayed at 90% original image size

For best display results in circumstances like this, when you need to alter the size of an image, it is better to resize the image in a separate graphic editing program (such as Paint-Shop-Pro or similar), save the resized image using that program, then display that already resized graphic in your HTML topic. For example, the following image has the same source as the image displayed above, however, has been resized to 90% of its original size and saved under a different file name in Paint-Shop-Pro, for display here: 

xyz

Image 3: Resized image saved as JPG at 90% original image size

See that the text in 'Image 3' displays much clearer than the text in 'Image 2'. It's still not as clear as the text in the original 'Image 1', but is much better than the alternative shown in 'Image 2'. However, 'Image 3' looks wrong, like it's blurred or out of focus, and is therefore unacceptable for presentation.

When reducing the size of an image, the amount of available pixels are reduced, so the image will necessarily display with less clarity (because it must be represented using less pixels). You may need to experiment a little to achieve the best result, but often an even value like 80% provides a reasonably clear image. For example:

xyz

Image 4: Resized image saved as JPG at 80% original image size

Compare the clarity of the text in 'Image 4' with the fatter text in 'Image 3'. The readability is about the same, but in my opinion, the appearance is better in the latter version, because the dialog size in 'Image 3' looks blurred, like it's been resized, whereas 'Image 4' does not.

As an example of the difference between HTML resizing distortion values, see these following images:

xyz

Image 5: 100% sized image JPG displayed at 90% original image size

xyz

Image 6: 100% sized image JPG displayed at 80% original image size

xyz

Image 7: Resized image saved as JPG at 70% original image size

None of them are very good, and anything less than 80% is quite illegible. Alternatively, compare those with the following images which were resized in a graphics program and resaved as individual JPGs:

xyz

Image 8: Resized image saved as JPG at 70% original image size

xyz

Image 9: Resized image saved as JPG at 60% original image size

xyz

Image 10: Resized image saved as JPG at 50% original image size

All of these are legible, even down to 50% of the original size before they become difficult to read due to size, not clarity.

So, to ensure the best results, it is better to resize an image in a separate graphic editing program, save the resized image using that program, then display that already resized graphic in your HTML topic, instead of using the HTML size attributes of an image that's too large to display on your page.

 


See Also

Jump to site home page Lotech Solutions' Tips, Tricks, and Procedures

Back to Top