Before diving into this tutorial, it is important to note that we will be focusing solely on image resizing, excluding other optimization techniques such as selecting the most suitable image formats for your requirements or enhancing SEO through the use of alt tags for improved searchability in platforms like Google Images. This concise guide will demonstrate how to decrease the file size of images you plan to host online.Begin by navigating to File > Open (Ctrl/Command+O) and importing your image into your workspace.Utilize the Actions feature to record all commands during this process, including the ‘Save for Web & Devices’ command, enabling batch processing of images without the need to open each one individually. Access the Actions Panel by going to Windows > Actions (Alt/Option+F9).Within the Actions Panel, click the ‘Create new set’ icon, name your new set (I named mine ‘Images’), and then click the ‘Create new action’ icon to start recording. Name your action, for instance, ‘Image Optimization’, and click ‘Record’ to begin. All subsequent commands will be recorded in the Actions Panel.Save your image for web and devices by going to File > Save for Web & Devices (Alt/Option+Shift+Ctrl/Command+S). A dialogue window will appear in your workspace. I aim to maintain a decent quality, so I have selected the following settings:
Preset: JPEG High (Quality set to 60)
Optimized: Checked
Convert to sRGB: Checked
Image Size: Adjust according to your site specifications
Percent: 100%
Quality: Bicubic
Ensure that your image does not exceed 600 pixels in width by resizing it while retaining the original proportions using the toggle on the ‘link’ icon. You can also preview the image, file size, and quality comparison by selecting the ‘4-Up’ tab in the ‘Save for Web & Devices’ window. Adjust settings as needed to find the optimal balance between quality and optimization. To preview the image in real size, click the ‘Preview’ button.When satisfied with the image, click ‘Save’. I opt to save my images in a separate folder to preserve the original, larger images for future use. Close the image file in your workspace.Return to the Actions Panel and click the ‘Stop playing/recording’ button to end the recording. This will include all commands, including closing the image. Be aware that saving the image to a new folder and not saving the original after closing it will be reflected in the recorded Actions.Should you need to replace the image, ensure it is done during the recording process. You can view the details of each recorded Action by expanding them.Proceed to apply these steps to the remaining images.Instead of processing each image individually, leverage the Action you have just created. Go to File > Automate > Batch. Use the following settings:Choose the Actions Set and Action you have recorded, and set your Source and Destination Folders. Ensure that ‘Override Action “Save As” Commands’ is checked to include the ‘Save for Web & Devices’ command.Keep the File Naming as the original document name with the extension.After resizing your images in Photoshop, further optimize them using an image-optimizing tool like Smush.it. It is user-friendly, quick, and free.Access Smush.it from your browser (full URL: https://www.imgopt.com/) and click on the ‘UPLOADER’ tab. Select your image files and click ‘Open’.Observe the optimization process. After completion, you will receive a message detailing the percentage and total size saved. Ensure that ‘Keep directory structure in zip file’ is checked to easily replace images under different subfolders.Download the optimized images, extract the zip file, and replace the old image files with the new, reduced files.This quick guide has outlined the process of reducing image size in Photoshop in just five simple steps, and you have also created Actions for efficient batch image optimization, saving you valuable time.For a comprehensive guide on image optimization, from selecting the right formats for web projects to more advanced techniques, refer to The Comprehensive Guide to Saving Images for the Web.
