Tutorial

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%.

 

Saving

 

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

Quicklinks
 

BLOGS
 


Discover how Frog can be used for...