How to optimise images for web • Morgan Nesbitt Creative

How to optimise images for web

Optimising your images for the web will make sure that your website speed is fast and that your web page loads within the 3-4 seconds your viewer is expecting your page to appear in.

The first way to optimise your image is to resize the height and width of the image.

1. Best sizes for websites

A high definition image on a computer monitor is roughly 1920px wide.

If your image is going to be displayed at full width, resize and crop your image to 1920px  x 1080px at 72px resolution (for web).

If you are only using your images to fill in a space that sits in on half of your screen, crop/resize the image so that the longest edge is 1024px.

2. Crop or resize your image

There are many free tools to help you resize your image. I recommend using Mac Preview or Microsoft Picture because they’re built-in and easy to use.

After you’ve re-sized the image, export it and save it to the desktop as a jpeg at 100%.

Once you have resized the image, you will need to compress the image for the web. Compressing your image is the key to really reducing the load time on the web.

3. Compress the image again using a website like https://tinypng.com

This will remove any unnecessary embedded information from your image.

Simply drag and drop your images across to the website and download them when finished.

I like using this website as it compresses the images as much as possible without ruining the quality of the image. Other websites can take it a little too far.

4. Check the quality of the image after compressing

Check the quality of the image first. If only a small percentage of the original image was taken and the picture doesn’t appear clear, rethink the space the image is going to sit in – most product images only take up half of the space you need to upload in, so you can resize this image again to the longest width being 720px at 72px resolution.

However, if the image is to be set at full width, you may need to use the original image before compressing if it is not too big in size.

The aim is to have every image at 200KB at the very most.

If the image is too big after this stage, and this happens with most images exported from Photoshop that have a higher resolution, re-export your images, checking that the resolution is set to 72px.

Or reconsider using another image, or crop a section of the original image.

5. Load images to your website

And you are now ready to load these images to your website.

Don’t forget to add any ALT-text tags, along with the category or your discipline, and the location of where you work – these will help your website SEO in the long run, but that’s another story for another day.

Share this post

loved this and want more?

Let me land in your inbox and be the first to read my handy tips and tricks to get the most out of your branding photos. 

Keep reading

READ MORE BLOGS LIKE THIS

STAY IN TOUCH

Let me land in your inbox and learn more about business and personal branding photography, product photography and creating amazing content for your brand. 

100% no spam guarantee.

BOOKING REQUEST

And the adventure begins. I can’t wait to see what we come up with!!

To book your photo shoot or content creation session, please check the calendar for my availability and complete the booking form below. 

All booking requests are usually processed and confirmed within 24 hours . 

Booking hours

Monday to Wednesday – 5pm to 10pm
Thursday – 1pm to 11pm
Friday to Sunday – 8am to 5pm

BOOKING TERMS & CONDITIONS

  • Booking Minimum: 1 Hour
  • All requirements for your booking must be listed in the Special Requirements field when booking.
  • A 20% surcharge on public holidays may apply and is at my discretion. This will be advised on confirmation.
  • Surcharge may apply for night bookings after 6pm and early starts before 7am.

RESCHEDULES & CANCELLATIONS

  • Changes or cancellation to an existing booking requires notification to [email protected]
  • I require a minimum of 24 hours notice. A charge of 30% of the approved booking fee may apply for cancellations on the day of a booking and no shows.
  • Please make sure all of your team members are aware of our policy.

PAYMENT TERMS

  • Preferred payment methods are Direct Debit or cash on the day.