We all know the old saying: “A picture is worth a thousand words.” The use of fun, splashy (and relevant) images on your website has the potential to attract customers and keep them engaged longer. It also has the potential to cut you with its double-edged blade….
If your website is full of large, unoptimized images (what does “unoptimized” mean? We’ll get to that in a second), it can cause major problems for your site speed and search engine optimization (SEO). A slow or inefficient website means a bad user experience, which can lead potential customers right off your web page and into the arms of your competitor.
Whether you run an ecommerce store, have a website for your service-based company, or are just looking to pursue any possible advantages for your online presence, image optimization might be an easy and underrated method you can employ.
What is Image Optimization, Anyway?
Don’t worry, we’ll keep this brief. Mostly because we get into the nitty gritty a bit later. Boiled down to the bare bones, image optimization is a process by which you can get the highest quality images on your website at the smallest possible size. [Side note: by “size” we don’t mean the dimensions of the image; we mean the amount of space (or bytes) it takes up once loaded onto your site.] Image optimization takes into consideration the ideal format, size, and resolution of a picture to reduce the pages’ loading speeds and increase user engagement. Clear as mud? Good. Moving on.
Why Does Optimization Matter?
Speed
To restate our thesis, unoptimized images in your website can slow down your site speed fairly significantly (especially if you have several of them on the same page). This has become a major influence for today’s consumers. We’re like toddlers—always looking for the quickest and easiest solutions to our needs—and an inefficient website doesn’t look good for your business.
Not to mention, current society has learned to be impatient when it comes to technology. By the time your website loads, potential customers may already have moved on to another company’s site. (Don’t lie…you’ve done this, too.) Research done by Google indicates that if a website takes more than 5 seconds to load, the probability that the user leaves the page increases by 90%. Talk about a short attention span….
Search Engine Optimization
The other problem that can arise from an unoptimized image relates to search engine optimization (SEO). Google’s search algorithm for displaying webpage results relies on page speed as one of its ranking factors. Optimizing your images will help you avoid the organic search penalties of a slow website. In other words, a slow website contributes to getting you bumped down in the list of search results. (Google doesn’t like slow websites.) Not good.
The Nuts and Bolts
We briefly hit on what image optimization is a few paragraphs ago. Now it’s time for the nitty gritty we promised. There are four major factors that contribute to optimizing images: image dimensions (also referred to as image size), file type, file size, and file name. Learn more about these and you’ll not only earn, like, tons of street cred, but you’ll also be ahead of the curve in getting your website up to speed (pun absolutely intended).
Image Dimensions
Most likely, different sections of your website require images to appear in different dimensions. Maybe a section of your site needs an image to span the entire screen. This is known as a full-width image. In general, it’s recommended that these images are somewhere in the vicinity of 2400px x 1600px with a resolution of 72 pixels/inch (in fact, any image you upload to the web should have a resolution of 72ppi).
Ideal dimensions vary for the rest of the content images throughout your site. Horizontally-oriented images should have a max width of 1500px, while vertically oriented images should have a max width of 1000px (and most images won’t even need to be that big). Many original images—whether stock photos, photos from professional shoots, or even the pics you snap on your cell phone—are much too large to upload without cropping them down to a smaller size. There’s no faster way to slow your site down than by filling your pages with overly large images.
[Side note: As we harp on about making sure your images aren’t too big, it’s also a good idea not to go too crazy when reducing your image dimensions. You can always make a big image smaller, but it doesn’t really work in reverse. If you’re trying to blow up a small image, you’re going to end up with a low-quality, pixely mess.]
File Type
Another important factor for optimizing images is to use the proper file type. There are several options, and each of them have their pros and cons. The most common file types for web pages are JPG, PNG, WebP, SVG, and GIF files. In most cases, we recommend the following:
- Photos – These should be saved and uploaded as JPG files. This file type can handle all the millions of colors in a photo and, when optimized correctly, tend to take up very little storage space. The downside is that they are also “lossy,” which means that you might lose some quality if you go too crazy when resizing/compressing them.
- Graphics (like logos, icons, and simple illustrations) – Save these as a PNG or SVG file. These file types support large areas of color and crisp lines, and if you need your image to have a transparent background (for example, if your logo needs to show up against a color field on your web page), these are the formats for you.
- Animations – GIF all the way, baby! [Side note: We don’t care what the original developer says, GIF stands for Graphics Interchange Format and should be pronounced with a hard G. Besides, everyone knows Peter Pan is the superior peanut butter.]
You can save images from most image editing programs as JPG or PNG files by going to “Save As,” “Export,” or “Save for web” and choosing which file type you prefer. One of the best methods for reducing the size of the file without sacrificing image quality is the “Save for web” method.
File Size
In addition to file type, the file size can have an extreme effect on site performance. This is different from image size (referred to in this article as “image dimensions”), which indicates the length and width of the images in pixels. File size refers to the number of bytes the file takes up on your computer and is directly affected by the image dimensions and file type.
For best results, file sizes for full-width and other large images should be no more than 750 KB. Most of the smaller images or graphics on your site should be 300 KB or less. Generally, the smaller the better. A smaller file allows the website to load faster, which will boost performance and search engine results.
[Side note: So you’ve reduced your image dimensions and chosen an appropriate file type, but your file is still over 750 KB? Many image editing programs allow you to adjust the image quality, in addition to those other factors. If you’re struggling to get your file to an appropriate size, try adjusting the quality down to 60-70%. It’s likely you won’t notice much of a difference, visually, but it could go a long way to getting those bytes reduced!]
File Name
Okay, so this one has nothing to do with increasing your website’s loading speed. But it does have a lot to do with your SEO rankings, which is pretty dang important.
When General Q. Public sits down at their computer and types a term into the browser’s search bar, Google (and other search engines) crawl your website (and many, many, MANY others) and—among other things—read your file names to see if you’re a good match for the search. If the images on your website just use the default file name (DSC01237.jpg for example), those search engines can’t tell what the heck you’re all about. By naming your files with descriptive keywords relevant to the content in the image or on the web page, you can give your site a simple, organic SEO boost.
Example: Say you want to upload an image onto your real estate company’s website for a listing on a Colonial-style house in the Indianapolis area. A file name like colonial-house-indianapolis.jpg tells the search engines exactly what that photo is, which in turn bumps up your SEO ranking and results in more eyes on that listing. House sold!
[Side note: Use only letters, numbers, underscores, and hyphens in your file names. It’s best to avoid spaces, question marks and other punctuation, special characters like percent signs, and characters from other languages (accent marks, etc.), as these often upload incorrectly or cause unexpected behaviors in your gallery or blog posts.]
Image Optimization Tools
“Okay, Sleeping Giant Creative,” you may be thinking. “I get that I need to optimize my images before uploading them to my website, but HOW do I do that?” Don’t worry, it’s a piece of cake. Chances are, your computer already has standard programs installed that will give you the tools you need.
Are you on a Mac? You can get the basics accomplished in the Photos or Preview apps. Windows? The Photos app should have what you need. (Under NO circumstances, however, should you use the Paint tool for this task. Just DON’T.) If you’re a little more design savvy, Adobe Photoshop or Illustrator have fairly advanced optimization options.
No programs? No problem. There are also several free online tools that will get the job done:
Squoosh – https://squoosh.app/
Of all the free online tools available for image optimization, Squoosh might take the cake for top dog (possibly because it was created and is owned by Google—the ones who set the standards in the first place). It’s easy to use and highly effective. It gives you a side-by-side comparison so you can ensure the quality of the image while being able to resize and compress it. You can use different methods (like browser high quality and other browser types), resize the image to match your needs, and compress it with the option to reduce or increase quality. In the picture below, the file size dropped from 2.24 MB to 100 KB (without sacrificing much, visually) which is bound to have a positive effect on site speed.
JPEG Optimizer – http://jpeg-optimizer.com/
If you are looking for one of the simpler options to optimize your image, this site is sure to do the trick. Simply choose your image, pick the compression level (the lower the compression level, the lower the file size AND quality), and choose the desired width of the image in pixels. That’s it! JPEG Optimizer is less customizable than other options and may take some trial and error to find the right compression level, but it couldn’t get much simpler than this site. In the example below, we took the file size from 8.2 MB to 119.5 KB in seconds. It’s also worth noting that this is strictly a JPG optimizer, so PNG and other file types are not supported.
TinyPNG – https://tinypng.com/
As its name might indicate, this site is great for optimizing your PNG files (it also supports JPG and WebP files). Bonus: an adorable illustrated panda assists you throughout the process! Unlike other sites, TinyPNG lets you drop in up to 20 images at a time to be compressed, so it’s great if you’re needing to add several images to your website in one fell swoop. All you have to do is select the files you want to optimize, and they do the rest! This site also offers support in the form of Q&A-style information to help you understand and navigate all of their features. You can’t customize the settings with this tool, however, so if you have more complicated needs, you’ll probably want to look elsewhere.
EZGif – https://ezgif.com/
This optimizer has a little bit of everything. You can optimize GIFs, PNGs, JPGs, and WebP files while also having the option to convert to different file types (PNG to JPG for example). EZGif is another free-to-use website, and it offers image editing tools that the other sites do not. You can crop, rotate, resize, censor, and add text and effects to images in addition to optimizing. You also have the option to choose your desired file size, so you can be absolutely sure it’s optimized for website speed. EZGif is a lot more hands-on than other options and allows you to easily customize images to meet your website’s needs. When we tried it out, we were able to reduce a 2.09 MB JPG image to only 114.65 KB without sacrificing the quality of the image.
[Reminder: Whichever program or tool you use, don’t forget to save your optimized file with relevant keywords in the file name to ensure you increase your search engine rankings!]
Let Us Help!
We get it…if you’re not in the website design biz, this can all seem a bit overwhelming. But hey, that’s why we’re here! Whether you need a little hand-holding to guide you through the process or you just want someone else to take image optimization off your plate, we’re happy to do whatever we can to get your images up to snuff. Shoot us an email or give us a call to learn more! (And stay tuned for more tips about SEO and image optimization. Because let’s face it…this stuff changes dang near daily.)