Were you aware that image optimization is one of the easiest and most effective things you can do to improve your site design?
As if it weren’t simple enough on its own, there are a wide range of tools available to ensure that you are getting optimization right.
This article will discuss what image optimization means and how you can take the proper steps to fully optimize your visuals.
Vector vs Raster Graphics
When you save an image on your computer, there are many file formats available. But this isn’t the case when you’re placing images online. Basically, you’re left with two options: vector graphics and raster graphics.
-
Vector Graphics: These images are composed from basic shapes like lines, curves and points. They can be scaled up or down without distortion, and they display well at any resolution. Vector graphics have small file sizes and are easy to edit.
-
Raster Graphics: These images are made from a rectangular grid of pixels. They include GIFs, JPEGs and PNGs. Raster images have universal browser acceptance, but they do require heavy optimization.
Vector images are great for many uses, but you will be using a mix of GIFs, JPEGs and PNGs on a day-to-day basis. These images are the ones most commonly included in content and web pages, and optimization for them is crucial.
Why Optimization Matters
Image optimization is important for two reasons. The first is that we are moving in the direction of having the entire web be mobile. People can do just about anything on their mobile devices these days, but there is something that makes a difference: space.
The screen on a tablet or smartphone is much smaller than what you would get on a PC or laptop, so web developers must think about everything they add to the space. No longer are images meant to be eye candy to the user. They must serve a purpose.
The second reason for image optimization, again, has to do with mobile. Though more people are accessing the web from their mobile devices, mobile download rates still lag significantly compared to those available on desktops. This means that every pixel counts. In other words, is the image you’re looking to include worth the extra download time?
Simple Tips for Optimizing Images
Now that you know why image optimization cannot be overlooked, let’s explore some of the best ways that you can successfully optimize your images, improve your site design and make users happier.
Resize Images Early On
Today’s digital cameras have surely advanced, but the default images they produce are usually much larger than they need to be. For example, the default images generated from the iPhone are way bigger than what you need for WordPress.
There are many resizing tools available, both free and paid. Paint for Windows and Preview for Mac are both free and do an adequate job of resizing images in a pinch. If you want something that adds a few more features, try a tool like Gimp, Pixlr or Fotoflexer.
Of course, the best program out there is Photoshop because it gives you the power to be a professional photo editor. But if you’re not ready to make the investment, the above tools will serve their purpose and keep your budget intact.
Trim the Fat with Cropping
In addition to resizing images, you should also trim the excess fat. By cropping unnecessary space, you automatically reduce the file size and transform the photo into something more unique. It’s amazing what a bit of cropping can do to bring an image to life, particularly if you’re using stock photos and need to pack more punch.
Account for the Newer Retina Displays
Retina Displays are going to become more and more popular in the coming years, so it’s important to plan for them in terms of design. If you carefully resize and crop your photos but don’t account for retina, your images are going to appear choppy and pixelated.
To account for retina, you will need to output two versions of your images. One version will be at your base pixel size, while the other will be a 2x version. For example, a 300px x 300px JPEG would also need to be outputted for retina at 600px x 600px.
Compress Images to Reduce Size
Compression is the process of removing image formation to decrease the image size. The easiest types of photos to compress are JPEGs. But, you must be careful when using compression, as it’s possible to create unwanted effects. The goal is to achieve a balance of the lowest file size with the highest image quality.
It’s possible for GIFs and PNGs to be compressed as well, but typically speaking, their reductions in file size won’t be as dramatic.
Optimize for SEO
The display properties of images is important, but we can’t underestimate the power in SEO optimization. Use descriptive filenames that include your keywords rather than generic terms. For example, rather than leaving “123.JPEG” as the description of your image, you would enter in “red-apple-on-tree.jpg.”
You may also use alt tags for each image to boost optimization and to give your images a wider reach. We love Yoast’s complete guide for optimizing images for SEO. Check it out to learn more about effectively optimizing your site’s images for the purpose of search engine optimization.
Summary
If there’s one thing that we hope you learned from this information, it’s this: Image optimization is something you must pay attention to. It will help your pages load faster, look better and engage users. As more people use their mobile devices to browse websites, it’s imperative that your site offers a pleasant, enjoyable experience with the right balance of text and visuals.
