Exporting Images for the Web Using Adobe Photoshop CS3

[Music Playing]

Insidegeekcanada.com is powered by tubemogul. For more information visit www.tubemogul.com.

Hello everyone and thank you for tuning in the inside geek Canada. My name is Evan Thies. And today is our application tech feature. I am going to be talking about how to export images for the web.

Now this comes down to image compression. Any kind of digital compression is basically in two formats, either Lossy or lossless. Now lossless is basically a way of taking a little bits here and there and compressing them in you know all behind the scenes kind of way like a zip file then in the end will come back together and make the file the same rar, you know large file that you want.

Now for the web, this is of course not ideal, because most people do not have that kind bandwidth just to download that. So, we deal with Lossy and Lossy basically is the way of trimming up color or pixels are blurring the image in someway to make it a lot smaller and this makes the images quite digestive on the web, you know, a few kilobytes for an image. You can really bring the size down if you bring on the quality and the colors.

Now I am going to show you a quick tutorial on Adobe Photoshop here on how you can do that. But most image under that should have a way when you explore to lower the quality and adjust its color settings, so you can lower the file size so it is not so big on your website. So let us go take a look.

Okay we are in Photoshop now. Now before getting in to this, I first want to say, whenever you are making a website, you goal for the final export of any image should be with the smallest possible file size with the lowest acceptable image quality.

Now obviously, everyone’s definition of acceptable will vary but overall these are the settings that I have used that have gotten me descent results.

Now first I am going to open a photograph by going Command+O or Control+O on the PC and it is just a photograph of a truck here, I took when I was on camping one time. Now, for photograph you want to use a compression setting out of jpeg. Now jpeg is designed for photographs and exporting them. So let us go ahead and try that. So, in the Photoshop when you go to File and you go for “safe for web and devices,” now this will bring up this general dialogue box here and you can see over here, these are basically the presets in where all the menu options happen. And it is already selected jpeg so that is great.

Now first I want to know the file size. If you go down here it is 784 kilobytes which is quite large and you can tell it renders a different settings, so you can know depending on the person’s internet speed how long will it take to render. Now the quality is basically the majority of the compression for jpeg. Now right now it is set to 100 and as an amateur, I see this all the time, import images, same for web as a 100. Now if you expect them as a hundred, it is pretty much defying the point of I am using the jpeg compression, because upon the jpeg compression, just take the photographs and them smaller at a 100 you are hardly using that compression just a little bit on the base surfers but not really compressing it.

So I think, we are gong to start out at 30. Now that is actually not too bad, sub considering, it might even be able to sneak down to 20, now you know, if you go to 0, you are going to notice a lot of our defecting and even 10 is quite a bit. 20 is basic the lowest I would ever really go for an image, and 30 is optimum. Now if the quality is too low, I basically go on 10% increments and just kind of go up from there to a maximum of about 60, I would not say pushing at past 60 because you are going to get huge file sizes.

Now blurry, if you can add some blur, that will reduce the file size significantly but I will also impact the image quite a lot. You will not know details will be picked up for the file sizes will come down. If you will notice here at 30%, we are already down to 73 kilobytes which is pretty good!

Now, see this progress or check button? Once in a while this will influence the size, so if I tak