How to Optimize Images for Web
With the ever increasing use of “Responsive Website” design, it has become more important to speed up website load times. A major factor in the time it takes a website to load is the size of images used. Many of my clients have plenty of administrative access over their “WordPress CMS Websites”, but often times need help with image compression. This plays a huge role in websites that are focused on imagery, like personal portfolio sites and photography websites. The following will outline a couple ways to produce web-ready images for your website using Adobe Photoshop and a couple free online tools. And keep in mind that the article is mostly for those unfamiliar with image optimization.
Resize the original file
Often times, after you have scanned or loaded images into your computer from external resources, they are large in file size. The first step in properly optimizing images for web is to work with a realistic image size. Most desktops come with image utilities and programs that allow you to resize images and if that does not work for you, use Google to resize for you. If you are embedding simple images into your website that will remain a single size, keep it simple and uniform at like 500 pixels wide. If your image will be viewed in a larger format like with a lightbox effect, 800 pixels wide should be fine.
*Resizing is also important before you supply high resolution photos to your web team. A good high resolution working width for your web developer is about 2000 pixels wide.
JPG Compression in Adobe Photoshop
In my personal best practices I like to keep all web images less than 50k in size unless they are larger than 1000 pixels wide in which case file size will depend on the application of the images.
Adobe Photoshop has a “Save to web” feature that is specifically used for this purpose. Open your file in Photoshop and resize it to a usable size, like mentioned above. When you have adjusted everything and are ready to optimize the file for web, select File -> Save for Web & Devices.
Now let’s adjust some settings in the screen that pops up. Select the “4-up” tab in the top of that window, which will allow you to see 4 versions of the same image. The first screen (from left) should show the original image. Below the image you can see the original file size. Highlight the image on the next screen and click on the little icon to the right of the image size, to adjust the download speed. I like to leave this setting at “1 Mbps”. So this tells us that at 1 Mbps (a slower internet connection) how long this image will take to download.
With the image still selected, let’s adjust settings to the right making sure they are the same as in the example image below. Select “JPEG” from the ‘Optimized File Format’ dropdown box. Make sure the “Progressive” box is checked and that “Optimized” and “Embed Color Profile” are unchecked. Progressive download displays the image in multiple passes, so basically the browser will show the image, improving the quality as it downloads as opposed to showing nothing (or broken image) until downloaded. This way the user will see something instead of nothing.
Now, adjust the “Quality” settings, keeping an eye on the image size and time to download. Keep adjusting the value until you have a workable size, but the image is still acceptably clear. Save these presets, so they are available on your next file save. Save the file to your computer and move on or upload to your website.
Easy PNG compression
Without getting too technical in what it is, I have found that the PNG (Portable Network graphic) file format is the best image format for use in web in which transparency is required. PNG load times can be a significant factor in website load time. While Adobe Photoshop can handle compressing and saving images as PNG files I have found an online tool that does the job just fine and much faster.
Tinypng.org does just what its homepage describes, “Shrink PNG Files”. This is an excellent tool that is free to use and can really trim those large PNG files down so you can see a marked improvement in the load time of your website. All you have to do is browse to http://tinypng.org/ , click on the image at the top, navigate to your local directory containing your PNG files and watch the magic happen.
These are just a couple ways of easily optimizing images for your website and a very important step in decreasing the load time of your website. Take the time to optimize your website images and you will see a definite improvement in load times which can translate to increased site visits.
More About Us
DEV406 is a small creative studio based in beautiful Billings, MT. We are a group of talented professionals that create websites, web marketing stuff, audio and jingles and many other things for people just like you.