How to Optimize Images for Web

by Oct 17, 2018Web Design

Hungtinton Beach Drummers
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest

Making your Website Loads Faster

Huntington Beach Drummers.

(The Optimized Image)

Video: How to Optimize Images for Web with Photoshop and Gimp

Getting Web Ready Images for your Website

Improve your SEO and Increase your Website speed by resizing and optimizing your Images.

Why we should Resize and Optimize images for Web?

When we have a large file size photo on our website, the page loading time is longer. The reason for this is simple, small files take less time to load than large files (photos). That is why is very important reducing the file size of our images, before upload to our websites.

1) Your website loads fast on your visitor’s browser.

2) Better ranking on Google (SEO  Friendly website).

3) Better position on Google page results.

The tricky part to optimize images for Web is to get an acceptable image quality and low image file size, but do not worry, you can see how the compressed image looks, before saving it.

A few things to know before optimizing our images for web

Before optimizing the image for the web, there are a few things we need to know.

There are a few image file types, JPG, PNG, TIFF, BMP, GIF, this is the most commons, but in my experience, website images, are mostly JPG or PNG.

The JPG is usually the best option for us. I’m not going technical with the JPG file format, but what is important is, support millions of colors and usually, the file size isn’t large.

PNG is the next option, the PNG file format, support transparency, and this is really good in some cases, for example, with logos or product images, when you don’t need the background. But in high-quality images, usually the size is bigger than a JPG, the reason here is because you can’t change the quality, only the quantity of colors, from millions to tens, used on your PNG image.

Here you can see the background difference between PNG and JPG format.

The Image quality and compression.

There are two different types of compression, lossy compression (reduce the size, but reduce the quality) and lossless compression (reduce the size, keeping the same quality).

In both Photoshop and Gimp, we can modify the jpg image quality, but we need to consider the lossy compression, is basically this way:

  • High Quality = Large Image Size
  • Low Quality = Small Image Size

So, we need to balance between both, on my workflow, I usually set the quality trying to get a file size less than 100kb. But all depends on where you need to place your image.

There is a lot more technical stuff about compressing images for web, but I want to keep this simple.

How to Resize and Optimize Images for Web with Photoshop

1) Start Adobe Photoshop, once the application is running, and click OPEN (if you do not see this button, go to File on the top menu, and click open from the drop menu)

2) Select your Photo and click OPEN.

Reducing the Image Dimensions with Photoshop

3) Once your file is open, the first thing to do es to resize the image, for doing this, go to IMAGE on the menu, then click IMAGE SIZE, from the drop menu.

4) Once the Image Size window is open we are going to resize the image, by changing the WIDTH, but before, make sure of two settings,

  • The Chain Icon must be connecting the Width and Height (with lines),  this means: Do not Constrain Aspect Ratio
  • The units should be on pixels. Is most common work with pixels on the web.

Write the new size and click OK.

After Click, You’ll see your image smaller than the original on the center of Photoshop Viewer but does not matter, you can apply Zoom (by pressing Alt + Scrolling with the middle mouse button).

Optimizing Images for Web with Photoshop

5) Once we resize the image, is time to optimize your photo, go to the main menu and click File, from the drop menu hover over EXPORT, then from the sub-menu, click SAVE FOR WEB.

6) Now we need to change the settings in the Save for Web window

Select what format do you need for your image from the menu, for this image I’m using JPEG.

Set the quality of your image, you can see the file size on the left bottom of the window, if you want to see how it looks your image before saving it, you can click Preview on the very bottom left of the Save for Web window. Once you are comfortable with the result, click SAVE.

I’m not going in deep with all the settings, but I usually keep the setting as follow:

Progressive .- Unchecked.

• Optimized .- Checked.

• Embed Color Profile.- Unchecked

• Blur .- Cero.

• Keep all the extra settings as is.

7) Finally, Name your image, remember to describe in the name, what actually is in the image, this is good for SEO.  Select your folder and click SAVE.  

How to Resize and Optimize Images for Web with Gimp

Gimp is an Image Manipulation Program, like Photoshop, but is free and you can download directly from their website.  Is available for Linux, Mac, and Windows. Gimp

1) Open the application, once the application is running, click from the top menu File, then, from the drop menu click OPEN.

2) Select your Photo from your computer and click OPEN.

Reducing the Image Dimensions with Gimp

3) Once you opened your photo, click Image, from the top menu, then click SCALE IMAGE from the drop menu.

4) On the Scale Image Window, set the units to Pixels (px) and keep the chain icon connecting the Width and Height to maintain the image proportions (ratio). Change the Image Size, and click SCALE.

Optimizing Images for Web with Gimp

5) Once your image has been resized, go to File, and click EXPORT AS from the drop menu.

6) On the Export Image window, name your image including the extension (.jpg or .png), select the folder where you want to save your photo, and click EXPORT.

7) From the Export Image JPEG Window, set the quality, and click EXPORT.

Note you if your file is a PNG, the window will be a little different than the image below, but you can set the quality as well, and then click Export.

 

You are done, with compressing your photo for the web using Gimp.

 

How to Optimize Images for Web with Photoshop and Gimp | Results

Here is the difference in dimensions and sizes between the original and optimized images.

  • Original Image Size is 7.82MB, and the Dimensions are 6000 x 4000 pixels.
  • Photoshop Image Size is 71.7 KB, and the Dimensions are 800 x 533 pixels.
  • Gimp Image Size is 86.7 KB, and the Dimensions are 800 x 533 pixels.

In this example, for both, Photoshop and Gimp the compression was 50, and the results and image quality are almost the same.

How to Optimize Images for Web Optimizilla

Oline Image Compression Tools

Optimizilla is another tool to compress your images, is an Online free tool, really easy to use, you just need to drop your files there when is done, click download on each image or all in bulk.  

But with Optimizilla, you can not resize your images, only compress it.

On the other hand, you are able to change the compression level and see how it looks, before download.

Try Optimizilla, is a user-friendly image compressor and a free option.

Fast Loading Page Speed is The Benefit

You took the time to resize and optimize your images, before upload to your website, so let see the benefits.

For this, I’m going to use Pingdom, this company offer a lot of web services, but what I want to show you is the Pingdom Speed Test

Once there you just have to write your Web Page URL, select the server where you want to test from, and click START TEST.

This is the results for the loading speed tests for the web page, one for the non-compressed image and a second one for the Photoshop image (resized and optimized).

As you can see, the original photo takes a lot of time to load.

Original Image Speed Test

Optimized Image with PhotoShop Speed Test

Optimizing Images for Web | Final Notes

The Loading Page Speed results may vary, depending on the time, weather, where did you test your page from. Your hosting is a really important part of the speed game.

In my case, I’m using WordPress and a very good hosting service from WP Engine, I also have a CDN (Content Delivery Network) service from Cloudflare, so all this help with Loading Speed of our websites.

0 Comments

Submit a Comment

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

Who trust us

Our company is not B2B or B2C, our company is People 2 People, and these are some of our clients.

  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest

Pin It on Pinterest

Share This