Optimize your logo for a website

1. Colors in the web

RGB color "Red, Green, Blue": this colorimetric mode is used for screens, be it computers, smartphones or television or camera. To make it simple, the screens of computers or phones must be lit so that we see what is displayed.

Small explanation: each pixel of a screen is composed of three points of light, red, green and blue. To obtain different colors, we vary the intensity of these light points, from 0 to 255. If the three colors red, green and blue are at 0, we get a black screen: zero brightness. On the other hand, if the three colors are 255, we get white: maximum brightness.

Here are some examples of colors

1. Pure red color #FF0000

2. Formats on the web

2.1 JPG or JPEG

• The JPG format is a classic export format for an image.
• It is a disruptive format because if you reduce the weight of a JPG image you also reduce its quality.

2.2 PNG

• The main advantage of PNG is that it takes into account the transparency of a layer unlike a JPG. This is interesting to export a logo without background color.
• Contrary to the JPG format, it is a non-destructive image format because this format allows to reduce the weight of an image without impacting its quality.

The PNG format has several export modes:

• PNG 24 : it is a recording with + 16 million colors. It's a high quality export to have an unrestructured image.
• PNG 8: this is a recording with different palettes: either 256, 128, 64, 32 or 16. The smaller the palette, the less colors there will be in the image. The image is therefore less heavy but also of poor quality.

2.3 WebP

This image format was developed by Google. It provides the same file as a JPG image, but with a smaller file size.

By reducing the size of your image files with this format, it helps to provide a better experience for website visitors because the website pages will load faster.

In Google's WebP compression study, we see that a WebP image is

• 25-35% smaller than a comparable JPEG image.
• 26% smaller than a comparable PNG image.

The WebP format is supported by most browsers like Chrome or Firefox. However the WebP format is not compatible with the Apple browser, Safari. Indeed, we will find "broken" images with a white background on a PNG for example. Even if the users of Safari are less important, you should not neglect them and find an alternative.

Another problem with the WebP format, the Wordpress CMS does not allow to add a WebP image in its library, a nice error message will be displayed instead. To use WebP on Wordpress you must download a WebP Express plugin.

2.4 SVG (Scalable Vector Graphics)

Benefits :

• Ultra light weight.
• Easily editable from any text editor with CSS or with a graphic design software like Illustrator or Sketch.
• No change in image quality: ideal format for HD and ultra HD screens regardless of the final image size.
• Compatible with all browsers.
• Infinite animation possible with CSS or JS

Disadvantages :

• the size of an SVG file grows very fast if its content contains a lot of graphic elements or a lot of layers.
• A CMS like Wordpress does not allow to import SVG files. For the most daring, you will have to touch the code and add a few lines in order to add SVGs. For the others, you will have to be satisfied with a JPG, JPEG or PNG format for your images

To optimize your logo, use the SVG format for its export. It will only be a few bytes and will not affect the loading speed of your site.

Good to know: There is now the SVGZ format which is the compressed format of an SVG. This format allows you to reduce the weight of an SVG by 30% without any loss of quality. The disadvantage is that you no longer have access to the modification via the CSS, you will have to use a software like Illustrator to modify it.

3. The export

When you create your logo, think of working more horizontal than vertical. Indeed a logo higher than wide or square will not fit properly in the header (menu) of your website.

Here is an example in image for the Snoweb logo, with a more horizontal logo, the header is less high and therefore takes less space on the page, leaving room for the important information of the site.

Some sizes for exports

For a horizontal format :

• 250 px x 100 px
• 350 px x 75 px
• 400 px x 100 px

Favicon :

• 16 px x 16 px
• 32 px x 32 px
• 48 px x 48 px