How to Improve Website Performance? Optimization! Reduce the Size of Your Images!

Cinder Media Image Optimization | Shrink Your Images | Improve website load speed

All images are not created equally… Want to know the #1 reason why so many sites load so slowly! It’s because of the size of the images that get uploaded to pages. Read this post to find out how to fix slow page load! You can significantly increase your web pages loading speed, improve efficiency, and reduce visitor bounce rates by optimizing your images. In this post, we’ll cover the basic image settings, free computer applications to help you shrink their file-size, and the steps you should take to make your load incredibly fast!

Cinder Media Image Optimization | Shrink Your Images | Improve website load speed

Introduction

Optimize Your Images… Make Your Website Run Faster On All Devices

Think about it, every time a visitor opens a page on your website, their device has to load every word, image, animation, and more. And that’s just the visual information that’s displayed—there’s a lot of other code that makes up your website. One of the most common mistakes websites make—particularly small businesses and artists who are just getting into the web-side of their business—is posting images that are far too large. The images that come straight out of your smart phone or digital camera are easily 3–4, and in many cases 10 megabytes (MB) in size. That’s a lot of data that your web page needs to load. It slows your pages down significantly (especially on slower networks, or cellular data), and adds unneeded strain on your server.

What does that mean? It means, we need to change some settings, add some compression, and optimize your images for your website. That will translate to faster performance, better SEO scores, and overall happier visitors. Visitor retention rates, lower bounce rates, and increased conversion can all be improved by optimizing your images. Don’t worry though—it’s quick, easy, and we’ll walk through each step.

Optimal Image Properties: Definitions & Settings

We work with clients all the time that see dramatic improvements in visitor retention rates—just because their website performs better. In just a couple of minutes you can shrink your images down and see these huge returns on performance.

You don’t have to be a veteran photographer to make the most out of your images. These are the basic image properties and settings that you should familiarize yourself with to improve the images on your website.

Images Resolution (Pixels, Size)

Recommended Max: 2000 pixels

A pixel is a single point, or dot, in a digital image. It is the smallest controllable element in a digital representation of an image on a screen. For images you upload to your websites, keep them under 2500 pixels wide at the maximum. Smaller is even better! But follow your eyes and let them be the guide. Why? Well, even in 2018, the majority of displays are 1920×1080 pixels. Additionally, video cards do a really good job at scaling images up as needed. Keeping images as small as possible ensures they load quickly—particularly over slower cellular speeds when people visit your site on their mobile device while they’re in line at the grocery store.

Image File Type

Recommended File Type: JPEG (varies), Optimize/Compressed

There are a few image types that will be used often. JPEG, PNG (Portal Network Graphics), and GIF (Graphics Interchange Format) are the most common image types you’ll need when working on a website. Most images only require JPEG format—which will offer the best reproduction of images taken from a phone or camera. JPEG is a lossy format, and with compression, the quality of the image can be reduced significantly to save file size. On a website, even a 40% quality JPEG will look great on almost any device. More on quality/compression later.

PNG is another important graphics type. Though normally reserved for rendering logos, graphics, and other “non-photograph” types. PNGs do offer one major advantage over JPEG—which is the ability to remove the “alpha” layer and show a transparent background. But PNGs are generally larger in file size for a similar resolution image. Stick to JPEG whenever you’re showing photographs. Otherwise, if you need a transparent background, logos, or you’re layering graphics, use PNG.

Pixel Density (Pixels Per Inch (PPI))

Recommended Density: 72ppi

Previously reserved for physical DPI (dots per inch) images where printers needed to specify the amount of printed “dots” per inch. 72ppi. This property refers to pixel density in images. In many cases, images straight out of a camera will retain a density of 300ppi. We can save an incredible amount of storage space by reducing down to 72ppi—without a noticeable loss in quality on computer screens.

Compression Quality (JPEG

30–60% (max), we recommend 30–40%

Image Alt Tags

Give your images keyword-specific titles. But don’t overstuff

Filename

Give it a meaningful file name. Use words that people will search for. It helps SEO and future audits!

Additional —

Let your eye be the guide. You can see the quality drop bit by bit when you adjust settings and reduce the overall size of your images. (pixels x pixels). For instance, we shoot a lot images on a Nikon D800.

That’s 7360 (wide) x 4912 (height) pixels. Then we shrink those images down to a maximum of 2,000 pixels (wide). That compresses all of those pixels into a smaller image which actually makes images look great because they have a very high pixel density.

Compressed Image File Savings For Websites

Here are two pictures, one was an unmodified original JPEG straight out of the camera, the other has been edited and optimized for web usage. Images were taken at Boulder Theatre of the talented Emily Shreve. Check out her music at http://emilyshreve.com.

Emily Shreve | Edigted, Smaller Version, Compressed Image

116 KB – Edited and Compressed

Emily Shreve | Compressed Original

216 KB – Uploaded original, no compression

The actual images above has been modified based on the upload—but the size different is still HUGE.

The original file was 11.9MB. Try downloading that on a webpage over a 3G network. Here we have images that are 1-2% of the original file size. The compressed and optimized version is just 116KB, whereas letting WordPress handle the upload itself still comes to 250+KB? That’s nearly 100% more than optimizing it yourself. That’s a TON of saved bandwidth—especially over the original. It’s JUST not worth loading your high MB images straight from your camera or smartphone.

Now if you’re using site builder tools or plugins like WordPressSquarespace, Wix, etc.—they SOMETIMES handle SOME of the image processing and manipulation. But they won’t fix something seriously wrong. This means they create several versions of the images (i.e. at widths of 500px, 750px, 1000px, 2500px, etc.) and render the size that makes most sense for the visitor’s screen size. But optimizing your images often still saved 50%+ of file size.

Now, we wouldn’t take those optimized files and print them for a giant 6′ wide canvas—they’re not optimized for print—but they are PERFECT for web usage.

Applications for Optimizing Images For Website Use

Alright, let’s get into it. We tend to work and Apple products and trust Photoshop with a lot of the heavy lifting with our images, but here are a number of free tools:

Image Resizing Applications
  • Preview (Mac Only)
  • Paint (Windows Only) – Not recommended though
  • Paint.net (PC Only) – Paint is also an option but doesn’t offer a good way to reduce ppi
  • GIMP (Mac or PC)
Image Compression Tools

There is also an option for WIN 10. Windows 10 Built-In EXIF Removal (Windows 10 Only):

Go to Properties > Remove Properties and Personal Information > Remove the following properties from this file > Select All.
Now that you have the tools, here’s the process. Regardless of what you are using…

Step By Step Image Optimization

Follow these steps to get the best image sizes and load speed performance for your website:

  1. Reduce the size of your image (Remember, 2500px wide OR less)
  2. Export image as JPEG with quality ~40%
  3. Strip metadata from your image (with tool like ImageOptim)
  4. Give your image a good filename
  5. Upload it to your website
  6. Make sure to give it a keyword-specific alt tag alt tag

Check out our visual walkthrough for optimizing images:

On Mac: Coming Soon!

On PC: Coming Soon!

Conclusion

That’s it! Do it on every image that goes on your website and you’ll notice huge returns in performance. Keep the original backups for alternative use (such as printing).

We’ll provide additional tricks and instructions on how to optimize your images in later posts. But if you follow these rules with every image you put on your website—you’ll be leaps and bounds ahead of the competition.

Of course, if you have any questions—contact us, on any of your social media avenues, or leave a comment below.

Thanks for reading! Find your spark and fan it!