Save Images for the Web
Using the Save For Web feature is the best way to save images in a format that is web friendly and will work with any Internet-related task: social media, websites, email, texting. What’s more, the feature is designed to make the smallest file possible, so it will remove any unnecessary data from the image files, including metadata (you can select how much metadata to retain). Saving image for the web can be a little confusing initially because you have to choose from multiple online-friendly formats. Let’s talk about the three image formats that are most popular online and when to use each.
JPEG (pronounced “jay-peg”) is the most popular format for photographic images. You can set image quality when saving in Photoshop to find the best balance between file size and image quality. JPEG files can end in a .jpg or .jpeg extension.
GIF (pronounced “jiff” or “ghif”) is a popular image format for images without a lot of colors. The format is also popular when making very small moving images or animations and can include transparent pixels based on a specific color. GIF images are best used for logos, graphs, and clip art images that have few colors. For higher quality images, the GIF format is falling out of favor and being replaced with PNG files. GIF files end in a .gif extension.
PNG (pronounced “ping” or “pee en gee”) is a relatively new format that was originally designed to replace GIF. It’s an open source format that includes indexed as well as true color images, supports true alpha transparency, and is widely supported by applications and browsers. In many ways, PNG offers the best of the JPEG and GIF formats and is becoming more popular. (However,
JPEG is still used for photographs because it tends to create smaller files.) PNG files end in a .png extension.
To save an image for the web, do the following:
1. Choose File > Export > Save For Web (Legacy)
2. Select the desired format for your image.
3. Adjust the settings at the top of the Save For Web dialog box to determine the image quality. Choose your quality setting visually—depending on the image, the quality you will need will change. Medium often works for creating very small files where quality isn’t a major concern.
Select the JPEG medium preset.
4. To specify the image size: In the lower-right corner, enter values in the W or H field, or enter a value in the Percent field. When Constrain Proportions (the chain link icon) is selected, adjusting the value in the W field automatically adjusts the value in the H field to maintain the proportions (aspect ratio) of the image. Deselect Constrain Proportions if you’re distorting an image for an effect.
5. Click Save and choose a location to save your document. Name the document as you wish, if you write any space, it will automatically add hyphen (-) instead of space since for the hyphen you might have to see so disgusting coding in the URL. Here what happens when you use space, check the URL : https://clippingcreationsindia.com/images/clipping%20path%20002.jpg
See, they put clipping path 002.jpg and it became clipping%20path%20002.jpg. I hope you won't do the same mistake with your image and website again.
Tip : In the Save For Web dialog box, you can change your view to 2-up or 4-up to compare the quality between different file formats or settings with the same image. Another important thing is that, if you applied clipping path and want to keep the path, you shouldn't save image for the web at any cost. Otherwise, all your path will be removed.
Thank you for reading. Please don't forget to comment and share.
JPEG (pronounced “jay-peg”) is the most popular format for photographic images. You can set image quality when saving in Photoshop to find the best balance between file size and image quality. JPEG files can end in a .jpg or .jpeg extension.
GIF (pronounced “jiff” or “ghif”) is a popular image format for images without a lot of colors. The format is also popular when making very small moving images or animations and can include transparent pixels based on a specific color. GIF images are best used for logos, graphs, and clip art images that have few colors. For higher quality images, the GIF format is falling out of favor and being replaced with PNG files. GIF files end in a .gif extension.
PNG (pronounced “ping” or “pee en gee”) is a relatively new format that was originally designed to replace GIF. It’s an open source format that includes indexed as well as true color images, supports true alpha transparency, and is widely supported by applications and browsers. In many ways, PNG offers the best of the JPEG and GIF formats and is becoming more popular. (However,
JPEG is still used for photographs because it tends to create smaller files.) PNG files end in a .png extension.
To save an image for the web, do the following:
1. Choose File > Export > Save For Web (Legacy)
 |
| The Save for Web Option |
2. Select the desired format for your image.
3. Adjust the settings at the top of the Save For Web dialog box to determine the image quality. Choose your quality setting visually—depending on the image, the quality you will need will change. Medium often works for creating very small files where quality isn’t a major concern.
Select the JPEG medium preset.
 |
| The quality is set to 30 for this example |
4. To specify the image size: In the lower-right corner, enter values in the W or H field, or enter a value in the Percent field. When Constrain Proportions (the chain link icon) is selected, adjusting the value in the W field automatically adjusts the value in the H field to maintain the proportions (aspect ratio) of the image. Deselect Constrain Proportions if you’re distorting an image for an effect.
5. Click Save and choose a location to save your document. Name the document as you wish, if you write any space, it will automatically add hyphen (-) instead of space since for the hyphen you might have to see so disgusting coding in the URL. Here what happens when you use space, check the URL : https://clippingcreationsindia.com/images/clipping%20path%20002.jpg
See, they put clipping path 002.jpg and it became clipping%20path%20002.jpg. I hope you won't do the same mistake with your image and website again.
Tip : In the Save For Web dialog box, you can change your view to 2-up or 4-up to compare the quality between different file formats or settings with the same image. Another important thing is that, if you applied clipping path and want to keep the path, you shouldn't save image for the web at any cost. Otherwise, all your path will be removed.
Thank you for reading. Please don't forget to comment and share.
Comments
Post a Comment