Joomla! Documentation™

How to improve screenshots

In every current operating system with GUI there is the possibility to take screenshots of the screen content. Without simple post-processing, such screenshots are often fuzzy and blurred.

(Comment: describe software used)

Four easy steps to better screenshots

From an existing screenshot or one to be taken to a better image:

• Crop image (if necessary).
• Scale image (if necessary)
• Filter: unsharp mask (essential)
• Saving as PNG (recommended)

Taking a screenshot

There are countless applications that can capture a view/window from the screen. The choice is completely independent of the further procedure. Those software programs that can also capture parts of the screen and have a screen magnifier for a more precise selection have an advantage. An application that can save the screenshot in PNG format is also preferable. The widely used JPG or JPEG format is less suitable, as the data compression there is not loss-free.

Loading the file into an image editing programme and adjusting the size

The choice of which tool to use for the following steps is also left pretty much up to the JDoc author. Care should be taken that the software has the functions/features outlined above. If the screenshot still contains superfluous border areas, the image should first be cropped to the desired image section using the crop function. Care must be taken to ensure that the screenshot made (after cropping) has at least one of the page widths mentioned below. In the Joomla! documentation (and the JHelp pages), four image widths are common.

• 800px for the overview at the top of the page
• 600px for larger sections (e.g. various tabs)
• 400px for general subareas
• 265px for smaller subareas or details

(Comment:' In the long version, there could be more detailed info about the import options and colour management here)

However, it is not a good idea to reduce the screenshot exactly to the required page width after loading the image. Experiences have shown that a 25% larger image width is recommended (800px → 1000px). The screenshot is then scaled to the required page width. Smaller deviations are insignificant. Files that are too large do not bring better quality, they only eat up storage space.

Warning: It is absolutely necessary to avoid enlarging a screenshot that is too small using the scaling function. This will result in a loss of quality that cannot be fixed.

(Comment: In the long version the variables of the scaling function will be described)

Apply filters

This is the most tricky step. It requires careful adjustment, which may vary slightly depending on the motif, monitor, operating system and browser. With the help of the example pictures below, however, you can quickly find the optimal setting for your own system. Three parameters are adjusted, of which only one should really be varied after the basic configuration. However, it is easy to exaggerate the filter effect and then destroy the quality.

(Comment: Here the example images are still missing)

Saving to be displayed on the web

It sounds obvious, but is often ignored:

• Better image quality is often only possible with larger files.
• Large files demand more bandwidth to load quickly and consume valuable disk space.

Therefore, it is important to find the best possible compromise between these two requirements. An important factor influencing the size of the file is the number of pixels an image contains and has already been mentioned above. style="colour:#c9211e;">Comment:In a long version, image calculations could be shown).

The raw version of image files can quickly exceed 10 MB. It is therefore necessary to compress the data when saving. (Comment:In a long version - presentation of compression methods)

The PNG format compresses loss-free. It is the first choice for the application needed here. But even there, some pixels can be saved by good design. See:(Comment:In a long version - export dialogue)