All website owners should optimize all of their images before uploading EVERY SINGLE TIME.
This tutorial shows how to optimize images with the free, open-source GIMP image editor. There’s no reason you have to use this particular application, but if you don’t already own a program like Photoshop, Illustrator, Fireworks, or whatever, GIMP has the virtue of costing $0.00 and being available for Windows and OSX. Download it if you need it, skip it if you don’t.
One of the most commonly forgotten steps when site owners/admins work with content on their websites is optimizing image files so they load quickly and look great. All website owners should optimize all of their images before uploading EVERY SINGLE TIME. Here’s why:
- it can easily make images load 10-100 times faster. gadzooks, that’s a gigantic increase in speed, but it’s true! visitors on crummy 3G connections will appreciate it when their phone doesn’t have to load a bloated image at speeds that evoke the good ol’ days of dialup modems.
- Google (and other search engines, for the legions of hardcore Bing/Ask users among my readership) reward fast-loading sites with better page rank. using correctly optimized images is one of the most important quick & painless things you can do to help win the SEO battle.
Watch the video tutorial above for a walkthrough on optimizing images
The phrase “optimizing images” may sound scary if you’re not a professional geek like me, but it’s really not hard to do. In the video I show how to make an image load 14x faster by doing two straightforward things:
- scaling the image down from 1400+ pixels wide to 650
- compressing the image from 100% quality to 80%
These simple steps reduce a source image that was 946KB into a 70KB optimized image. This image would look exactly the same for its intended purpose, but because the original file size was 14 times larger, it’ll load in 1/14 the time. Note that the original image was only around 1400px wide, and a typical snapshot taken straight from an iPhone 8 is over 4000px wide. That means if I’d used a photo from my phone, the savings would be much Much MUCH more profound.
One other thing some advanced users may need to know
This tutorial assumes you’ll be using .jpg images, which is the preferred format for most web images. All photos, any graphic with a broad color palette, anything that doesn’t need a transparent background. . . all these should be .jpg images, and that’s what site admins who aren’t pro web designers should work with the vast majority of the time. This means the above tutorial is fine for almost everyone.
In some cases, using a format like .png or .svg is better than using a .jpg. Logos, for example, often use just a few colors, and they sometimes benefit from a transparent background so they display nicely when used in multiple locations and contexts on the same site. Using a .png file is better for that. Screen captures are another valid use, since .png files use a lossless 1:1 pixel display and .jpg compression, by its very nature, makes subtle changes in the arrangement of pixels, shading, and other nuances that might be unacceptable for screenshots. Images that need to look perfect when scaling up and down in size, such as icons, are better as .svg files.
I assume that people who are still reading have advanced needs and are already tech savvy enough to know these image format basics, but I feel the need to say them anyway ’cause it’s the Internet, and as soon as I don’t, someone will chime in with an “Actually, .jpg isn’t always the best file format, you know. . .” and then I’ll be forced to cradle my head in my hands and sigh a long sad sigh.