How To Save Images For Web In Photoshop
https://www.shutterbuggs.com/ - One of the most challenging aspects of displaying photographs on the web is accurately resizing, compressing and saving images in a format that is small and fast loading without compromising on the quality.
In this video tutorial I’ll show you which file formats and settings you should consider using in photoshop to create high quality images that display quickly on your website.
With this particular file that I'm currently using, it's 444 meg in file size. We're going to run into some issues when we're actually trying to save this for the web when using Photoshop's built-in Save for Web and Devices setting that's here.
As you can see, if I was to click on this I'd get an error message. It basically says that my image exceeds the size that's safe for the web and devices that it's designed for. You want to make sure when you're actually saving for the web that you actually reduce your file sizes in order improve the performance of using the Save for the Web window.
If I go to Image and just go to Image Size, we'll just drop this down to say 2,000 pixels in width and click OK. What you'll notice is, I'll just fit to screen again, we'll now go to the Save for Web and Devices and the Save for Web window shall appear.
The first thing you'll probably notice is there are quite a lot of different options here. Don't get overwhelmed when first looking at this. The ones that you are really going to pay particular attention to are located in the top right-hand corner, up here.
They allow you to choose the particular format that you want to save in to. In this case they give you gif, jpeg, png 8-bit, and png 24-bit color. They also give you bitmap. You really want to avoid using bitmap, and to stick to the top four that are listed here, and predominately probably just the jpeg and the png 24, especially for color photographs.
With jpeg, you'll notice here you have a compression quality setting. You can actually choose what compression setting you want to use when actually compressing your photos for the web.
The one I recommend sticking to is a quality of 60%, which is a high setting. I wouldn't go anything under 60% because then you're actually going to start to see compression artifacts. That's something you want to avoid with your images when they go onto the web otherwise they start to look really hideous and really unsightly.
Anything under 60% I would avoid using. Anything over, you're more than welcome to use, but just remember that it's also going to increase the file size.
When I actually set the compression size, you'll notice that down in the bottom left hand corner here, you'll actually see the file size that's actually going to save to. In this case it's going to be 770.5 kilobytes.
It also gives you an example of the type of Internet connection speed here. If we had an Internet connection speed of 56.6 kilobytes per second, you'd notice that it would take 140 second download time in order to download this particular image.
In this particular case, that is actually quite large. It's 2,000 pixels, and that is larger than any website that you are ever going to be viewing. You really actually want to reduce the size.
We're going to keep it at a compression of 60%. We're going to leave it at Optimize. We're also going to, you have the option of embedding a color profile.
If you don't know what color profiles are, don't particularly worry about it at this particular stage in the process. I've got a whole section on understanding color management and we'll actually go into what color profiles are, and what they can actually do for your photographs.
You've also got some color management settings here. Don't particularly worry about then at this point in time. We'll go over these again later in a future video.
The area that you really want to sort of pay attention to here is the image size. In this particular example it's obviously too large to actually go out to the web. You want something sort of a least under 1,000 pixels. In most cases for a website or a blog you want to save around 600 pixels.
Within this window it will allow you to actually resize the image. As you can see there it's resized it, and that would be the actual size of the photograph when it's actually saved, which is 30% of the original size.
It also allows you to choose an interpolation that you actually want to use when resizing this. Don't worry about that at this particular stage because once again, we're going to go into image sizing, and I'll explain all the different variations of interpolation and which ones you should really use, and for what particular purposes.
For more photoshop tutorials visit our website: https://www.shutterbuggs.com/