Image formats

On the website, the SVG image format is used primarily. The reason for this is its small file size and complete scalability, which works excellently with responsive websites—not to mention the additional advantages it offers in terms of further usability.
Alongside SVG graphics, PNG versions are also available in some cases. While these are easy to use, they lack the benefits of full, unrestricted scaling, and their file sizes are generally larger than those of vector-based images.

Differences Between Vector and Raster Images

Kép vektor formátum

Vector Graphics

Vector graphics are a method of graphic representation in which images are defined by mathematical objects such as points, lines, curves, and polygons. As a result, vector graphics can be scaled infinitely without any loss of quality.

It is important to note that vector formats and their editing software allow raster images to be embedded or linked. However, in such cases the images are only partially—or merely nominally—vector-based, since the properties and rendering methods of the embedded raster image remain unchanged.

Kép formátum

Raster Graphics

Raster graphics are digital images composed of pixels. Each pixel is an individual unit with its own color information. This means that image quality depends on resolution, and when enlarged, pixels may become visible, resulting in a loss of sharpness.

Common Vector Formats

  • SVG (Scalable Vector Graphics): Used for web applications and graphics.
  • AI (Adobe Illustrator): Native Adobe Illustrator format for professional graphic work.
  • EPS (Encapsulated PostScript): Used in printing and professional graphic workflows.
  • PDF (Portable Document Format): Can contain vector graphics and is widely supported.

 

Advantages of Vector Graphics

  • Infinite scalability: No pixelation when enlarged.

  • Small file size: Simple shapes and geometric elements are easy to store.

  • Editability: Individual elements can be easily modified and rearranged.

  • Ideal for logos, coats of arms, and illustrations.

Disadvantages:

  • Not suitable for photographs or highly detailed images.

  • Very detailed and complex vector graphics can result in larger file sizes.

Summary

Vector graphics are an excellent choice for coats of arms, logos, and illustrations where scalability and editability are essential. The SVG format is particularly useful for web display and open-source projects.

Common Raster Formats

Raster images can be divided into lossy and lossless image formats.

1. Lossy Image Formats

Characteristics:

  • Data loss occurs during compression, reducing file size but degrading image quality. Once compressed, the original data cannot be fully restored.

Advantages:

  • Small file size, fast loading times, ideal for web use.

Disadvantages:

  • Quality degradation, especially after repeated saving.

Common formats:

  • JPEG / JPG: Widely used for photos and web images, but now considered outdated.
  • WebP: A modern format with better compression and quality ratio.
  • HEIC: Common on iOS devices, offering high compression with good image quality.


2. Lossless Image Formats

Characteristics:

  • No data loss occurs during compression, preserving the original quality.

Advantages:

  • High image quality, suitable for editing.

Disadvantages:

  • Larger file sizes compared to lossy formats.

Common formats:

  • PNG: Supports transparency, ideal for detailed graphics.

  • BMP: Very large file size, rarely used.

  • TIFF: Used for printing and archival purposes.

Summary

  • Use lossy formats when small file size is critical (e.g. web photographs).
  • Lossless formats are recommended for graphic design, logos, and situations where preserving original quality is essential.

Additional Advantages of the SVG Format

  • Can be embedded directly into websites.
  • Usable as an image in many applications, including Microsoft Office and LibreOffice, and supported by most major graphic design software.
  • Remains editable, even in free applications such as Inkscape.

  • An open, non–vendor-specific format, unlike AI or CDR.

Advantages of the PNG Format Compared to JPEG and GIF

  • Lossless compression: No block artifacts; JPEG shows significant quality loss at higher compression levels.
  • Advanced transparency handling: Can be placed on any background.
  • 255 levels of transparency, compared to the single-level transparency of GIF, ensuring that fine details are preserved.