Check out our simple guidelines for recommended image formats and maximize the ubs.com experience.
Images formats on ubs.com1
Images formats on ubs.com1
71,100 JPGs - average size: 31 KB
60,600 PNGs - average size: 64 KB
4,400 SVGs - average size: 7 KB
Total number of image files: 140,900
JPG (JPEG)
Uese for photos
Advantage
Advantage
- Small file size – a huge advantage for page load times!
- Fast transfer and quick access to online viewing thanks to small file size. By intelligently discarding all the colors that the human eye can't see – called lossy compression – JPG file size is as small as possible
Disadvantage
Disadvantage
- Images that need to be displayed in great detail, such as illustrations may lose quality due to compression.
Good to know
Good to know
Photos make up a large proportion of imagery used on ubs.com – so in most cases, JPG will be your preferred format!
SVG
Use for graphics, charts and illustrations
Advantage
Advantage
- SVGs are ideal for vector-based graphics, including logos, icons, flat line drawings, illustrations and infographics. SVGs are based on mathematically declared shapes and curves, not pixels.
- As a vector format, SVG graphics can be scaled without any loss of detail.
Disadvantage
Disadvantage
- SVG images are only supported by modern browsers and may not be compatible with older browsers such as Internet Explorer 8.
Good to know
Good to know
Since SVGs do not contain pixels, this format is not suited for high-resolution digital photos – use JPG instead.
PNG
Use for small images that require transparent backgrounds or contain text
Advantage
Advantage
- The PNG format uses lossless compression, which means that this file type retains of all its original data when compressed. This makes PNGs great for detailed graphics and charts with text because none of the vital information gets lost.
- One of the advantages of PNG files is their ability to show transparency.
Disadvantage
Disadvantage
- Due to their compression approach, PNG images are (sometimes substantially!) larger than JPGs.
Good to know
Good to know
Be mindful of accessibility requirements for images with text.
Examples
Photos
JPG
JPG
PNG
PNG
The difference is striking: PNG is over 15 times larger! That’s why it’s essential to use JPG for photos.
Illustrations
SVG
SVG
JPG
JPG
The difference in sharpness is striking: SVGs are always sharp, no matter what size. For illustrations and graphics, there's nothing better!
Charts
Complex diagrams need to be readable. With the SVG format, you can ensure readability in any display size, without any loss of quality!