Web 6 Photoshop Optimising Images for Web

Overview of Image Preparation for Websites

• Focus on two main aspects: size and color model.

• Use only RGB images for web.

Sourcing Images

• Images can be sourced from clients or stock photo sites.

• Example used: image from Pexels.

Adjusting Image Size

• Options to resize images in Photoshop:

  • Image Size:

    • Go to Image > Image Size.

    • Enable resample to choose pixels as unit of measurement.

    • Example: Resize image to 2000 pixels wide x 1333 pixels high.

  • Crop Tool:

    • Select the crop tool.

    • Set specific measurements with width and height (e.g., 2000px x 900px).

    • Adjust crop to focus on desired part of the image, then hit crop.

Exporting Images

• Use File > Export > Save for Web.

• Preferred formats: JPEG for non-transparent images.

• Recommended settings:

  • Quality set to 60.

  • Do not change image size during export.

• Save images with a consistent naming format (e.g., no capitals or spaces).

Creating Multiple Images for Sliders or Galleries

• Repeat cropping and exporting to create images for sliders.

• Maintain size consistency for images across the webpage.

• Suggested image sizes:

  • Portfolio images: ~1200px (portrait) & ~1600px (landscape).

  • Design images for layout: ~600 pixels each if displayed in a row.

Conclusion

• The crop tool allows for more flexibility in creating uniformly sized images suitable for various website designs.