Optimize images for web without losing quality - Photoshop

Quick loading images are important and a quick loading website keeps visitors engaged. In order to do so, a good balance between image quality and image file size will be needed when you save an image to web. This article explains in detail how to optimize images for web without losing quality by using Photoshop.

[post_ads]
Not optimizing images properly results in extremely slow loading time. So first you have to resize image without losing quality and then you have to use Photoshop's Save for web option to get the best possible quality in the smallest file possible.

Optimize images for web in Photoshop

Image editing programs like Adobe Photoshop are ideal when resizing images. Here I am using Photoshop CC but the steps are the same with any recent version of the program. You can also use Gimp or Irfanview to optimize images for web.

In this video, learn how to correctly save an image for use on a website.

[##fa-youtube## SUBSCRIBE]

Resize image in Photoshop

When you don’t know how to resize an image correctly, you’re much more likely to make a bad first impression on your website’s visitors. Recently I uploaded an article about how to resize image in Photoshop without losing quality.

Saving images for web in Photoshop

To save image you have to choose correct image format that has a good quality with faster loading on your site. There are many image formats available like JPEG, PNG, GIF etc. but only a few works on the web. JPEG is a format with the extension .jpg. This image type is lossy, and you can control the compression level in image editors. It is good for saving images with millions of colors with smaller file size. So I recommend you to choose always JEPG format while saving your image for web.

Option for exporting images for web is found under File > Save for web... other graphic editors must have something similar, probably under File > Export.

Simple steps to save image for web

• Choose File > Export > Save for web…
• Always choose JPEG format for web. 
• You can check the option Progressive if you like, it's only difference is how the loading will look like. Progressive images first appear blurry, and then become clearer as the image loads. Non-progressive images load line-by-line.
• Then choose quality level, High if the image will be visible, Medium or Low if it's meant as a background. To have more control over the quality, use the slider or enter number in the field Quality.
• Once you have found the perfect balance between quality and compression, click the button save.

Saved image would load faster with slow connection. Its quality is good enough for web purposes, and we used 75% less memory than before.

READ: How To Hide WiFi Network From Others

If you enjoyed this article, I’d be very grateful if you’d help it spread by emailing it to a friend, or sharing it on Twitter or Facebook. Thank you!

[post_ads_2]