polar bear

Image Optimization Tips for the Web

Image Optimization Tips for the Web


Before Getting Started, Some Things to Know:

Why is image optimization SO important?

It’s very common for images to be the biggest weight for websites when they’re loading. They slow down page speed dramatically if not prepared for the browser correctly. Fortunately, it isn’t hard to optimize your images before uploading and posting them, but it does require some diligence and discipline. It’s important enough that it’s worth making a habit to practice each and every time, however.

Image optimization comes down to 2 criteria:

  1. Optimizing the # of bytes to encode each image pixel
  2. Optimizing the total # of pixels

The filesize is simply the total # of pixels multiplied by the # bytes used to encode each pixel. Therefore, posting images with no more pixels than needed to display the asset at its intended size in the browser is optimal. Don’t make the browser rescale them because it uses CPU resources and displays at a lower resolution.

SEO – Google and other search engine providers take page load speed into account in their ranking algorithms. If you want to be competitive and rank highly consistently, then making your site as light as possible must be a priority. That means, you guessed it, optimizing your images.

User experience – Your users expect your page to load as fast as possible. As in under a second. If it doesn’t, it causes them anxiety and they may very well leave your site. Obviously that’s something you don’t want. There have been studies showing how much revenue large retailers lose due to sites being fractionally slower, and while that may not be the nature of your site, it’s illustrative of the impatience users have these days.

The Basics of Imagery on the Web

There are several ways to display graphics online, for our concerns. And there are several formats we typically use these days. Some are more well-known and common, like .jpeg/.jpg and .pngs. But .gifs are making a comeback and the best way to really handle many graphics is none of these, but .svg, or scalable vector graphics, which is just code. As is CSS which, if you’re good enough, you can create animated graphics with as well pretty easily. But CSS3 can also be easily used to produce gradients and shadows that not only generate a lighter footprint, they’re easier to change on the fly if needed as well. Buttons and such UI elements are easy to make via CSS and much lighter, look better, perform better and can be edited more easily than using linked or embedded images. Web fonts are also a good choice to improve usability and performance.

Vector and Raster Images

Vector images are created with a series of points and lines, code really, that are ideal when dealing with geometric shapes because they’re zoom and resolution-independent, and look sharp and crisp at any size on any screen. They also can be a considerably smaller file size than a raster counterpart.

Raster images are created by encoding the values of each pixel within a grid, and at small or large sizes can look very choppy and jagged. Pixelated, in fact. They take the formats of jpeg, png, gif, tiff and jpeg-xr and WebP, which are newer.

Generally, vectors are great for logos, text, icons, etc… and raster is better for intricate images like a photo of a landscape, for example. Often, you’ll need to save several versions of raster images at different resolutions to deliver the best user experience.

Note: When we double the resolution of the physical screen the total number of pixels increases by a factor of four (double the # of horizontal pixels times double the # of vertical pixels) So a “2x” screen doesn’t just double, but quadruples the number of needed pixels.

Screen Resolution Total Pixels Uncompressed file size (4 bytes/pixel)
1x 100 x 100 = 10,000 40,000 bytes
2x 100 x 100 x 4 = 40,000 160,000 bytes
3x 100 x 100 x 9 = 90,000 360,000 bytes

Optimizing Vector Images

This is something that I, as your designer/developer will handle and worry about more than you but it’s good to be knowledgeable about what’s going on, and the usage of svg is becoming more widespread, so you’re more likely to cross its path than in the past. So I won’t go into major depth here, because it’s a large, complex subject, but you should at least be able to recognize it when you see it in the wild.

SVG is an XML-based image format. They should be minified to keep their size as small as possible, and they should be compressed with GZIP. All modern browsers support svg files, and they’re created using vector software like Adobe Illustrator, or you could code it up by hand if you wanted in a text editor. Illustrator is easier. There’s a lot of unnecessary metadata that’s created however, that can be cleaned up by running it through a tool like SVGO. There’s a plugin for Illustrator as well that I personally use.

Optimizing Raster Images

A raster image is a grid of pixels, and each pixel encodes color and transparency info in RGBA form (red, green, blue and alpha, which is transparency).

You’ll see “Lossless” and “Lossy” used a lot when trying to decide how to optimize raster images, but what do they mean? They look made up (and probably were, like “performant” and “canonicalization” and other words developers just dream up).

  • Lossless – describes an image that’s processed with a filter that compresses the pixel data.
  • Lossy – Processing an image with a filter that eliminates pixel data.

Any image can go through a Lossy compression process to reduce its file size. But there is no “optimal” configuration for all images. It depends on the contents of the unique image and your own criteria.

You’ll usually see lossy methods being applied with jpeg images in Photoshop, for example, when you’re saving the image for the web, and are given the option to customize the “quality” setting with a slider or set of numbers. The best way to determine this is really to just experiment and see what looks best with the largest file size savings, which in Photoshop may be seen in the bottom left corner of the screen.

This is as good a place as any to mention that when you upload an image in WordPress, it automatically is saved at 80% quality and at various sizes, which can be controlled in the admin panel. Out of the box, WordPress saves three other versions for you at a thumbnail size (150×150), Medium (300×300), and a large (1024×1024). But that can be changed to be anything and number you like of course, as can the 80% quality setting. Image file size is but one easy way to speed up your WordPress site. If you’re looking for other ways, here’s a very good pdf guide on ways to speed up your WP site:

Optimize WordPress Speed eBook

 Here’s another good article I came across that helps explain best image optimization practices for the web.

Selecting the Correct Image Format

OK, this is what I believe what most people are intereested in. In addition to Lossy and Lossless considerations, different image formats support different features like transparency and animation, increasingly important things for the web. So the “right format” depends on the desired visual results and functionality.

Format Transparency Animation Browser
GIF Yes Yes All
PNG Yes No All
JPEG No No All
WebP Yes Yes Chrome, Opera, Android

TIFFs are very heavy files and very high-res. Unless you’re doing some professional work or have a one-off, very good reason, you’re not going to need to use a .TIFF file.

GIFs are very trendy right now for short clips of animation on the web. However, they are limited to a maximum 256 colors, and a PNG-8 delivers better compression for small color palettes. Only use GIFs when animation is required. For longer animations, consider using HTML5

WordPress Websites

There are a few things I do to WordPress websites to help lighten the load as far as images are concerned. Images account for so much weight on websites, every little bit/byte counts. But the web is a visual medium, and the use of graphics is crucial for so many reasons. A better user experience, SEO reasons, shareability, and images just make websites so much more dynamic.

For SEO and accessibility reasons ALWAYS, ALWAYS, ALWAYS be mindful of your ALT tags! Bots can’t see images, so they rely on what you tell them the image is of to decide what to do with it. Make sure you complete them.

WordPress plugins that help optimize load time by compressing, lazy loading and other tricks are widely available. I’ve settled on using WPMU’s Smush.it Pro to compress images, which is a premium plugin, and I put it on clients’ sites as a courtesy because it’s so good and what it does is so important. I have had some issues with it from time to time, but the headaches that arise are worth the savings in file size, to me. (The plugin is high quality from some reputable WP developers; what it does is just complex and it gets snagged sometimes. I can live with it.)

I’m currently installing RICG Responsive Images, Media Library Thumbnail Enhancer, Gzip Ninja Speed Compression, Comment Images by my buddy Tom McFarlin, and for lazy loading, A3 Lazy Load for clients on an as-needed basis, which are all image-related plugins. Not necessarily for strict optimization, but valuable plugins nonetheless.


  • Use vector formats when available and appropriate. They’re future-friendly, light, easy to manipulate and change and look awesome on retina screens.
  • Minify & compress your assets. SVGs, PNGs, JPGs and GIFs can easily be shrunk significantly and doing so should become part of your workflow.
  • Don’t be afraid to dial down the quality settings on raster images; the quality remains high but you reduce the number of bytes significantly. Human eyes just aren’t all that great, unfortunately. Even though our screens are getting to be insanely high-res.
  • Remove unnecessary metadata like geo information, camera information, etc… there are tools to do this which I’ll provide in a resources addendum.
  • Serve scaled images, and automate as much as you can. There are lots of great optimization tools around, many for free, and many built right into editing software, waiting to be used.

A guide to choosing which format:


Compressr.io – A web app I use all the time to smush images before uploading. It works great.

Other optimizers and smushers:










Yahoo! Smush.it

And other stuff:

Bulk Resize Photos

Retinize it – Photoshop actions for slicing retina graphics

We love icon fonts

Iconic – I own these so if you ever want to use them let me know.

Animaticons – These are just too cool not to mention.


sketch vs. adobe illustrator

Sketch and Adobe Illustrator

Sketch and Adobe Illustrator

Adobe Illustrator is considered the standard tool for creating vector artwork, and although it’s been challenged a number of times over the years, it remains on the top of the heap. That’s for many reasons, but being the simplest to use certainly isn’t one of them. It’s easier than Photoshop to learn, but both represent a considerable investment in time and learning to use with any efficiency and skill. Years, in many cases.

I’ve used Illustrator (actually all the Adobe tools in the Creative Cloud suite, and that’s a LOT) for years, and am a huge fan. I’m the owner of a Google Plus Adobe Illustrator community that has around 6400 members and counting, in fact. It’s easy for me to use because I’ve used it so much for so long, as is the case with anyone with anything. So when someone has that much invested, it’s sort of uncommon for people to jump ship to another program for no good reason.

The biggest complaint I hear about Illustrator, Photoshop and the rest of the Adobe products is their pricing model, which is a subscription. And it’s not exactly cheap. They used to sell individual licenses up to CS6 like most other products, but switched when they added a Cloud feature to sell storage alongside the tools. The other complaint would probably be, besides intermittent bugs, the time and effort it takes to learn if you’re just beginning. That’s where competing products try to get their feet in the door. I’ve lost count of all the products out there that you can use for vector design, but Google Web Designer is one, Macaw is another that was hugely-hyped and originally cost more than Sketch(it’s now free, incidentally), and there are others. I’ve played around with many/most all of them, and they’re all basically the same: a knockoff of Illustrator, but far less powerful, and with a learning curve to boot.

Sketch came along, and took the best of Illustrator and kept it, and took the worst, and reworked it. And they made it lighweight and fast. And also very easy to install plugins, and even develop them yourself if you’re so inclined. There are some great plugins available for free that increase productivity and workflows. That’s probably the biggest feature that makes Sketch so popular: it’s fast and easy. And comparatively cheap. Sketch is only available for Mac, however. As someone who uses both Windows and Macs, that strikes me as strange, because they’re missing out on a HUGE market. Of course, that’s their (Bohemian Coding- the developers) decision.

I’ve had Sketch installed for maybe 2 years and have never bothered to use it, so recently I decided to see how fast I could pick it up. A lot of designers use it, and it’s popularity has been sustained unlike other vector programs such as previously mentioned so it seemed worth some time and trouble. I’ve tinkered around with the interface a few times, and it’s laid out a lot like Illustrator, so I wasn’t expecting too much trouble. The wheel hasn’t been reinvented or anything. And, as expected, I didn’t have much. A large reason for that is also the excellent instructions and support Sketch has available, plus it’s pretty intuitive. If you contrast that with Adobe Illustrator, I’ve never been impressed with Adobe’s support for their products. (For a long time, they simply relied on Lynda.com for instruction, which is how I learned, along with trial and error.) That’s not because there’s a lack of them. To the contrary; there are too many. I don’t find it user-friendly, and I don’t think I’m alone because there are a gazillion third-party tutorials and help articles and videos for their products. An over-abundance which adds to the confusion since some are good and some are awful, and some are totally outdated, going back to CS2. And if you try to use the help menu IN Adobe’s applications, they divert you to your browser and take you out of the program completely to Adobe’s community forum which I’ve never found to be a pleasant UX at all. Users can go to the web themselves and do a search. And even then, you usually don’t find the specific help you need. Sketch has a menu on the app’s site that walks you through it, and that’s plenty, I found. Of course there are YouTube videos for any topic you may have as well, but I found them unnecessary. But there are some good ones.

I’ve picked Sketch up quickly, and that makes my workfkow speedy already. When I add the plugins that are meant to boost productivity for the activities I need them for, it’s really a great product. I especially like how lightweight and fast it is compared to Adobe’s products, which weigh in at about 1GB each. That adds up fast if You’re doing some serious creating with Illustrator, Photoshop, Bridge, Premiere Pro, After Effects, Animator, and so on. Premiere Pro is a monster. However Adobe has addressed that the best way they know how I suppose, byt being able to install an uninstall the apps via the Creative Cloud interface.

I still feel like Illustrator is a more robust application, for some reason, although I can’t justify that feeling. I can do anything with Sketch I can with AI, and in fact possibly more if you look at the new symbol libraries and export options and some other features I’m sure I haven’t stumbled upon yet. Sketch iterates pretty often, especially compared to past AI competitors. Sketch also has cloud storage built into their pricing, plus a free iOS app for mirroring your workspace. And the plugin ecosystem takes it to an entirely different level. Illustrator has plugins as well, but they aren’t maintained and you definitely won’t find them being consistently actively developed on GitHub, as with Sketch.

To that end, I’m posting here some of the better resources I’ve found for Sketch so far for my personal reference and anyone interested. They’re all free, and Sketch itself is a relative bargain at $99, with the option of a generous student/educator discount available (Adobe offers a discount as well-most software companies do). And it’s just a one-time fee, as opposed to Adobe’s Creative Cloud, which is an ongoing cost that’s also tiered. However, for that price you get quite a bit more. But whether those extra features, such as cloud storage and a TON of programs for creating anything you can possibly imagine is dependant upon the user, of course. So, am I switching to Sketch for good? Time will have to tell.

So, without any further ado, here are some awesome Sketch resources: