General recommendations

Color scheme

Consider your site’s color scheme when choosing and creating images and graphics. Use colors that harmonize with the overall design and create a pleasing visual impression.

Adaptability

Pay attention to the adaptability of graphics to different screens and devices. Make sure your graphics scale well and display correctly on different screen resolutions, including mobile devices.

File organization

Store photos in well-structured directories and use clear and descriptive file names. This will make it easier to manage and find the right images for your site.

When uploading to the site, be sure to check that the image file names are in Latin and do not contain diacritics and other special characters, as well as spaces.

Adding alternative text (alt text)

For each image, add descriptive alt text. This text will be displayed if the image cannot be loaded, and is also used when visually impaired or blind people visit the page (in SEO terminology this is called “accessibility”). Additionally, alt text helps search engines understand the content of an image and can improve SEO.

Photos and other raster images.

A raster image (also known as a bitmap image) is a form of graphical representation in which an image is composed of individual pixels (dots) organized into a grid. Each pixel has its own color and is independent from other pixels. Raster images are usually created using cameras, scanners, or graphics editing programs.

These guidelines primarily focus on photographs, but they also provide general guidelines for preparing any graphics used on site pages.

Defining size and resolution

The size and resolution of photographs play an important role in preparing content for the site. Determine the photo sizes to suit your website design and set the resolution to 72 dpi for optimal screen display.

Selecting a file format

Select the appropriate file format for the photos on your site. JPEG and PNG are the most common formats for web pages. JPEG provides high quality images, while PNG is suitable for images with transparency and logos.

Quality control and image optimization

Find a balance between quality and file size. A quality that is too low can result in loss of detail, while a quality that is too high can increase file size and slow down page loading. Adjust the compression level to achieve the optimal balance, usually 70% is optimal. Sometimes this rule can be broken, for example, if this is a portfolio site of a professional photographer, where the most important thing is to show the quality of the work.

Cropping and retouching

If necessary, crop photos to fit the size and composition of your site. You may also need to perform retouching to improve the quality of the image or remove unwanted elements.

Векторная графика

Vector graphics

Optimal format

SVG (scalable vector graphics) or AI (Adobe Illustrator format).

Important aspect

In most cases, smooth and anti-aliased outlines of vector images look better. Provide natural-looking contours without harsh transitions or unevenness.

Advantages of vector graphics:

• Scalability. Vector images are based on mathematical formulas and vectors, which allows them to scale without loss. This means they can be resized without losing quality or clarity, which is especially important when creating graphics for different media and devices.
• Small file size. Vector files are typically smaller in size than raster files because they contain information about formulas and vectors rather than about each pixel in the image. A smaller file size is important for fast loading of web pages and efficient storage of files on your computer or server.
• Editability. Vector images are easy to edit and change. You can easily change the shape, size, color and other properties of vector graphics objects without losing quality. This makes vector graphics flexible and easy to edit and customize as you work. Modern content (website) management systems in most cases allow you to carry out such editing directly in the site admin panel.

Vector graphics are perfect for logos, icons, animation and process visualization. Its versatility and flexibility make it a popular tool for creating accents and effects.

Consider these guidelines when preparing graphics for your website to create a visually appealing and professional site.