How to Export Images Out of Photoshop for the Web (BEST EXPORT SETTINGS)

How to Export Images Out of Photoshop for the Web (BEST EXPORT SETTINGS)


In this video, I’m going to show you the best export setting for Photoshop when you’re exporting an image for the web. So I’m going to use this image that I’ve created here. This is going to be the thumbnail and the website image for this video that I’m actually creating right now. So in order to export this, you want to go to file, and under file, you want to go to export and you want to do a export as. Now the old way was save for the web. This is the legacy version now. But in the previous version, save for the web was the way we did that and it’s still available, so if you want to do it, you could change your image size here. Right now, it’s 1920 by 1080. But this basically does a jpeg export or a png export. You can change the image quality from high to very high and it’s going to change the quality of your image, and it gives you the size in real time here. So this is one way to do it, but I’m going to show you the new way to do that, which is go to export and then export as. This is the new way to do it in Photoshop CC 2017 and beyond. This is a really easy way to do it. Basically, you just go to file settings and in this case, I want JPEG. PNG would be handy if you had some transparency in your image. For example, if I wanted the background to be transparent, I just want the text to show up, but in this case, going for the web, I’m going to go JPEG and the image quality on 100%, even though if the size ends up being too big, I could always reduce this to reduce the size. Then the image size is what’s going to change the file size. So right now, if I’m looking at the file size here on the left, it says 1 Megabyte. 1 megabyte is a large size for a website image, but I don’t need 1920 by 1080. For YouTube, I might leave it as that because Youtube does it’s own compression, but for my website, I want to reduce this and I know the website icon is about 650 and it’s doing the height adjustment for you. So this image was originally 1920 by 1080, so by decreasing it, you see the file size significantly decreased. 198k, that was from 1 megabyte, so it’s about one fifth of the size, so I’m just going to press plus here, to just bring it full size. So 650 by 366, that’s what I’m going to go for. Convert to Smart RGB checked on. I do always want to check that when I’m going to the web. That’s a better option for the web. If I decrease the image quality here, let’s say I decrease, take a look at the size. It got cut by another half there, so it’s almost at 100. So if you really are concerned about your website speed, you should reduce this as much as you can, but I like to keep the image quality at 100, but I never like to go less than 80 either. So if you do reduce it and you care about the file size being smaller, make sure you don’t go lower than 80%. File size based on what you need for Youtube. I’m going to do 1920 by 1080 and I’m going to just press export all. I’m going to put it here in my jpeg folder, and it’s just going to go ahead and export this image for me. So those are your best Photoshop settings when you’re going to the web. If you’re just going on YouTube and you don’t want to compress it, you could actually go to file save as and under save as, you could just change it from photoshop to JPEG. That’s going to give you the one megabyte version I had before, so it’s not doing further compression than that basic compression settings. So since I have a 200k image from before, I’m going to keep that as that, but I’m going to use this for YouTube. So I’m just going to replace the name of this and I’m just going to put Youtube at the end of it. I’m going to press ok. The maximum quality is going to be 12. That’s giving me the one megabyte image. I’m just going to press ok, so now I have two different versions of that file, one for my website and one for YouTube. To watch more How-to videos, go to Howfinity.com or subscribe to our Youtube page. Thanks for watching.

Related Posts

How much traffic do you think is generated by marketers searching for their own target keywords?

How much traffic do you think is generated by marketers searching for their own target keywords?

Today's question comes from Zac. Zac, you had good luck because whenever I loaded up the Google Moderator page, it
2020 SAPA – Classification & Promotion

2020 SAPA – Classification & Promotion

Hello everyone. This video will cover some information on the classes in SAPA in addition to the promotion process that

8 Replies to “How to Export Images Out of Photoshop for the Web (BEST EXPORT SETTINGS)”

  1. Hi guys, I am working on an 10 sec long Animated Banner AD in PS, please teach me how to export to (HTML with all JPGs) instead of animated gif (file size too big) which for Google Ads must be with in 150K

  2. Thank you so much for watching. Don't forget to subscribe for more Photoshop and tech videos! Thank you for your support!

  3. Does "save for web" mean the pic goes on the internet, or something else? I use photopea, and the only option to save images is "save for web". I'm like…. .no I don't want it to go to the fookin web!

Leave a Reply

Your email address will not be published. Required fields are marked *