Optimizing Images for the Web
The Problem and Objective
You’ve started a website and decided that pictures are the next important piece you must add to make it look good. You add the code with this new image sitting on your computer, and after finishing your page, you download your content to the server. Opening the website to check if it works, you run into a problem.
The images you added won’t load as fast as you want them to. According to a study by KISSmetric, most people will leave a website if it doesn’t load within three seconds. Here are a few more statistics that they found.
How do you fix the delayed loading time? You must adequately save your image. Following some simple steps, we can get your image to load in a shorter amount of time. But first, we have to know about image file types.
Image File Type Options
The web’s most popular image file types are GIF, JPG, and PNG. Each has certain strengths and weaknesses, so it’s best to learn what they are and remember them as you prepare them for the web.
PNGS
PNGs are popular file formats online. There are two options: PNG-8 or PNG-24.
PNG-8 is limited to 256 colors, which reduces the image file size. However, it is not meant for complex images.
PNG-24 is a higher-quality image, but with that quality comes a larger file size. PNGs handle transparency differently from JPEGs, which is a significant difference. Transparency is used to create high-quality logos. Logos are usually small, so you need to see plenty of details with a higher-quality image.
GIFS
Like PNG-8, GIFs only use 256 colors. Therefore, you should limit your use of this image file format to things that don’t use many colors.
JPGS
JPEGs are the most used file type for images on the web. They are photographs or images with many colors, shadows, or complex details. JPEGs can handle these types of high-color photos because they have a color pallet of up to 16 million colors.
JPGs are saved in any quality you want, which will help the balancing act quality and file size of your JPEG image.
The image I am using for an example today is a JPEG because it fits my needs and is also the file type that I use the most.
The Process
Starting with a photo I am using for another project, I will show the steps for optimizing images for the web (roll credits). I took this photo for a photography class in the spring semester 2018.
I quickly adjust brightness or cropping to make the photo look how I want it to be presented. The steps are as follows:
- Within Camera Raw, the program associated with Adobe increases the brightness.
- Change the temperature to a more day-like hue.
- Sharpen the image.
- Click the Open Image button.
- Within Photoshop, unlock the background image and duplicate it.
- Rename the layers.
- Use the spot healing brush tool within the copy to remove any imperfections.
- Save the image using .psd to save your layers if you want to adjust the image more.
- Flatten the image and save it as JPEG.
- Crop the image to the necessary size and save it once again.
Here is the modified first version without any reduction.
This image’s size and file size are as follows:
Width of 1968 px
Height of 2624 px
File Size of 4.46 MB
Reduce Image Size
This image and file size need to be bigger, but we can fix that. First, we go into Photoshop and reduce the image’s size. Under the image tab, we click image size. Once there, this dialog box will come up.
Within the width field, for my project, I will decrease the width to 150 pixels, and the height will readjust by itself (it adjusted to 200 pixels because of my cropping it earlier). Here is the size-modified image.
For your project, do what size you are required to have. If you are curious about what it will look like on the website without uploading it, view the image in Photoshop at 100%, and that will be the size you see when it is on a web page.
Save As Web
Now that the image size has been reduced, we start reducing the file size using Photoshop’s save-to-web feature. Go to the tab file, export, and save for the web.
Once the dialog box comes up, you select the file format you are using. This choice will bring up the correct options for your save. You then choose the compression quality you wish to have. Picture quality is the most important thing to focus on when reducing the file size. How you want the image to look is what the quality setting affects. According to some research, The best choice for the quality is usually the High, but if the image is very detailed, you may use the Very High setting. However, it all depends on what you think is best.
Here is my picture example of the different reductions. The images are from low quality to maximum quality.
In terms of file size, these images are as follows:
- Maximum — 17.6 KB
- Very High — 7.42 KB
- High — 4.48 KB
- Medium — 2.70 KB
- Low — 2.08 KB
I’m choosing to use the Very High-Quality setting because it best achieves the desired result. For my chosen photograph, just this step reduced the file size from 31.9 KB to 7.42 KB. However, one more step will also reduce the file size.
Compress The Image
When opening my compression program, JPEGMiniPro, all you have to do is drag the image to the center of the window. The program then works its magic and reduces the size of the image a little more. Because of my file size, the program didn’t take up much space, but your image will probably be reduced more. I put my original image into the program as an example of how it works.
It went from 4.46 MB to 1.22 MB, three times smaller. All that’s left now is to put your image into your website’s code and download it to your website’s server.
Outcome
When we started, my photo was reasonably large. However, with these simple steps listed below, we reduced the photo size from 1968×2624 to 150×200 to fit perfectly within the photo gallery I created. At the same time, we took it from a slow-loading 4.46 MB down to a much more reasonable 7.42 KB. So here’s what you need to do.
- Reduce the image size: this decreases the dimensions of your photo.
- Save the images for the web: reducing the file size without removing quality is possible.
- Compress the images: The best way to do this is to use an application made to compress images. These programs remove hidden, unneeded data without reducing the quality of your image.
Some examples of image compression applications/services are:
- TinyJPG
- Compressor.io
- Kraken
- ImageOptimizer
- ImageOptim
- Crush Pics
- Minifier
- JPEGMiniPro
What I Learned
This small percentage savings from reducing your file size will have lasting effects. As your website grows, you’ll appreciate what you save. These savings will lead to a better experience for you and those who view the website you have created.
