Thursday, November 8, 2012

DIY: Preparing images for the web in Adobe Photoshop

As a blogger or web developer, it's important to consider how the design of your website affects its users. If your layout consists of many images or you feature a good deal of photography on your blog, you could be taking up a lot of unnecessary space that can make your page's loading time drag on forever. Luckily, Adobe Photoshop has a way to prepare images for use on the web that will greatly decrease your file size without sacrificing image quality. Here's how!

Once your image is ready to be uploaded to your blog or site, select "Save for Web" or "Save for Web and Devices" from your File menu.


Here you can see how much smaller your image is just by saving and optimizing this way! You can also view your image's original file size and compare it to its potential size in other file formats from this window.



About file types

Choosing a file type is important! Some images contain fewer colors than others, and some have transparency. The file type you choose will differ depending on these circumstances.

PNG

I find that PNG format covers most of my needs for both photographs I'm sharing and web graphics that I'm using in my blog. It allows for transparency and supports interlacing. 

JPEG

JPEG can be used for photographs as well, although I often edit or resize these, which can cause a JPEG file to lose data or display grainy artifacts. I find that PNG-24 does the job of any file I'd otherwise save as a JPEG. 

GIF

You can choose a GIF format when you're working with web graphics, line art, and animations. I rarely use GIF format, unless I'm creating an animation.

Ideally, you should choose the file type that allows the best quality, but yields the smallest file size. If your image looks grainier than it did before you tried to save it, then you should opt for a file type that may be a bit larger. This isn't a huge issue, because saving your images this way optimizes them, which still considerably reduces your file size and download time. You can view up to four different file format options in the 4-up tab of the "Save for Web & Devices" menu, which can help you decide which file types will correctly display your image and at what size.


Once you've selected the proper file format, it's time to click "Save"! This will save your image as a copy, allowing your original file to remain untouched.

I hope this tutorial has been helpful! If you have any questions or need me to elaborate further on a topic, feel free to leave a comment below. Thanks for reading!

2 comments:

  1. Thanks for this! I'm still a novice at photoshop so this info is really useful!

    ReplyDelete