Exporting Images

Web Image Optimization

Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render useful content on the screen. Ilya Grigorik

Exporting from Sketch

When saving images for web via Sketch, make sure to set your quality via the first export. Steps below on how to do this. The width of your artboard should be 1440px.

Select and Export

Select one image you would like to export and choose JPG at 1x size

  1. Choose Export
  2. Format JPG
  3. Size 1x
  4. Export Selected

Image Credit: Sketch

Choose JPG quality

  1. Choose 60%
  2. Check Progressive JPG
  3. Export

Image Credit: Apple

Check file size

  1. Right Click on image
  2. Select Get Info
  3. Make sure file is under 200 KB

Image Credit: Apple

Exporting from Photoshop

When saving images for web via Photoshop, make sure to Save as Web (Legacy). The width of your image shouldn’t exceed 1440px.

Select image you would like to export

  1. Select File dropdown
  2. Choose Export
  3. Select Save for Web (Legacy)

Image Credit: Adobe

Check format and quality

  1. Choose Optimized Tab
  2. Select JPG as format
  3. Choose High for quality
  4. Select Progressive
  5. Make sure file is under 200 KB

Image Credit: Adobe

If you are wondering what a progressive JPG is, here is an article that explains it well.

This website provides highlights of the Hess Corporation benefits plans and programs for 2020. If there is any discrepancy between the information provided on this website and the official plan documents, the official plan documents will govern. Hess reserves the right to amend or terminate the plans at its discretion at any time.