PNGs for Screenshots - Revision history

RevampBot: Wiki revamp: restructure & modernise

2026-07-17T12:00:00Z

Wiki revamp: restructure & modernise

← Older revision		Revision as of 12:00, 17 July 2026
Line 1:		Line 1:
	It ~~is advisable~~ to use PNGs for screenshots. PNG is ~~a more~~ appropriate format these days~~. Once~~ upon a time, it ~~was not~~ well supported by browsers~~. However~~, ~~this is~~ long past.		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.

	~~Additionally, if we~~ are ~~talking screenshots (which might be~~ large ~~in size)~~, it ~~is wise to save~~ them nicely compressed for the web. This is ~~quite doable~~ with ~~photoshop~~ and many other tools.		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.

	~~What this means is that by~~ default graphics programs typically save images ~~in a~~ high quality. ~~However for~~ the web, ~~this~~ quality is unnecessary and only results in bigger files and slower downloads~~/page loads~~. For instance, a high quality image might be 200 kilobytes (or more~~). Web~~ quality might be 40 kilobytes. An image ~~if 1/5th~~ the size ~~means a 500%~~ faster ~~image download~~.		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~~ =		== Photoshop: Save As PNG instructions ==

	First, open the image in ~~photoshop~~. You can also hit ~~printscreen~~, ~~then~~ switch ~~over~~ to ~~photoshop~~ and do a File ~~>~~ New~~. By~~ default Photoshop ~~these days~~ offers to create a new image sized on the clipboard. Once the new image is open, ~~hit~~ paste and ~~then~~ crop down. Continue as below.		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, ~~Open~~ File ~~>~~ Save for Web &~~amp;~~ Devices.		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 ~~I like to~~ pick PNG-8 and ~~then~~ adjust the Colours. Watch both the file size in the lower left of the ~~windows~~ (58.74K in this example) and ~~watch~~ how changing ~~different~~ options ~~effects~~ the output image (the main ~~windows~~ shows how the image will look once compressed/saved. ~~I often lower~~ Colours until ~~either~~ image quality ~~begins~~ to suffer (then ~~pop~~ back up one level~~). Or~~ sometimes ~~lower~~ Colours actually make the image bigger.		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 ~~photoshopping~~!		Good luck and happy Photoshopping!

			== See also ==
			* [[Putting screenshots on Freegle Wiki]]

			Back to [[PR Materials]]

	~~==See also==~~		[[Category:Promotion & Publicity]]
	*[[Putting screenshots on Freegle Wiki]]


	~~Back to [[PR Materials]]~~

	~~[[Category:How do I do this?]]~~
	~~[[Category:PR_Materials]]~~
	[[Category:~~Freegle Wiki~~]]

Neville Reid: update internal link, remove dead link, add category

2024-04-14T16:51:08Z

update internal link, remove dead link, add category

← Older revision		Revision as of 16:51, 14 April 2024
Line 21:		Line 21:
	Good luck and happy photoshopping!		Good luck and happy photoshopping!

	~~Link to [http://wiki.modplugin.org/index.php/Capturing_Screenshots Basic Screenshot instructions]~~

	~~Link to [[Putting Screenshots on Wikipedia]]~~

	~~<br> Back to~~ [[~~PR Materials~~]]		==See also==
			*[[Putting screenshots on Freegle Wiki]]

	[[Category:How do I do this?]] [[Category:PR_Materials]]
			Back to [[PR Materials]]

			[[Category:How do I do this?]]
			[[Category:PR_Materials]]
			[[Category:Freegle Wiki]]

Jacky at 09:54, 13 February 2012

2012-02-13T09:54:24Z

← Older revision		Revision as of 09:54, 13 February 2012
Line 27:		Line 27:
	<br> Back to [[PR Materials]]		<br> Back to [[PR Materials]]

	[[Category:~~Tech_Group_Stuff~~]] [[Category:PR_Materials]]		[[Category:How do I do this?]] [[Category:PR_Materials]]

Dorothyjeanquinn at 10:30, 16 October 2010

2010-10-16T10:30:33Z

← Older revision		Revision as of 10:30, 16 October 2010
Line 22:		Line 22:

	Link to [http://wiki.modplugin.org/index.php/Capturing_Screenshots Basic Screenshot instructions]		Link to [http://wiki.modplugin.org/index.php/Capturing_Screenshots Basic Screenshot instructions]

			Link to [[Putting Screenshots on Wikipedia]]

	<br> Back to [[PR Materials]]		<br> Back to [[PR Materials]]

	[[Category:Tech_Group_Stuff]] [[Category:PR_Materials]]		[[Category:Tech_Group_Stuff]] [[Category:PR_Materials]]

Jacky at 05:54, 17 September 2010

2010-09-17T05:54:04Z

← Older revision		Revision as of 05:54, 17 September 2010
Line 1:		Line 1:
	It is advisable to use PNGs for screenshots. PNG is a more appropriate format these days. Once upon a time, it was not well supported by browsers. However, this is long past.		It is advisable to use PNGs for screenshots. PNG is a more appropriate format these days. Once upon a time, it was not well supported by browsers. However, this is long past.

	Additionally, if we are talking screenshots (which might be large in size), it is wise to save them nicely compressed for the web. This is quite doable with photoshop and many other tools.		Additionally, if we are talking screenshots (which might be large in size), it is wise to save them nicely compressed for the web. This is quite doable with photoshop and many other tools.

	What this means is that by default graphics programs typically save images in a high quality. However for the web, this quality is unnecessary and only results in bigger files and slower downloads/page loads. For instance, a high quality image might be 200 kilobytes (or more). Web quality might be 40 kilobytes. An image if 1/5th the size means a 500% faster image download.		What this means is that by default graphics programs typically save images in a high quality. However for the web, this quality is unnecessary and only results in bigger files and slower downloads/page loads. For instance, a high quality image might be 200 kilobytes (or more). Web quality might be 40 kilobytes. An image if 1/5th the size means a 500% faster image download.

	=Photoshop Save As PNG Instructions=		= Photoshop Save As PNG Instructions =

	First, open the image in photoshop. You can also hit printscreen, then switch over to photoshop and do a File > New. By default Photoshop these days offers to create a new image sized on the clipboard. Once the new image is open, hit paste and then crop down. Continue as below.		First, open the image in photoshop. You can also hit printscreen, then switch over to photoshop and do a File > New. By default Photoshop these days offers to create a new image sized on the clipboard. Once the new image is open, hit paste and then crop down. Continue as below.

	[[~~File~~:Photoshop-save-png-1-opened-image.png\|300px]]		[[Image:Photoshop-save-png-1-opened-image.png\|300px]]

	Next, Open File > Save for Web & Devices.		Next, Open File > Save for Web & Devices.

	[[~~File~~: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 I like to pick PNG-8 and then adjust the Colours. Watch both the file size in the lower left of the windows (58.74K in this example) and watch how changing different options effects the output image (the main windows shows how the image will look once compressed/saved. I often lower Colours until either image quality begins to suffer (then pop back up one level). Or sometimes lower Colours actually make the image bigger.		Finally, adjust options in this dialog. In particular I like to pick PNG-8 and then adjust the Colours. Watch both the file size in the lower left of the windows (58.74K in this example) and watch how changing different options effects the output image (the main windows shows how the image will look once compressed/saved. I often lower Colours until either image quality begins to suffer (then pop back up one level). Or sometimes lower Colours actually make the image bigger.

	[[~~File~~: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 photoshopping!		Good luck and happy photoshopping!

	~~Back~~ to [~~[PR Materials]~~]		Link to [http://wiki.modplugin.org/index.php/Capturing_Screenshots Basic Screenshot instructions]

	[[~~category~~: ~~Tech Group Stuff~~]]		<br> Back to [[PR Materials]]
	[[~~category~~: ~~PR Materials~~]]
			[[Category:Tech_Group_Stuff]] [[Category:PR_Materials]]

Jacky at 22:49, 21 July 2010

2010-07-21T22:49:14Z

← Older revision		Revision as of 22:49, 21 July 2010
Line 20:		Line 20:

	Good luck and happy photoshopping!		Good luck and happy photoshopping!

			Back to [[PR Materials]]

	[[category: Tech Group Stuff]]		[[category: Tech Group Stuff]]
	[[category: PR Materials]]		[[category: PR Materials]]

Jacky at 13:51, 19 July 2010

2010-07-19T13:51:20Z

← Older revision		Revision as of 13:51, 19 July 2010
Line 15:		Line 15:
	[[File:Photoshop-save-png-2-save-for-web-and-devices-menu.png\|300px]]		[[File:Photoshop-save-png-2-save-for-web-and-devices-menu.png\|300px]]

	Finally, adjust options in this dialog. In particular I like to pick PNG-8 and then adjust the ~~Colors~~. Watch both the file size in the lower left of the windows (58.74K in this example) and watch how changing different options effects the output image (the main windows shows how the image will look once compressed/saved. I often lower ~~Colors~~ until either image quality begins to suffer (then pop back up one level). Or sometimes lower ~~Colors~~ actually make the image bigger.		Finally, adjust options in this dialog. In particular I like to pick PNG-8 and then adjust the Colours. Watch both the file size in the lower left of the windows (58.74K in this example) and watch how changing different options effects the output image (the main windows shows how the image will look once compressed/saved. I often lower Colours until either image quality begins to suffer (then pop back up one level). Or sometimes lower Colours actually make the image bigger.

	[[File:Photoshop-save-png-3-save-for-web-and-devices-dialog.png\|300px]]		[[File:Photoshop-save-png-3-save-for-web-and-devices-dialog.png\|300px]]

	Good luck and happy photoshopping!		Good luck and happy photoshopping!

			[[category: Tech Group Stuff]]
			[[category: PR Materials]]

Paul Thompson: Created page with 'It is advisable to use PNGs for screenshots. PNG is a more appropriate format these days. Once upon a time, it was not well supported by browsers. However, this is long past. Ad…'

2010-03-15T22:22:30Z

Created page with 'It is advisable to use PNGs for screenshots. PNG is a more appropriate format these days. Once upon a time, it was not well supported by browsers. However, this is long past. Ad…'

New page

It is advisable to use PNGs for screenshots. PNG is a more appropriate format these days. Once upon a time, it was not well supported by browsers. However, this is long past.

Additionally, if we are talking screenshots (which might be large in size), it is wise to save them nicely compressed for the web. This is quite doable with photoshop and many other tools.

What this means is that by default graphics programs typically save images in a high quality. However for the web, this quality is unnecessary and only results in bigger files and slower downloads/page loads. For instance, a high quality image might be 200 kilobytes (or more). Web quality might be 40 kilobytes. An image if 1/5th the size means a 500% faster image download.

=Photoshop Save As PNG Instructions=

First, open the image in photoshop. You can also hit printscreen, then switch over to photoshop and do a File > New. By default Photoshop these days offers to create a new image sized on the clipboard. Once the new image is open, hit paste and then crop down. Continue as below.

[[File:Photoshop-save-png-1-opened-image.png|300px]]

Next, Open File > Save for Web & Devices.

[[File:Photoshop-save-png-2-save-for-web-and-devices-menu.png|300px]]

Finally, adjust options in this dialog. In particular I like to pick PNG-8 and then adjust the Colors. Watch both the file size in the lower left of the windows (58.74K in this example) and watch how changing different options effects the output image (the main windows shows how the image will look once compressed/saved. I often lower Colors until either image quality begins to suffer (then pop back up one level). Or sometimes lower Colors actually make the image bigger.

[[File:Photoshop-save-png-3-save-for-web-and-devices-dialog.png|300px]]

Good luck and happy photoshopping!