Back to Tutorials

Optimising Images for Web

Build your own widgets and applications

Have you subscribed to TheFrogBlog? Find out more

Adobe Photoshop (all versions)

To reduce the size and DPI of an image in Photoshop:

  • Click on Image in the top menu


  • In the dropdown menu, choose Image Size...


  • Reduce the Resolution to 72
  • The width and height will reduce automatically, if the width is still above 1000, bring this down to 1000 Pixels
  • Click OK
  • The pop up will disappear and the image will be much smaller on your screen.  If you have the navigator open you will see your zoom is much less than 100%.




Before Creative Cloud, Adobe Photoshop had a Save for Web option (still available in CC under the Export settings or by using Shift + Ctr + Alt + S), CC does not require Save for Web and optimises all images on saving.

CC Users:

  • Click Save As in the File menu
  • Choose either JPG or PNG in the Save as type options
  • Click Save
  • Set your quality to around 7 (higher if you're not happy with the result)
  • Click OK


Earlier Photoshop versions:

  • Click Save for Web in the File menu
  • Select the 4-Up tab - this shows you the image with 4 different quality options.
  • Make sure the Preset is set up JPEG High
  • Generally the top-right image is the preferable quality option.  Click that to highlight it.
  • Click Save...


Final result


Image size: 139 kb

1.5% file size of the original

Tutorials in this series...

product hubs

FrogProgress-600_600.png  FrogLearn 600_600.png  FrogPlay 600_600.png

Product updates

A sneak peek at the new Frog App and updates to the Frog interface.
Save time with pre-populated site templates
FrogLearn now has over 30 mobile themes
How we can work with Multi-Academy Trusts
Progress Hub - All about our student progress tracker
All about our student progress tracker
All about our online assessment system
Helpful information that relates to GDPR functionality inside the Frog platform
Get access and use all our in-platform Site templates
Save time with pre-populated site templates



Discover how Frog can be used for...