Skip to main content

Optimize Images for Web by Photoshop


Photoshop Save for Web option



Adobe Photoshop is a widely accepted tool for working with photos and images. For better printing and viewing experience we save images with high quality and resolution. And it makes the image large in size. If you use heavy images in website, blog or social networking sites, that causes the site to load slower. But you can easily optimize the images before uploading without sacrificing quality!



Today I'm gonna write about the Save for Web option of Photoshop. With this saving option, you can optimize your images. You can also reduce the size of those images which are unnecessarily large. 


And definitely optimized images will save internet bandwidth as well as time. And if you're a site owner, you must practice using optimized images on your site. If your site loads faster, you will get more traffic. And always keep in mind - slower sites are always boring for the users and thus they can't retain visitors. 


Save for Web/ Save for Web & Devices (Shift+Ctrl+Alt+S)

This saving option (Save for Web) is available in all running versions of Adobe Photoshop. As mentioned earlier, with this option, you can save an image optimized for web in terms of quality and quantity. 


Photoshop Save for Web option


Using Save for Web Option

To use the Save for Web option, you must come with a photo/ image. Remember, I'm gonna talk about the saving option only. So, you must practice with a complete image. I'm not gonna discuss how to modify it. 

Of course you can adjust your project image from Image menu. You can adjust image size, tone, contrast etc. 

Okay let's begin - 

  1. Open your desired image using Photoshop.
  2. Go to the File menu and choose Save for Web option.
  3. A new window will appear. Make sure the Optimized tab is selected. 
  4. At the right side you will get some preset settings. Test them one by one. And look at the bottom of your picture for image size. 
  5. Just below the preset, you will have image formats - GIF, JPEG, PNG etc. 
  6. Pick a format which gives your image a better look with lower size. 
  7. Finally, hit on the Save button. 

Now I would like to discuss about image formats:  



GIF - Graphics Interchange Format

One of the most common image formats used by the webmasters. GIF is great for saving animated images. You can also save images with transparent background through GIF. If you choose GIF format you can - 
  • Change the number of colors to be used with the image (2 to 256)
  • Control the amount of dither (0% to 100%)
  • Include/ Exclude Transparency
  • Increase/ Decrease the amount of Web Snap (0% to 100%)

And you should mark the Convert to sRGB check box.

Try each option by yourself. You must focus both on image quality and file size. Before saving the image, you can hit on the preview button just at the bottom of the window.  



JPEG - Joint Photographic Experts Group

The most widely used image format all over the world. JPEG is an image format which is supported by everywhere. If a website supports only one image format, definitely it will be JPEG. If a device can display only a single image format, it will be JPEG. So, you can easily understand how popular it is. 

If you use JPEG, you can control the image quality from 0 to 100 (Low to Maximum). And you should select the following options:
  • Optimized
  • Convert to sRGB

PNG - Portable Network Graphics (My Personal Choice)

PNG is a very common format for saving icons or logos. It's also great for saving pictures with transparent background. PNG produces much better quality than GIF or JPEG. That's why I prefer PNG format. 

In Save for Web option, you will find two types of PNG - 
  • PNG 24: Almost similar in size with the original image
  • PNG 8: Image size is much less than that of original image

So, I suggest you to use PNG 8. Because PNG 24 will save your image normally without any optimization. 


Photoshop CS6 PNG-8 Options


If you choose PNG 8, you can - 
  • Choose the number of colors
  • Control the amount of Dither
  • Increase/ decrease Web Snaps
  • Choose whether to be Transparent or not
And don't forget to mark the option - Convert to sRGB


Compare Formats Side by Side

You can also compare your image in different formats. At the top of the Save for Web window, the optimized tab is selected. That means you're viewing optimized image. The next tabs are 2-up and 4-up.  


Photoshop Save for Web Tabs


If you choose 2-up, your picture will be shown side by side. Or you can choose 4-up to get 4 views of your picture. 


  • Now choose the first picture. This will be original. 
  • Hit on the second one and choose GIF format.
  • Hit on the third one and choose JPEG.
  • Hit on the fourth one and choose PNG 8. 

Now you can compare the 4 views. Check which one is better in quality and lower in size. Select one which is better. And then save the picture. 

Look at the following image - 


Sampe Image Saved by PNG 8


  • The original format of the above image is PNG (without optimization). And its size is 555 KB.
  • When it's saved in GIF format, the size becomes 24 KB only!
  • If I choose JPEG, it becomes 80 KB.
  • And in PNG-8, it is 21 KB.
Of course the file size may vary depending on the number of colors, Amount of Dither, Web Snap etc. 





You must know some facts: (My personal experience)
  • When your image contains only a single color or few colors (Ex- Red, Yellow or Black), don't use JPEG or GIF. Because PNG can save it within few KBs. And the quality will be much better. 
  • If your image is too much colorful (contains numerous colors), you can use JPEG format to keep the file size lower. 
  • GIF stands in the middle of JPEG and PNG in terms of image quality. Depending on image type, the size of GIF and JPEG image varies. 
  • JPEG and GIF can't produce as better image quality as PNG. If you want better quality image (No matter whatever the size is), save your picture as PNG. 
  • If you use PNG 8 in case of image with gradient color, the quality of gradient part will deteriorate. In that case, you may choose PNG 24. 
  • Photoshop CS6 performs better than CS5 in case of optimizing images.

It's such a big post - more than 1100 words! If you're new in Photoshop, you may think this is something critical. But I can swear, if you practice Save for Web option for few days, you will find it very easy and interesting. Don't forget to leave a comment . . . 


Stay with Marks PC Solution to get more interesting IT topics!



Comments

Popular posts from this blog

GTA San Andreas Cheat Code (PDF)

After Vice City, San Andreas is the most popular game released by Grand Theft Auto (GTA). Usually GTA releases role playing game. San Andreas is such a game where you can act like a person. You can do everything. You have to take part in missions and complete them.  To make your missions easier, there are lots of cheat codes. If you can properly apply these codes, the tough parts of the game will be easier. Cheat codes are somewhat like keyboard shortcuts of computer programs.  I've shared 63 cheat codes below. There were more cheat codes in my collection, but I've omitted the less important cheats. Effects or result of the cheats are on the left side, and the codes are on the right side.  You can copy the following codes in your PC. And for your convenience, I've also uploaded a PDF file of these codes. You will find the download link at the bottom.  Effect Cheat Code Adrenaline Mode MUNASEF All Cars Explode ALLCARSGOB

Download Puzzle Flash Game - Save Them

Hey Flash Game Lovers! Today you're getting an amazing puzzle game - Save Them! It's a flash game and the download size is only 382 KB. In this game, you have to move 3 missionaries and 3 cannibals from one side to another through a boat. In any side, if the number of cannibals is more than the number of missionaries, then cannibals will eat the missionaries!  Download Save Them Download the game from the above link. It's a zipped file. Download size is only 382 KB! After downloading the game, you have to unzip it first. Then double click on the SaveThem to start the game.  How to Play? After starting the game, you will get the instruction. You have to make sure that in no side, the number of cannibals is not more than the number of missionaries. This is your only challenge. You have to take them from left side to the right side of the lake through a boat.  Press on a character to jump to the boat. Thus you can take any two of them a

Rules for Bengali Typing in PDF (Bijoy Layout)

Bijoy is the most popular layout for Bangla typing. The layout was developed by Mostafa Jabbar. He is the pioneer of Bangla typing in computer. More than 90% people use his Bijoy layout for Bangla typing. Today, I'm gonna share a PDF file with you that contains the Bijoy Keyboard layout with English fonts! If your keyboard doesn't have bengali fonts then you can print this PDF file to know where the bengali fonts are located in your keyboard. Additionally this file contains all the necessary rules and tips which are essential for Bangla Typing.  Now there are many other software available for Bangla Typing Layout. Such as Avro Easy, Unicode, Unibijoy etc. And there rules are also somewhat different from Bijoy. And some of their layouts follow the same rules like Bijoy. Hopefully this PDF file will support most of the rules when a layout is similar to Bijoy Layout.  Click to enlarge the image Download the PDF file from the button below. Follow