How to optimize image with Photoshop for website?


Graphic Design and Web Design are two types of activities. There is completely different types of process and abilities are required in these two activities. In today’s market, there is no place in where the graphics are not used. There is a huge difference in between the graphics file format in web and only in graphics file.

Compress images with Photoshop without losing  the picture quality

For example: if you make a graphics banner for your website, then save it in .jpg, .gif, or .png mood. And if it is for print media, then you will save it in .eps, .ai vector mood.

Optimize Image

Is the file format everything? No, as an ideal website designer you have to keep in mind about file format, besides being file size. You have to try as you will get the beautiful graphics in at least minimum size. And you will never be forgotten the quality of the size. As an ideal web designer, you have to keep in mind as the graphics requests fall in less amount in your server. In this case, to reduce the graphics request, you may use CSS image sprint.

Now watch that by using the tips of default photo shop, you can easily save the files for your web. So many people know it, but this is just for the new users:

#1. Use of “Save for Web”:

You can save the graphics by giving the command “Save for Web” from file menu which is made for your web. As a result, your graphics will be the useful of your web and has got a standard web format. But, most of the designs is habituated on “Save as” instead of “Save for Web”.

Save for Web

Next, if Save for Web will come in front of you, then you set the settings. Look the below picture: you can save the image in 3 modes such as .jpg, .png, .gif through using the Save for Web. Now, watch the red marked sign.

JPG Optimize

Now, save it in your favourite place. You must keep in watch that the quality of the picture will be maximum or high.

Note: If you are using the older version of Photoshop (Version 7.0), then you may get the other options to optimize the image.

#2. Use Web Colour Mood:

You are dong graphics for web but you are using graphics mood colour. As a result, your graphics will be done but, in remote server, the quality of the graphics may not be ok. So, if you do graphics for web, then you apply the colours in web mode. For this, select your background or foreground mode from the color picker of toolbar and select Only Web Colors.

Colour Mood

#3. Use Progressive Scan in JPG image:

For photography, .jpg is the ideal format. But, it is not ideal for web. Because, .jpg files are very high resolution and if you upload it, then for publishing so many requests have come on server. So, if you use .jpg format, then you use the value of progressive scans from JPG Format option. As a result, the quality of your desired file format will ok.

Progressive Scan in JPG image

#4. Save the PNG graphics files into the Transparency mood:

It is a good habit for saving or for using the graphics files into .png transparent mood which is making for the website. Because, these graphics files may use in any sections of the web and if there is no match with the colour of your graphics, then it looks bad. The graphics files of the most of the designers may match with the site. It may be logo or may be banner or may be background.

Transparency Mood

#5. Save the Animated Graphic files in .GIF mood:

You may say that .gif file is an opponent of .png. It may be caused due to the decrease of using the flush animation. So, .gif is dominating in the market. For showing any animation in web made by Photoshop, it will be better to use .gif instead of using .jpg/.png. The matter is that once you’ve made for your animated .gif graphics mode is saved and then cannot perform as well. So, you don’t forget to save in .psd.

Graphic files in .GIF mood

It’s for today.

Thank You!