Working with images to suit all
Hi, I’m Sara, Graphic and Web Designer at edataconsulting!
During my career, there have been times when communication with clients or colleagues outside the profession has been hampered by a number of factors. Among those detected, those that have to do with the use of images and their technicalities.
Throughout this article, I’ll give you some design tips related to the use of images, how many different formats exist, which are the most common types, colour models… and a few more related topics.
All of them are some necessary technical concepts and tips to help you to be able to communicate your needs whenever you are working with images.
Let’s get started!
Knowing image types
While we are working on a project the first thing we need to identify is what kind of image type we are going to use: Raster images or Vector images. Most of you might be more familiar with the raster type, which is simply defined as the file composed of pixels. And on the other side we have the vector type, which is also commonly used but on the contrary, is not built by pixel but for the use of mathematical equations, lines, and curves with fixed points called ‘anchors’ on a grid to produce an image. I know I know, too technical but you’ll see in an image example.
These two image types are the most popular for visual content and the main differences between the two resides on the matter of resolution, the uses we give them, file sizes and compatibility.
To summarized and not to be too technical again, I just need to point out that while the raster type suffers from a loss of quality when the image is resized, this is not a problem for the vector type since we can resize and rescale infinite times without any loss. This provides a wide range of sizes, but when it comes to colours, there’s a huge difference between them. Vector types are displayed in solid ones while the huge amount of pixels gives the raster type the possibility of displaying a wider colour spectrum.
Here a visual approach on how a vector and a raster types looks like:
Do you know which file format you should use?
I’m sure you are already familiar with some file formats, but do you know in what context they should be used?
Both Raster and Vector types have a variety of file formats (jpg, png, gif, .bmp, .tiff: in the case of vectors: .svg, .ai, .eps…), but let’s concentrate on the three mostly used for website and printing purposes; those are the .jpg, .png and .svg file formats.
The first two formats correspond to a ‘Raster image type ’ and the last one to a ‘Vector image type’ and all of them are susceptible to be used in a website at the same time but not when it comes to printable uses, so we need to know when each of them are needed.
The Raster types we usually tent to use are the .jpg and the .png file formats, of course, with different colour modes for each purpose; but that’s a field in which we’ll be full submerge in a few lines, be patient.
The main difference between them is related to the compression of the file. While one of them -.jpg format- has a compression algorithm that affects the file size and sometimes can lead to a loss of quality, the other one -the png format- is not affected in that sense, since although it has a kind of compression algorithm type, this is based only in the perception of the images colour.
So when do we need to use one or the other?
Most of the time .png is needed when we require transparencies or images without backgrounds, which doesn’t support the .jpg file format. This last one, nevertheless, is more suitable in cases when we have a digital project with a considerable amount of images (i.e: software, website, apps…) and we need to speed up our page loading time.
And the last one but not less important, the .svg file format. On the contrary of .png and .jpg type, the .svg was designed purely to use on website. It is one of the lighter files and it never loses resolution, you can manipulate it dimensions without worrying for a lack of quality. So, this should be used on any graphic image susceptible of being resizable such as logotypes, iconography or illustrations.
Colour Models. To suit all tastes they say, but not in this case.
There are only two colour models for images: RGB and CMYK. They differentiated each other in how the colours are mixed and for that case, the uses we give them.
The RGB model is considered an additive mixing model in which each color -red, green and blue- all together in the same proportion (100%) creates a pure white and the absence of them creates black; but basically the entire colour spectrum are represented with the addition of every primary colour in this model. On the contrary, the CMYK or four-colour process is a subtractive model in which all the colours appear by deference of light on each tone.
It is important to understand the difference in color models if you are going to work with or edit images for online or printed aims. But if you are not, don’t panic!
On this point you should only be concerned on using and being provided with RGB images from the clients or the external designers when it comes to online uses. In the case you need logos to be displayed on screen and the client doesn’t send you the vector format, just make sure they provide you with the RGB image, better if it is in the .png type.
And to finish to this block, the CMYK images are for printing purposes only so they should be only the priority for designers but if you are not lucky to have one to help you, just check that your document –business cards, posters, flyers, merchandise, etcetera- are exported with the CMYK colour model selected.
How can we tell them apart at a glance?
For non-designers or people not used to often manipulate images and without a tool that allows seeing the details of the image as photoshop or other free license program it could be difficult to detect of which type of image format we have in our possession. But there’s one simple trick that might help you:
If you use the CMYK model for a digital image; the more colour you add to the picture, the darker the resulting mixture will be. But with the RGB model, is the opposite, the lighter the result will be. For that reason, images with a RGB color model are usually perceived in brighter colours while with CMYK model applied colours will appear duller.
Resolutions, Image Size & File Size. The eternally misused terms.
Probably, more than once, you have found yourself in a conversation with a designer asking for requirements, and been lost with all the technical terms we use coming out of our mouths. Let’s give you some explanations about them.
Sometimes we get confused between resolution and dimensions (image size) of an image. The resolution correspond to the number of pixels per inch in an image. So the more dots, the more quality we have.
The standard values are 72 dpi, 150 dpi and 300dpi. Each of them used for different purposes. On screens, the commonly used is the 72 dpi standard and for printed graphic material the optimal resolution is 300dpi.
But what happens if we want to reduce the resolution of an image? Well, it will affect the quality in which the image is seen but not the file size.
About the other two concepts… you will understand them very quickly. The image size is the dimensions and resolution of the image (pixels x pixels) all together and the File Size (measure in KB) correspond to the amount of space that the image takes up in your hard disk. Very simple, ha!
Therefore, knowing these concepts properly will help you not to be misunderstood during your conversation with designers.
Follow these best practices
In addition to all of the above considerations, whenever you are faced with a new project and need graphic material try to be sensitive to how you apply a brand, what image license you use and the quality of these, as well as the accessibility of your work to those who are visually impaired. Printed and digital resources should be available to all.
Here are some good practices that will make you a professional who is more aware of the appropriate use of images:
- Follow the brand guidance. When working with brand images as we do, to apply them, we must first ask the client if they can provide us with a brand book, and therefore… follow the guidelines. If this brand book doesn’t exist, then apply the logotype without any transformation. Not changes of colours nor unproportionally rescale.
- Be aware of Right images. As you well know, there are different types of licenses available for image banks on the internet such as the creative common license. This type of license has also different rules, so when using a Creative Common Image we need to read the legal information just in case we must name the author; it is for non-commercial purposes or only to apply for personal uses.
We need to be careful to ensure that such images can be used in our projects and if that’s the case, be respectful with the work of others, i.e. mention the author. - Accessibility. Apply each component available to images, such as aria-labels -in the case of websites-, so that they are well readable by screen readers.
- Hight-resolution images. When it is necessary to reduce the size of the image due to loading problems, make sure it has the least loss of display quality.
- Text readability. If we use text embedded in an image, we must ensure that it has enough contrast and a legible font.
— — — — — — — — — —
I hope you’ll find this article interesting and that you’ve learned some new concepts. I am sure this will reduce your lack of knowledge and therefore your anxiety to express yourself in proper terms.
Just bear in mind this is just a new step towards being able to communicate your needs properly to clients, designers and colleagues at work. So, when you feel ready, go for it! Don’t hesitate to dive in with all your new vocabulary and implement good practice.
