Table of Contents
Images are the cutting-edge trend of today’s web. You can see them almost everywhere. It is such a big trend that when I stepped from development to design, I have no idea how to create a website without BIG hero image. Seriously, I was not able to put together a good design without this element. Anyway, because of the weight images and visual elements in general have, UI design series could not be whole without spending some time on them. So let’s discuss some good practices for images related to UI design.
Images and optimization
Before continuing, I want to clarify that this post will not discuss ways and options to optimize images from the view of file size, bandwidth and so on. This is because the subject of image and asset optimization was explored in deep in one of previous posts called Need for speed. Yes I love that game. Underground 2 and Most Wanted, the old one, are the best, then Porsche. Let’s not forget the soundtrack! Anyway, in case you are not familiar with this topic or your knowledge about it has some gaps, read that post as well.
In the Need for speed post I also mentioned couple tools to use to lower the file size along with various methods and techniques you can use to speed up your website without decreasing the quality of content. These tools were often for both, PC and Mac and used UI instead of plain command line. In this post the main assumption, from which we will start, is that you already have your images optimized and ready to get some more boost. Without any more chitchat, let’s begin.
No.8: Boost optimized images
If you are a designer with experience longer than a month and has no clue about raster and vector images, you’ve seriously screwed up your learning process. Understand the difference between these two terms should be part of the foundation of your education. Anyway, why am I talking about vector and raster graphic? In same situations, using perfect vector images instead of raster is much better idea. For example, when you are working with illustrations like the one you can see now that utilize flat design.
“When you can, choose perfect vector.”
Another example can be simple icons and other “flat” stuff. For these cases, using vector graphic and SVG files is better than using raster and serving them as JPGs or PNGs. What’s more, vector images has one big benefit that will win over raster any time. Since vectors are generated using mathematics they are also scalable, i.e. responsive. When you use perfect vector image in your project, say a website, you don’t have to worry about creating more smaller or bigger versions. They will rescale while sustaining the quality. When you can, choose perfect vector.
Believe it or not, probably every image you use contain at least some metadata. One part of the metadata you might be more familiar with from working with tools such as Adobe Bridge and other image viewers can be title, document type, date, size, resolution, bit depth, camera model and so on. These can be found in most of images stored on your hard drive. However, this is only one part of the equation. There is a bit more …
“Remember to minify metadata.”
The second “type” of metadata I want to mention comes packed inside with vector images. When you create some graphic in tools such as Adobe Illustrator or Inkscape, they will also include some additional data into the result of your work. When you view the code for the vector and go through the paths, you can find them fast. Look for CDATA segments. Everything included in this segment is a part of metadata. Removing the unnecessary CDATA can reduce SVG files to just a few KB. You can do this manually or let the software do the job for you. Whatever method you choose, just remember to minify metadata.
As already mentioned above, you should work with different formats of images according to situation you are at that moment. The most often used file formats for images on the web are JPG/JPEG, PNG and (PNG-24) and GIF. Let’s also add BMP as well (sorry TIFF). In a quick … BMP, PNG and GIFs are lossless formats and when you make images smaller, they don’t detriment to the quality. JPEGs, on the other hand will. BMP, PNG and GIF are also indexed and can only store a limited number of colors, 256 in case of GIF.
“Remember to always pick best format.”
GIF and PNG can also handle transparent areas in images while JPG not. One more thing … GIF files can be animated. The issue with BMP is that they are fucking huge while not giving anything in return. What to take from these informations? Forgot the BMP right away. Use JPG/JPEG for bigger images like photos. For logos and line drawings choose GIF or PNG/PNG-24 depending on file size and amount of colors used. Remember to always pick best format.
Next piece of wisdom is to automate the scaling. No matter if you are working on UI design for website or for an app, you can either scale all the images manually using media queries and other techniques or let the environment and device do the job for you. For some situations, like when you are not using full background images, you will need to simulate various scenarios and prepare for them. However, in the rest of examples go with automation. Width set to 100% will do it. Remember, automate the scaling when you can.
“Remember, automate the scaling when you can.”
One thing to keep in mind while scaling the images and playing with dimension is to use the natural resolution, i.e. ratio of width and height. You probably don’t want the images to look distorted or blurred. You want the nice, clean and sharp without any deviations (in most cases). For this reason, you should always keep the resolution or ratio the same. If you have problems with fitting the images somewhere, crop them but don’t deviate from the natural resolution. Remember to keep the natural resolution.
“Remember to use the natural resolution.”
The last word of wisdom to give you before the end is to always use alt-tags. You’ve read about this in part 4 about accessibility, but it should be mentioned here as well. First reason for using alt-tags or attributes on images is to describe the content to users who either cannot or don’t want to view images. Second reason is web focused and is about SEO. Alt attributes are great place you should include in your keyword distribution strategy. You want the website to be found, right? Third, Google focuses on alt text when trying to understand what an image is about. So, keep the search relevant! Conclusion? Remember to use alt-tags.
“Remember to use alt-tags.”
Final words
Game, set, match. You’ve made it again! You successfully went through another part of UI design and got tons of knowledge while staying sane (hopefully). Let’s recap … Every situation is different and in some perfect vectors will be much better than raster. Before using SVG files or pasting the code double-check and minify the meta-data. Always pick the right format, don’t settle for one. Automate the scaling when you can or when it is possible. No matter the size (Does it matter?), always keep the natural resolution (ratio). The last one … use alt-tags and attributes. Now, you are ready to handle images like a pro.
Thank you very much for your time you invested in learning about images and optimization! See you in the next part of UI design – 10 steps for great user interfaces where you will learn about … Minimalism.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
