Image optimizing guide using Photoshop

Image optimizing guide using Photoshop

What is Photoshop?

Photoshop is a tool used for retouching and editing images that offers the possibility to create special images, especially for WEB pages. If you haven’t used this software so far, you’ll see that it’s very simple when it comes to image optimization, because this is our interest for now.

Image size

Before uploading the product images, logo, banners of your shopping website etc. you must choose the quality and size of the image file. You don’t want to make the mistake of uploading a large sized image because your pages will load very slowly.

The visitors won’t wait until your image is fully loaded and you leave your website immediately.

Image quality

Of course, nobody would want to upload blurred or pixelated images.

The secret would be:

  • Saving every image (optimize) especially for web, before uploading it to the website, to set up the quality and the size of the image.

It is important that images load fast on the website, actually the speed of the entire website it’s a decisive factor so that your visitors won’t get bored and so that you won’t lose any potential customers.

To obtain this, you will need a balance between the image’s quality and the size of the image file to properly add an image on your website.

Image optimization using Photoshop

Most of the people that have PC knowledge have heard at least once of Photoshop and that’s why a presentation for this software is no longer required.

Linked to image optimization using Photoshop the first step you have to make is opening the desired image in Photoshop, on 100% view, to have the exact size (to make sure that the image isn’t zoomed).

Edit Image Size (CMD/ CTRL + ALT + I)

Maybe you want to change the image size as well, and with the help of Photoshop, this thing is very easy to do. But you should know that if you want to increase the size of a small image, it will lose its quality (avoid doing this!).

Adjusting Image Size

Photoshop allows you to select in what to calculate you image’s size (pixels, percentages, etc.).

It is recommended you use pixels because it is easier to understand and also easier to work with, taking in consideration that you should be familiarized with this concept.

Canvas Size (CMD/ CTRL + ALT + C)

With the help of this, you can modify the width and the height of the image, by your requirements. It works as the CROP function does, and of course, here you can as well select in what your image size should be shown/ calculated (pixels, cm, mm, percentages, etc.).

Save for Web and Devices (CMD/ CTRL + Shift + ALT + S)

The final step consists of saving the image for the web, and selecting the quality and the desired format (JPEG, GIF, and PNG).

The JPEG format is the most known and used format for images.

Lossy Compression – if you choose this type of compression you will lose image quality, but considering that it uses a very small part of memory it is perfect for using it on your website’s images.

Now that you have learned how to properly optimize an image using Photoshop you will be able to correctly save the images of your products, logo, background and slider images, and through this optimization, you will gain a plus to your website loading speed.

Leave a reply

Your email address will not be published. Required fields are marked *