Saving Pictures for the Web
I have visited several website in my life and a lot of them have pictures on there that the author has re-sized using the HTML width and height properties but the actual image size is still large. The result is a slow loading “small” image. But I have the solution to solve the annoying load time.
In this guide, I will use Adobe Photoshop on a Windows machine but there are other photo editing tools that you can use to re-size your photos such as GIMP.
Let’s say you have a photo of a Sunny D bottle that you wish to put on your site and it is 1500 pixels (px) wide with a file size of 1 MB. Using the HTML width and height properties will shrink the dimensions but not the file cause resulting in a slow loading image.
To solve this, open the image using Adobe Photoshop. Next, click “Image” in the menu at the top then “Image Size” (or use the keyboard short Alt+Ctrl+I).
An “Image Size” window will open up. Let us re-size our image to 800 width and 1067 height. However, the height property will re-size automatically because “Constrain Proportions” is checked by default (see image below). If unchecked, the image will not automatically be re-sized in proportion and may look distorted.
Now that our image has been re-sized, let us proceed to saving it. Photoshop has this feature called “Save for Web & Devices” which optimizes images for the web and devices. Click on “File” then “Save for Web & Devices” (Shift+CTRL+Alt+S) to open up the dialog box.
Click to enlarge
Select your file type to save as and play around with the settings until you are satified. As you can see in the photo, I selected JPEG for my image type, selected 60% for the quality and left the others with their default settings and that reduced my image size to 134 KB. Now that you have changed a few settings, it’s time to save your image.
Click “Save” towards the bottom of the “Save for Web & Devices” window then give it a file name and that’s it. Follow these instructions and you images will be smaller in size and load faster. And everyone loves a fast loading site.