{"id":62343,"date":"2017-09-19T08:50:01","date_gmt":"2017-09-19T12:50:01","guid":{"rendered":"https:\/\/www.acscreative.com\/?p=62343"},"modified":"2017-09-19T08:50:01","modified_gmt":"2017-09-19T12:50:01","slug":"guide-image-optimization","status":"publish","type":"post","link":"https:\/\/acsredux.acscreativedev.com\/?p=62343","title":{"rendered":"Your Guide to Image Optimization"},"content":{"rendered":"

Since our educational adventure at An Event Apart in Washington DC this past July, we\u2019ve discussed Website Accessibility<\/a> and Measuring Engagement<\/a>. Today, we\u2019re diving into the ever-important realm of Image Optimization<\/strong>.<\/p>\n

What is Image Optimization?<\/h3>\n

When Una Kravets<\/strong>, UI Engineer for Digital Ocean, began her AEA presentation with a full screen photo of Bob Ross, we knew this was going to be good. Essentially, Image Optimization is what makes a raw, high-resolution photo or graphic look good and load fast on the web. This is accomplished using various tools and practices, which we\u2019ll get into later. Worth noting, we aren\u2019t necessarily talking about the physical size of an image in inches or pixels here, but instead the file size in bytes.<\/p>\n

Every time you visit a web page, your computer is essentially downloading the embedded images to view them. This consumes precious bandwidth on your hosting environment as well as your visitor’s browsing device. The goal of image optimization is to minimize the bandwidth required to experience a website.<\/p>\n

As Google so eloquently puts it, \u201cImage optimization is both an art and science\u201d because there is a definitive yet subjective balance between quality and file size. In the example below, you\u2019ll see our original photo on the left, straight from the camera, with zero compression or optimization. To the right, that same photo has been saved at 10% quality to significantly reduce file size<\/strong>.<\/p>\n

\"Image<\/p>\n

With any image optimization, there is give and take. The higher the quality (more colors, finer detail) the bigger the file. There have been major strides in lossless compression that retain the depth and variation of photos. Such methods rely on extremely complex algorithms unique to each of the popular file types (JPG<\/strong>, GIF<\/strong> and PNG<\/strong>). Painting happy trees might make us smile, but image optimization is serious business.<\/p>\n

Why it Matters?<\/h3>\n

You might ask yourself why this extra effort is necessary. You have a nice broadband internet setup at your house, so why bother with a saved kilobyte here and there? For that answer, you\u2019ll have to step outside<\/em> of your own home. When Una Kravets refers to “Responsible Imaging,” she\u2019s talking about serving all<\/span> audiences, across the world, on any\u00a0devices, with a wide range of connectivity scenarios. Like her, if you believe access to information should be a basic human right, then image optimization becomes a top priority. If we look at mobile traffic<\/strong> alone, about 50% of all visitors are using a phone or tablet to browse your website \u2013 often from a 3G connection. Statistics show that 53% of mobile sites are abandoned after just 3 seconds. Can you afford to lose that much business due to slow page load times?<\/p>\n

\"Mobile<\/p>\n

Additionally, search engines like Google are starting to place increased importance on page load times<\/strong>. Websites that load faster rank higher in search results and that will only become truer\u00a0as expectations evolve. Just for fun, check out your current Google Page Speed Score.<\/p>\n

According to Una\u2019s HTTP Archive data, nearly 66% of a site\u2019s total size is comprised of images. Stylesheets, scripts, HTML code, and fonts are barely a sliver on the pie chart compared to the bandwidth consumption of graphics and photos<\/strong>. Look around at the current trends in website design. Pages are adapting large, full-width images and big, bold graphics throughout for an impactful brand experience. With this movement comes an increased need to keep quality up and file size down.<\/p>\n

How Image Optimization is Done<\/h3>\n

It\u2019s best practice to get into the habit of optimizing your graphics before uploading. Again, there are a handful of great tools and software to make it happen, but it often requires a human touch to get just right. Starting from scratch is one thing, but optimizing a website that is already established and packed with images can be a real challenge. Doing so in a creative, innovative way is a whole new level of complexity. Luckily, ACS Creative<\/strong> is always up for the job…<\/p>\n

Take a webpage we built for our client, B-FOR<\/a>. The company provides international trade show and exhibit services. We designed their original website, and we recently expanded the site to include their Brand USA content. Brand USA encourages international travelers to visit the United States.<\/p>\n

\"Dynamic<\/p>\n

On one of the new Brand USA pages, we included dynamic images<\/strong>. Each time the page loads, a new header image appears. Normally, this would slow down a webpage. But we changed the typical way an image loads. The full image does not load all at once. For a split second, the image is blurry. This allows the rest of the page content to load, while the rest of the image catches up. Customers can see the content they need right away, without waiting those extra painful seconds for the page to load.<\/p>\n

Optimizing the images on your site doesn\u2019t always mean crunching the file size. Replacing icons and simple graphics altogether with web fonts is also an effective measure. Furthermore, uploading images that are no larger (in pixels) than their use on your site is equally crucial. For example, your logo file doesn\u2019t need to be 900px wide if it never appears larger than 300px wide. Don\u2019t serve an image that could be a font and don\u2019t serve an image with unnecessarily large dimensions, and you\u2019re already off to the races with your optimization efforts!<\/p>\n

Tools of the Trade<\/h3>\n

Over the years, we\u2019ve utilized several means of image optimization. Here are a few of our favorite tools and resources:<\/p>\n