When saving for web it is important to make sure the image is optimised for web to reduce webpage loading times. This tutorial will show how to save for web using Photoshop CC 2015.
DPI stands for ‘dots per inch’. Therefore, the higher the DPI number, the more information and quality there is in the image. Typically, if you’re printing a physical copy of an image it’s best to have the highest quality possible. The recommended minimum for an image for print is 300 DPI.
However, when saving images to publish on the web it is recommended to save as 72 DPI. This is because less information, in the form of pixels is stored within the picture meaning it will load quicker on a website and reduce loading times.
For more information on image resolution and pixelation there is an excellent article found on Creative Bloq.
How to save for web using Adobe Photoshop
Start off by changing the dimensions of the image within Photoshop and checking the resolution. It is advised to change the image width to around 1400px or less to fit the average screen size. The image below was already a 72 DPI resolution.
To bring up the image size window Image > Image Size or press alt > ctrl > I.
To save the image for web go to File > Export > Save for Web (Legacy). Under preset make sure the image is JPEG and change quality to 72 then click Save. For the keyboard shortcut to bring up this menu put in Alt+Shft+Ctrl+S.