I can’t believe it’s already Thursday and this is my first post of the week! Time flies, especially this time of year.

I’ve been doing a lot of digital work recently, which has been a refreshing change from the print projects I’ve been working on for the last couple of weeks prior. Although it means a lot of time in front of the screen, I enjoy the change up. For me, it’s a different mind set and a different set of skills. Print work is much more tactile and free, where as digital is more technical and precise. It feels good to flex both of those muscles because it ultimately makes me better at what I do. Constant improvement is good!

As I was doing some web development yesterday (setting up wire frames and the back-end of a website for a client), I thought I could whip up a quick tutorial on optimizing images for the web. Despite how unbelievably boring this sounds – it’s actually really important!

A lot of people don’t put much time and consideration into optimizing images for the web. Beautiful web design relies on beautiful images, but functional web design relies on speed. Bogging your website down with unnecessarily large and high resolution images means that your entire website can become slow and sluggish. Visitors don’t like to wait for content to load, and you’d be shocked to know how much even the smallest delay in loading time can deter engagement. When people come to visit your website, you want them to stick around! Not to get distracted while they stare at a “page loading” screen.

HOW TO OPTIMIZE IMAGES FOR THE WEB

When getting images ready for the web (whether this be a website, social media post, e-mail – this applies to images used digitally anywhere!) you need to consider two main things: the file format of your image, and compression.

There are two main image formats that are used for the web, JPEG and PNG. There are a lot of differences between the two file formats,but  here’s the short version: JPEG’s compress image data by reducing sections of images to blocks of pixels or “tiles.” By grouping sections of pixels together into tiles, it reduces the number of colors and complications of patterns, reducing the file size overall. The more simple the colors and patterns, the more compressed and image is. The downside of this compression is that is can compromise the quality and crispness of details, especially with contrasting colors or edges. PNG’s, on the other hand, do not group or compress this way so images are more crisp and clear, buuuuuttt the image size is usually huge comparatively. So in most cases, it’s best to use JPEG for the web. Unless you have a highly-detailed image with a lot of contrasting colors, you might want to stick with PNG.

Photoshop makes it really easy to optimize images for the web. When you’re ready to save your image, simple go to File > Save for Web & Devices.

This will bring up a handy little tool that allows you to adjust the compression settings (both size and quality). It shows you a live preview of the changes and even the new file size and how long it’ll take to load . It’s super handy to see a preview of your image and be able to tweak and edit as you go. The amount of compression you can “get away” with depends on your specific image.

Because my image has sharp and contrasting colors, I stuck with a fairly high quality to make sure all of those lines looked crisp. Once your happy with how your preview looks, just hit save and you’re all set!

If you don’t have photoshop, there are similar options available in free photo editing programs, like GIMP. Another option is to use one of the freeware tools for image optimization. ImageOptim (Mac), RIOT (Windows), PNGGauntlet (Windows) and Trimage (Linux) are all great options.

Whether you use Photoshop or any other tool out there, make sure you optimize those images!

— Gillian

The post TUTORIAL: OPTIMIZING IMAGES FOR THE WEB appeared first on Palmer Street Press.