PNGs for Screenshots: Difference between revisions
Neville Reid (talk | contribs) update internal link, remove dead link, add category |
Wiki revamp: restructure & modernise |
||
| Line 1: | Line 1: | ||
It | It's best to use PNGs for screenshots. PNG is the appropriate format these days - once upon a time it wasn't well supported by browsers, but that's long past. | ||
If your screenshots are large, it's also worth saving them nicely compressed for the web. This is easy to do with Photoshop and many other tools. | |||
By default, graphics programs typically save images at high quality. For the web, that quality is unnecessary and only results in bigger files and slower downloads. For instance, a high-quality image might be 200 kilobytes or more; web quality might be 40 kilobytes. An image a fifth of the size downloads five times faster. | |||
= Photoshop Save As PNG | == Photoshop: Save As PNG instructions == | ||
First, open the image in | First, open the image in Photoshop. You can also hit Print Screen, switch to Photoshop and do File > New - by default, Photoshop offers to create a new image sized to match the clipboard. Once the new image is open, paste and crop down. Continue as below. | ||
[[Image:Photoshop-save-png-1-opened-image.png|300px]] | [[Image:Photoshop-save-png-1-opened-image.png|300px]] | ||
Next, | Next, open File > Save for Web & Devices. | ||
[[Image:Photoshop-save-png-2-save-for-web-and-devices-menu.png|300px]] | [[Image:Photoshop-save-png-2-save-for-web-and-devices-menu.png|300px]] | ||
Finally, adjust options in this dialog. In particular | Finally, adjust the options in this dialog. In particular, pick PNG-8 and adjust the Colours setting. Watch both the file size in the lower left of the window (58.74K in this example) and how changing the options affects the output image (the main window shows how the image will look once compressed/saved). Lower the Colours setting until image quality starts to suffer, then step back up one level - sometimes lowering Colours can actually make the image bigger, so check as you go. | ||
[[Image:Photoshop-save-png-3-save-for-web-and-devices-dialog.png|300px]] | [[Image:Photoshop-save-png-3-save-for-web-and-devices-dialog.png|300px]] | ||
Good luck and happy | Good luck and happy Photoshopping! | ||
== See also == | |||
* [[Putting screenshots on Freegle Wiki]] | |||
Back to [[PR Materials]] | |||
[[Category:Promotion & Publicity]] | |||
[[Category: | |||
Latest revision as of 12:00, 17 July 2026
It's best to use PNGs for screenshots. PNG is the appropriate format these days - once upon a time it wasn't well supported by browsers, but that's long past.
If your screenshots are large, it's also worth saving them nicely compressed for the web. This is easy to do with Photoshop and many other tools.
By default, graphics programs typically save images at high quality. For the web, that quality is unnecessary and only results in bigger files and slower downloads. For instance, a high-quality image might be 200 kilobytes or more; web quality might be 40 kilobytes. An image a fifth of the size downloads five times faster.
Photoshop: Save As PNG instructions
First, open the image in Photoshop. You can also hit Print Screen, switch to Photoshop and do File > New - by default, Photoshop offers to create a new image sized to match the clipboard. Once the new image is open, paste and crop down. Continue as below.
Next, open File > Save for Web & Devices.
Finally, adjust the options in this dialog. In particular, pick PNG-8 and adjust the Colours setting. Watch both the file size in the lower left of the window (58.74K in this example) and how changing the options affects the output image (the main window shows how the image will look once compressed/saved). Lower the Colours setting until image quality starts to suffer, then step back up one level - sometimes lowering Colours can actually make the image bigger, so check as you go.
Good luck and happy Photoshopping!
See also
Back to PR Materials
