Image Optimization: A Comprehensive Roundup - pt.1

In the beginning, the World Wide Web was all about optimization. Standard speed was around 3 kb per second, and hosting space larger than 5 MB was expensive. Then broadband became available for everyone, and web designers grew less and less obsessed with image optimization. Nowadays, younger web developers have almost forgotten optimization principles, so… why not having a quick recap? Which format is better? The first images on the world wide web were only in JPEG and GIF format, PNG support was added later by Mozilla (Internet Explorer supported it since version 4, but transparency did not come until version 7). The SVG format added, finally, support for vector images. We assume that everybody knows about these formats and when to use them, so we’d like to elaborate a bit more on situations in which a particular format is not the best option. JPEGWhen to use it - Suitable for every photographic image. When not to use it Small logos or images with few colors are better rendered by PNG or GIF. An image entirely consisting of text should be saved in PNG or GIF format since they produce much crisper edges; a text saved in JPEG looks, in comparison, much more blurry. In general, everything with a lot of sharp and crisp edges is more suitable for other formats than JPEG. GIF When to use it Primarily with animations. Small icons or small logos with only a few colors. Vector images with sharp edges and few colors. For displaying transparent images with IE6 (PNG transparency is not supported). When not to use it - Basically, GIF's should be rarely used since in most cases 8 bit PNG performs better. PNG When to use it - When transparency is required and quality matters. When not to use it The compression algorithm of PNG is more efficient as size increases, so, for small and simple logos, a GIF may be smaller. When designing for retina displays, two or more versions of the same image/logo/icon have to produced. For vector images (logo, icons), an SVG is a much better choice, since it scales without loosing quality and there's no need to produce additional versions. Non-transparent, photographic images may look better when saved in PNG (it's a lossless format) but they are much larger than the JPEG versions. The loss in quality is minimal and is not enough to justify the sensible "weight" difference. SVG When to use it - When you need to embed vector graphics that should retain high quality in every situation (typically when designing for retina displays). When not to use it If you need to support outdated browsers such as IE8 and below.If you don't know what you are doing. Using an SVG file is not as straightforward as using an image and you need to read about the format and all of it's possible buggy implementations. Case in point: Internet Explorer 9, 10 & 11 don't scale SVGs properly (lossless scaling was the main reason to implement it) but there is more than one good workaround out there.Normally, SVG files are very small since they contain just vectors, but this is not always true: very complex SVGs can be quite large and not so easy to render, thus slowing down older machines. Complex files can be optimized directly within the editor (for example Adobe Illustrator has many tools to simplify files). Typical mistakes It's assumed that every web designer has had at least some training to understand which image format should be used in different cases, but many developers did not get this kind of training although they have to deal with images, too. So it's not a bad idea to give out a few pieces of advice. Using PNG for maximum quality may be a bad idea Some clients, with a limited understanding of how web works, ask for very high image quality and suggest to use PNG, since it's a lossless format. This is a very bad choice: saving in JPEG with a comparable quality produces significantly smaller files without a noticeable difference in quality. Always make tests and compare the results if superior image quality is asked for; you may easily save hundreds of kilobytes per image. Don't be scared by SVG SVG is a relatively recent addition, and it's also the most complicated graphical format to handle. That explains why not everyone uses it and, when dealing with a company's logo, the preferred choice is PNG. But using an SVG logo is certainly the best choice around for this kind of graphics. Logos usually are vector graphics: PNG converts it to a bitmap format, while SVG keeps it native. The vector version will be smaller and crisper at every resolution. Recently, SVG has added another point to its score: it's the ideal solution for retina displays. You don't need to have two versions of the same image, one normal and one for high-res displays, as with all other formats: one SVG will fit all. Sometimes you simply don't have to optimize Optimization is a word with a positive nuance, but when you optimize you lose something, and sometimes the compromise is simply unacceptable. When producing a full-screen background header image, it's best to make it very big so that it can cover most of the resolutions without scaling up too much. The common breakpoint for that is the typical 1920 x 1200 pixels of high-end displays, and most background images fit this resolution. Unfortunately, when dealing with larger screens, these images often fail to properly fit into the available space because the height of the header stays pretty much the same, while the width is considerably larger. In such a case you need a different background image with a proper ratio. It will be much larger than your original one and you will be probably scared by it's size (but if you use proper media queries, it will be rarely downloaded), but it's better than to show a misplaced header to some users (with high-end equipment). Optimization tools We have good news: you can make your assets smaller. There are tools around that excel at shrinking existing images with very little quality reduction. They are so efficient that they should be used in every project, even with a low number of graphic assets. JPEG optimizers have been around for a while but, since the format is already compressed, the gain was negligible. Today, compression algorithms are much more effective and they can reach a decent 10%: if you have many large images, it's a fair amount of saving. But the real sweet part comes about PNGs: one of the first and best known PNG optimizers, Tiny PNG, can normally save around 60%, and it's not uncommon to get even to 80%. This service converts 24 bit PNGs to 8 bit ones; there is a loss of quality but it's usually quite small so it would not be noticed. Considering the huge saving, the trade-off is clearly on its side. As said before, SVG files aren't always small. Since they are vectors, dimensions do not matter, but if the file is made up of lots of paths and layers, it can become heavy and slow to render. In addition, we need to consider that SVGs are basically XML files and, when generated by vector programs like Adobe Illustrator, they are usually bloated with unnecessary code. An optimization tool, like SVGOMG can do wonders but it has to be used with care because it might remove important pieces of information in the optimization process. If using an SVG optimizer is not desirable (most of them lack a graphical interface and simple instructions), we can always work in the editor to simplify the file as much as possible and make it lighter. In Adobe Illustrator you can simplify paths, merge paths, and replace Photoshop filters with SVG filters, and don't forget to make the artboard fit the artwork bounds. When exporting the file, we can decide to outline text (this will increase compatibility but the text is not editable anymore), or embed any bitmap image (normally it’s not advised to have any) as well as specify decimal precision; a value of 1 will fit most of the needs. It may seem strange nowadays to struggle for saving 200-300 Kbytes while we serve our websites out of broadbands capable of a speed of 1 Megabyte per second. One could think of the optimization process as a waste of time and resources but there's nothing more wrong. Have you ever heard of Google PageSpeed Tools or PageSpeed Insights? These are tools given to us by Google to help analyze and optimize our website because speed is a major factor for getting a good page rank. Even if this isn't enough to persuade you to invest time in optimization, you should consider how impatient users have become: they leave a website after few seconds spent on loading. There are many bottlenecks in a typical connection, and an unoptimized website will usually take much more time to load as expected. So with all this mind, are you still sure you want to keep those three 400 Kbytes PNGs in your slider?

More great blog posts from Alessandro Loverde

  • Tighten Your CMS Security

    A small investment early in the deployment phase can go a long way to creating a secure environment. Fine tuning permissions Every CMS allows administrators to set permissions for different users or groups and, for the sake of better security, one should check that editors can only do what they...

  • Video Tutorial: Building a React App - pt5: Working with External Data

    In the previous part of this tutorial we explored components: the distinctive React feature. We did no magic because we wanted to focus on the basic structure of components, but now the time has come to explore the advantages of generating code employing external data. Replacing hard-coded with...

  • Five Quick Tips Before You Start Your Next SaaS Project

    There are many web apps around, some good, some bad, some are kind of life-changing while others lay almost forgotten, but making a SaaS app is something definitely bigger; a good programmer and a talented designer are not enough. The concept of Software as a Service looks far ahead and...

  • Strategies for a Multilingual Website

    Having a website just in English may be okay for most businesses. In fact, even if you occasionally need to reach foreign visitors, you can expect that whoever is interested in your services has enough knowledge of English to clearly understand what you are offering. But if you sell something...

  • HTTPS and SEO: How to Cover your Assets and Avoid Common Pitfalls

    Back in 2014, Google started to consider making the use of a secure connection (HTTPS) a parameter in their search algorithm. It began with just a 1% weight over all the other factors, but they pushed it further and further; and now, in 2018, every professional website must be served through a...

  • WordPress and SEO; Costly Missteps to Avoid

    WordPress is often a popular choice for a website builder and it is appreciated by many because it gives the users a lot of freedom regarding tools and plugins. Unfortunately, this approach is not good for your SEO because WordPress does not offer many SEO tools out of the box and, if you don't...

  • Video Tutorial: Building a React App - pt3: Code Components

    In the previous part of this tutorial we have converted an existing HTML page into a React app, but we have not seen much interactivity so far. In this new chapter we start exploring one of the most interesting React features, the components. Let's build something dynamic We are going to create...

  • Rising Stars and Falling Comets in the CSS Universe

    CSS is our friend; the relationship between it and web designers has been a bit turbulent over time, but near the end of the first decade of the new millennium, it settled down with mutual love and respect (in the meantime Internet Explorer has met its fate but nobody mourns the loss, right?)....

  • A Bit of SASS Magic: Automatic Text Color in CSS

    We already talked about SASS and how it can revolutionize your approach to writing CSS. We talked about variables and indenting; powerful features but easy to handle nevertheless. We mentioned that SASS has more advanced functions, and in this article we are going to explore a handy one. The SASS...

  • This Is How We Do It - The TROX Case Study

    TROX understands the art of handling air like no other company. It’s a dynamic firm and, through research and development, TROX became a global leader of innovation in ventilation systems. A business can be efficiently run only with efficient tools and TROX has chosen Scrivito to manage over 70...

  • How to Up Your UX Best Practices for Mobile Apps - pt2

    One central guideline for a designer is to have a clear understanding of the medium, the way users will interact with our design. It can be a television, a computer, a book, or any number of things: design is everywhere. A mobile phone is not just a small computer; it has its own unique features...

  • DOM Filtering with jQuery - What You Need to Know

    We have already given an introduction to the jQuery library, showing how useful it can be for web designers and developers: it simplifies the JavaScript syntax for lots of useful DOM-related tasks and it can dramatically speed up the routines to select DOM elements. Now it’s time to expand your...

  • How to Up Your UX Best Practices for Mobile Apps - pt1

    The concept of mobile apps has greatly evolved: with the first apps, developers tried to replicate the same experience of a desktop but, given the limited resources, the results were pretty different and, in some cases, disappointing. A more modern approach is to create mobile apps that offer the...

  • Video Tutorial: Building a React App - pt2: Installation

    In the first post of this video tutorial series, the basics of React.js were covered. Now it’s time to move a bit forward: we will install React.js and configure it. Eventually, the web page of the standard web application will show up in the browser. The installation process The very first step...

  • Obscure HTML 5 Features That May Make Your Day

    Stumbling into one of those popular, so called “cyber cafès” means that nowadays you will probably find tables occupied by hipster-like web designers, delighting themselves into glorifying the moment when they embraced SASS, React.js, jQuery, Node JS, Ember, Bootstrap, Angular and others. Well...

  • You Asked For It - Scrivito Features & Benefits

    The web is changing at a truly fast pace! New technologies break into the market more rapidly than before. The period of caution and skepticism grows shorter, as the IT world has finally understood the impact of being stuck for too long on technologies which are reliable but outdated. The time to...

  • Getting Sassy with SASS - Your First Steps

    CSS is great and there would be no web without it: if you have been involved enough to remember the state of the web in the late nineties, you will immediately get the point (probably, along with a couple of shivers). Unfortunately, CSS has its limitations and they are not easy ones; that’s why...

  • DOM Traversing with jQuery - What You Need to Know

    The Document Object Model (DOM) is an object-oriented representation of a web page which can be modified with a scripting language, like JavaScript: we can think of the DOM as a representation of an HTML page in a way JavaScript can understand. JQuery is a very popular JavaScript library that...

  • Tips & Guidelines for A Better Mobile UX - pt2

    Mobile websites are not just a trend; they meet the user’s demand for a better and more rational use of their time. If we are already out of the office and need to check if the product we want to buy is effectively in the store we are confidently heading to, it’s nice to be able to check this on...

  • Tips & Guidelines for A Better Mobile UX - pt1

    When the iPhone came out it started the mobile web revolution: for the first time, we could browse web pages on a mobile phone in a decent and usable way. As soon as people had started to do that, the limits of the resizing technology used became evident, accompanied by a high demand for a...

  • Five Quick Tips to Learn JavaScript Faster

    JavaScript has been around quite a while now and we can almost consider it part of the ”old wide web”. But the JavaScript we use now has evolved immensely since its first days. We could better say that what really evolved were the projects that had JavaScript as their core and that made the web...

  • Video Tutorial: Building a React App - pt1: Introduction

    Anybody interested in Javascript development has likely stumbled on MVC frameworks, a term that is pretty much going strong recently and defines a library built according to the “model - view - controller” design pattern. React.js is a Javascript library that acts as the “view” part of an MVC...

  • Traditional, Headless or Decoupled: The New State of CMSs

    Headless CMS is a term that has been on everybody’s lips recently, along with Content as a Service and Decoupled CMS. Actually, these three concepts are very closely related; you can’t talk about any of them without citing the others as well but, for a better insight on the topic, talking about...