How to Optimize Images for Website Using Photoshop

Optimizing images is an important aspect in website development. Normally, an image taken from those high resolution cameras are very huge and usually intended for portraits, banners and everything. However, if you are using it for websites, they have to be reduced significantly in size and should be optimized to become lightweight. 

Today, I will teach you how to resize and optimize images using photoshop for website use.

  1. Open the file.

2. Resize the image first. Hover to Image tab > Resize Image

Put in the desired image size. For normal image size for posts and pages, you may want between 500px to 800px of width. Click Ok.

Image resizing 1

3. The next thing that you want to do is to save it in jpeg format.

4. Hover to File > Save As. Choose jpeg. And then click Save.

Save As function in Photoshop

A small window will appear, try to reduce the quality of the image. The image lower quality may not be very visible to the naked eye unless you reduce it that much. I suggest you stick between 50-80kb for an image that has around 700-800px width.

Image quality adjustment in Photoshop

You can actually see the quality as you try to adjust that quality scroll bar. You can also see the file size of the file as you adjust it. Click Ok.

Kindly read “Why Optimize Images in Your Website” to understand why you need to optimize your images.

Why Optimize Images in Your Website?

Website is the online representation of your company or of yourself if it a personal website. And understanding that, you would always want to make the best out of it. So here’s some reasons why optimize images in your website.

For faster website speed. One of the main goals of a web developer is to make the website load faster. When someone visit the site, you don’t want your visitor to wait too long before he sees what he is looking for. What you want is for him to stay and click more in your website. 

Having a slow website will turn off your visitor and will probably click back or look again for another website.

Also read “How to Optimize Images for Website Using Photoshop”.

For Better SEO. Website speed these days is now one aspect of website rankings. The slower your website speed, the more likely that it will rank lower.

Just imagine if a webpage is visited and it is about 10mb size in comparison to webpage that is only 100kb. There’s a huge difference there. If the visitor is using a slower internet, your website may not even be able to load, and search engines hate that.  It will immediately tell Google that your website is not loading thus, affecting your ranking. 

Better conversions. If you have a good website speed and that your visitor clicks for more, then you will probably have a better conversion. Internet marketers know this. So again, you will want to have your visitor stay on your website longer and clicking and searching for more inside it.

Furthermore, according to Strangeloop study, you can cost you 7% lost in sales for a 1 second delay of in loading your site. Of course, there are several factors that affects website speed apart from image sizes, but more importantly, image size is something that you can manage to resize at no cost.

Lesser bandwidth and storage. Hosting companies usually limits the bandwidth of the website hosted to them especially in shared hosting plans. The bigger the pages you have, the more bandwidth you will need. So it is best to use that bandwidth properly.

You also do not want your website to be affecting other sites during the “rush hour” traffic in your site. The more people who visits the site in one time, the more CPU and RAM resources are being used by the server. Image sizes on websites can add to that load of resources. This may end up to your hosting account being suspended by your host. 

Another thing to consider is your storage. Shared hosting usually have limitations in storage. If you are also a blogger who updates your site every now and then, you will definitely need a bigger storage capacity as time passes by.  With that, you may want to only store the “necessary” images and their respective sizes in your host storage.

Final thoughts

Resizing your images is not that difficult. It only becomes difficult if you already have a website and you started wrong, you used huge images before. But if you will start right and only upload optimized images from the beginning, then it should not be too much of a burden.