Design Tips: Using the “Save for Web” Function in Photoshop and Illustrator

In Artwork Skills, Graphic Designing Skills
Save for Web Image Optimization

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.

Steps to Use the Save for Web Function in Illustrator

Step 1: The Settings Window of the “Save for Web” Function

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.

Step 2: The Three View Options

Up-2 Save for Web in IllustratorYour artwork that you want to save will be visible in the preview window, where there are three tab view options namely Original, Optimized, and 2-Up. The default of the tab view is original, but you better choose 2-Up as you will be able to see the result at the right side after the optimization.

Step 3: Choosing an Image File Format

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.

Choosing PNG 24 File Format in IllustratorA Graphics Interchange Format (GIF) of an image is commonly used for an artwork with solid color ranges. You can make the file size smaller by reducing the number of colors of the image such as a GIF 64 No Dither (64 colors). The lower the number of colors, the smaller the size of the image file. Most of the website owners prefer to publish a smaller size of the image file as a small image size loads faster on a web page. So, this function is used to optimize the load on your website or blog (Image SEO). However, if you are a design blogger, sometimes there would be a time you need to show the real size and graphic quality of an image or your artwork on your website or blog.

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.

Step 4: Save the Image

Save the Image as GIF fileAfter setting the image according to your image requirements, you can save it now.

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.

Steps to Use the Save for Web Function in Photoshop

Step 1: Open the Image

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.

Save for Web Function in Photoshop

Step 2: Adjust the Image Size as Your Requirements

At the Save for Web settings window, you can set the size of your image as your requirements.

The settings window of Save for Web function in Photoshop.Then, enter the desired size of the image file. The maximum width of an image that is commonly used for an article on a website is 640 pixels, but a smaller width would be better. While the best image resolution for a web is 72 pixels/inch.


Step 3: Choose an Image File Format of Your Choice

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.

Leave a Reply

Mobile Sliding Menu