If you are thinking about running a blog or improving the online presence of your business, you will definitely need to learn how to properly use graphics and images. Furthermore, choosing the right file type is just as important.
What I mean by that?
In order to have a successful online presence, writing quality content is only one half of your job. You also need to make your content appealing in a visual way.
The reason is simple:
Content that looks great will be shared more often!
However, simply downloading images and using them as your featured header image is not enough. (Apart from the problem that you also need to make sure they hold no copyright.)
Even if you think you know everything about graphics, using the correct file type at the right time can be more difficult than you’d think.
Today, I will break down the most important strengths and weaknesses of different image file types and how to use them in the right situations.
Understanding Logo File Formats.
First of all, we need to divide image files into two categories:
Raster & Vector Files.
Raster graphics are resolution dependent, meaning that you cannot simply increase their resolution without dealing with loss of quality. They follow the dot matrix data structure. (pixels)
This is the reason why most photo-realistic images are rasterized graphics, to preserve the quality within their given resolution.
Vector graphics are the exact opposite: You can easily scale up a vector image to any desired resolution without the loss of apparent quality.
That’s why vector images are commonly used for typesetting and graphic design.
The more you know! Now it’s time to determine which files are most suitable for your projects:
Popular Raster Graphic Format Files.
The most popular raster file types include jpeg, png and gif.
I’m more than certain you are familiar with all three of them but let’s learn about their individual strengths to optimize your future image quality:
.JPG/JPEG (Joint Photographic Experts Group)
The majority of all images on the web are saved as jpg files – for a good reason:
JPG Files are perfect for high quality photography images but at the same time support low resolution for online usage. (Since you want your images to load fast on a website)
JPG Files will definitely loose quality if they are scaled over their given pixel width.
Unfortunately, they also don’t support transparency and are not recommended for print.
This is the reason why you need to clearly determine the correct image resolution of your image BEFORE uploading them to a website.
Most of the time, the image size will be resized if it doesn’t follow the website resolution conventions – this will cause a loss of quality in most cases!
.GIF (Graphics Interchange Format)
GIF files are very popular on the web for their support of transparency and animated graphics.
They are specifically optimized for online usage. The GIF format allows a smaller file size due to the fact that the number of colors can be reduced to 256.
The quality is lower than JPG and PNG, which limits their usage potential.
Tip: If your “image” is not photo-realistic, try rendering a simple animation or drawing image as a .gif file instead of .jpeg next time.
The file size will be smaller and you won’t notice a dramatic quality loss either. (Which will cause the images to load faster)
.PNG (Portable Network Graphics)
The PNG format was specifically designed for internet usage in 1995.
Optimized for text, graphics and online use to generate a crisper look than GIF. Additionally, it supports transparency as well.
PNG Files cannot be scaled over their given pixel width.
They are not optimized for print and it is said that older internet browser have trouble displaying them. (Which is less of a problem today, since most devices use modern browsers.)
Let’s move on to those vector-based files:
Popular Vector Graphic Format Files
.EPS (Encapsulated Postscript File)
The EPS format is used for illustrations and logos as a vector.
EPS files can be scaled to any given size without loss of quality.
It supports transparency and is optimized for printing.
There are better alternatives for online usage.
.AI (Encapsulated Postscript File)
Ai files represent a vector-based drawing in either a PDF or EPS format.
It is a layered file which is used for graphic design and illustrations.
All of the contents which are being used in the project are easy to locate and modify.
The .AI format is only a project file and thus, not optimized or recommended for online use.
If you don’t own the necessary software, you won’t be able to work or edit this file.
.PDF (Portable Document File)
You were probably surprised that the PDF format would appear in this list but even illustrations and other graphic elements can be exported from certain files.
PDF files are known for successfully sharing a document and all of it’s components such as text, images and other elements without any loss of quality or formatting.
Pulling illustrations from pdf files can only serve as an alternative method, as the compatibility is limited and there are far better options to use, edit and share graphic content.
Now that you are familiar with all of the strengths and weaknesses of each file type, let’s talk about image resolution real quick:
I recently published an article on the topic of how WordPress and other popular CMS (Content Management Systems) automatically resize your images to the theme’s given dimensions!
Even if you use a vectorized graphic, you still need to think about the perfect format for your project in order to display the content as best as possible.
Read about those image resolutions on websites and how to fix them here:
However, you should also know about the suitable DPI (dots per inch)
for your projects:
There are two common resolutions and you should be aware of them if you want to use your graphics to the best of their potential.
Here is a rule of thumb:
If you want to use an image for a magazine or high quality prints, go with a resolution of 300 DPI.
300 DPI is a high resolution format which works best for the options mentioned above.
If you want to use an image for online purposes, go with a resolution of 75 DPI.
75 DPI is considered a low resolution and works best for online screen use.
It is not recommended for print though.
A lot of people miss out on the great potential of proper image optimization. It will not only cause your websites to load faster, but furthermore, your Google rankings will increase as well.
Here is a task:
Next time you upload an image to your website or blog, carefully think about choosing the right format and resolution.
After that, compare both the file size and the overall quality with older images. I’m sure you will notice a difference.
Check out this list of 20 royaltyfree-image websites in case you are looking for high quality, copyright free images for your next project!