How to Compress a JPEG in Photoshop
To maintain optimal page speeds, it is suggested that images be compressed before using them on your website. Optimized images result in faster load times, less space is taken up on your hosting servers and your users will have a better experience.
Benefits for Using JPEGs File Format
JPGs are ideal for compressing images with many colors, such as photographs or graphics using shading or gradients. Which is why JPEGs are one of the most commonly used image file types. They use lossy compression, meaning the quality is slightly altered each time the file is saved. Lossy compression is irreversible, so it is advised to backup the original version of your images.
Drawbacks of Using JPEGs
JPGs do also have a downside. The two main grievances for using JPGs is that artifacts could appear in the image and colors could be changed to slightly different shades. If the negatives effects of the JPG compression are too severe, other formats such as PNG or GIF may be used. However, they also have many drawbacks.
Artifacts
Artifacts can appear in the image, which can be described as small dots that usually appear around sharper edges, such as text. The stronger the compression setting the more artifacts will appear in the image.
Compressing a JPEG Using Photoshop
Using Photoshop is my preferred method for compressing images. It has been extremely reliable and effective for many years. That's not to say that other methods wouldn't work.
Prepare Your File
Before saving, ensure the dimensions are set to an appropriate size. Anything over 2000px wide is probably too large. Typically image widths for websites are maxed-out around 800px wide. It is best to measure the pixel width of the image's container before setting the dimensions.
Adobe Photoshop: Save For Web
Now that your file is ready to be saved, use the shortcut keys: Ctrl + Alt + Shift + S or go to File Export Save for Web (Legacy). This will open the Save for Web window (below). Once you find the perfect balance of compressions and quality, you can save the optimized image to your computer.
The preview area displays the compressed image before it is saved. There are a few different tabs to choose from:
- Original: View the image without compression.
- Optimized: Preview the image based on the current settings.
- 2-Up: Is a side-by-side comparison of the orginial, different settings, or file types.
- 4-Up: Similar to 2-Up, except it is a four way comparison. (See Example below)
Presets: There are easy to use presets to choose from if starting out. To begin, you many want to select either JPEG Medium or JPEG High.
Image File Type: Directly below presets you'll find a dropbox that will allow you to change the output file type for the compressed image. You can choose from: GIF, JPEG, PNG-8, PNG-24, and WBMP.
Quality: Selecting the quality dropdown will activate the compression strength adjustment. The lower the quality the higher the compression.
The others can be left to the default state.
Typically I select convert to sRGB and set my preview to monitor colors. However that is only my personal preference.
Here is another oppertunity to ensure you have the correct dimensions for your image file.
The final file size will be displayed here. As the settings are adjusted this file size will update. It can be challenging to find a balance between high image quality and optimized file size.
Tip: You should try to keep your images under 100 KB.
Conclusion
Now that your image is optimized, it is ready to be uploaded to your website. If replacing a currently used file, you may want to check your PageSpeed before and after the change. If the size reduction was substantial enough, you could see a noticeable increase in your speed score on both desktop and mobile.
