Probably you rarely save your Photoshop or Illustrator work using the “save for web” function. Most designers are getting used to using the “save as” function of Photoshop or Illustrator to save an image editing or digital design artwork in a JPG format. Whereas, saving your work using the save for web function is very useful because you can determine the desired size and format as needed, in addition to the image file size that you can reduce efficiently without reducing its graphical quality.
The save for web function in Photoshop and Illustrator allows you to review the image that you are going to save, as there will be a preview window to view your recent work. In Illustrator, save for web follows the specified artboard size.
After preparing the image file you want to save, consider the artboard that has been determined, then click the File tab → Save for web. A setting window will appear and there you can adjust the image settings based on your image requirements to use it in a website.
Now, you can see the image format that you want at the right side. In which, there are some settings you can do on that window.
Dithering option is a setting to make your artwork looks like it has more colors by making patterns in the colors. For example, plaid patterns that are closer. It also makes the image file size larger. Most designers do not like such effect and prefer the No Dither option.
Joint Photographic Experts Group (JPEG) is basically used for artworks with smooth gradations from one color to another. Most images are stored in JPEG format. If you have a shadow or a mixture in your digital artwork, you should choose this format.
The PNG-8 is quite similar to the GIF file format. Unless you have a specific reason to save it as PNG-8.
A PNG-24 image file of format the best support of two image file formats (GIF and JPEG). Portable Network Graphics (PNG) supports nice gradients like JPEG as well as a transparency like GIF.
A smaller size of image files is good for web purposes as they will not slow the performance of the web. Therefore, adjust the settings as efficient as possible without degrading the image quality.
Then, check the image display. This way is to see the preview of the image display by pressing the preview button in the bottom left corner.
After that, you are going to resize the image by adjusting the image size dimensions in the settings. You can adjust the size as your requirement.
After all, save your artwork accordingly and store it in any storage place you want.
After finishing your image editing, you are going to adjust the image to an appropriate format of the image file for a website. On the menu, go to “File → Save for Web” or you can use a shortcut Ctrl + Alt + Shift + S. After that, a Save For Web window will appear.
At the Save for Web settings window, you can set the size of your image as your requirements.
At the preset, you may choose “GIF 64 No Dither”. Also, make sure there is a check mark in the. Then, press “Save” to save the optimized image (you can save the image as a new file or overwrite the original file). Now, your new image file is ready to be used on your blog or website.