To provide services at the highest level, we use cookies as described in our cookie policy. By using our website, cookies will be placed on your device. You can change your browser settings at any time. Check our cookie policy.
Authors
- Izabela Łaszczuk
Hi! I’m glad I caught your attention. This article is mostly intended for designers, but everyone is welcome! I am going to talk about pictures, gifs, icons, logos and everything that is connected to that.
Basics
One of the crucial elements of a process of creating a website is to provide developers with high-quality multimedia content. This means ensuring good quality, no white space, and reasonable file sizes (images - 100/150Kb) to avoid slowing down the application loading.
Whitespace:
Another bad example is the picture below. On the desktop text looks good, but on the mobile phone it becomes unreadable:
Before delivering an image to developers you should discuss the display of them in various sections at the editorial/business - designer - programmer levels. For example, displaying images in a 16:9 ratio within a 4:3 container.
Sometimes to ensure that the picture looks good on both desktop and mobile we use different pictures for them. Ideally, refrain from altering images at breakpoints, but if it is necessary, consider this in cost estimates (more about in article about RWD).
Below, you can see how images can be displayed. This will help understand why if a developer receives an incorrect image, such as one with padding, it may not appear the same on page as it does on the mockups.
Whitespace:
Another bad example is the picture below. On the desktop text looks good, but on the mobile phone it becomes unreadable:
Before delivering an image to developers you should discuss the display of them in various sections at the editorial/business - designer - programmer levels. For example, displaying images in a 16:9 ratio within a 4:3 container.
Sometimes to ensure that the picture looks good on both desktop and mobile we use different pictures for them. Ideally, refrain from altering images at breakpoints, but if it is necessary, consider this in cost estimates (more about in article about RWD).
Below, you can see how images can be displayed. This will help understand why if a developer receives an incorrect image, such as one with padding, it may not appear the same on page as it does on the mockups.
In what format should the images be delivered?
The best formats for images in web projects are WebP, PNG, and SVG. PNG is a good choice because it provides excellent support for transparency and preserves image quality. SVG was made for vector graphics so it scales perfectly to different sizes without losing quality.
WebP is a modern image file format created by Google. It offers excellent graphic quality at a relatively low file size, resulting in faster webpage loading and network bandwidth savings. It is widely supported in web browsers, making it suitable for web projects.
While other formats such as jpg and jpeg exist, we recommend using WebP, PNG, and SVG. The designer should choose one format, and all images should be delivered in that format (as much as possible). This is important for developers, as sometimes logical operations, such as loops, may be performed on the images. If each image has a different extension, it becomes more time-consuming.
It's essential to optimize images for performance and fast page loading. Image compression tools like ImageOptim, TinyPNG, or Squoosh can help reduce the file size of graphics while preserving quality.
TL&DR: Icons, decors, logo, and everything else that requires displaying details, should be delivered in SVG. Everything else - WebP if you can, if not - PNG.
WebP is a modern image file format created by Google. It offers excellent graphic quality at a relatively low file size, resulting in faster webpage loading and network bandwidth savings. It is widely supported in web browsers, making it suitable for web projects.
While other formats such as jpg and jpeg exist, we recommend using WebP, PNG, and SVG. The designer should choose one format, and all images should be delivered in that format (as much as possible). This is important for developers, as sometimes logical operations, such as loops, may be performed on the images. If each image has a different extension, it becomes more time-consuming.
It's essential to optimize images for performance and fast page loading. Image compression tools like ImageOptim, TinyPNG, or Squoosh can help reduce the file size of graphics while preserving quality.
TL&DR: Icons, decors, logo, and everything else that requires displaying details, should be delivered in SVG. Everything else - WebP if you can, if not - PNG.
The issue with images in Responsive Web Design (RWD)
If your application includes any images, you need to carefully consider how to deliver them. Should they shrink and adapt to the screen width, or will they become unreadable, requiring separate images for mobile and desktop versions?
What to pay attention to?
Images designed for desktop screens may have wide proportions that, on narrow mobile screens, can result in the cropping of important content such as faces, details, or significant elements of the image.
Some images may be static and not responsive to screen size, leading to inappropriate fitting on mobile devices. Lack of image responsiveness can result in information or aesthetic loss.
For smartphones, which can be used in both portrait and landscape orientations, images may fit well only in one of them, causing appearance issues when viewed in the opposite orientation.
In the example above you can see an image featuring a face. As the application reduces its width, it transitions at a certain point to the tablet version and then to the mobile version.
On the desktop, the person is positioned on the right side. At a medium width, it transitions to the center. Eventually, in the mobile version, it reverts to the desktop version where, at such a small width, it becomes invisible.
Let’s skip over the title, which spills onto clickable elements, which is an obvious error.
What to pay attention to?
Images designed for desktop screens may have wide proportions that, on narrow mobile screens, can result in the cropping of important content such as faces, details, or significant elements of the image.
Some images may be static and not responsive to screen size, leading to inappropriate fitting on mobile devices. Lack of image responsiveness can result in information or aesthetic loss.
For smartphones, which can be used in both portrait and landscape orientations, images may fit well only in one of them, causing appearance issues when viewed in the opposite orientation.
In the example above you can see an image featuring a face. As the application reduces its width, it transitions at a certain point to the tablet version and then to the mobile version.
On the desktop, the person is positioned on the right side. At a medium width, it transitions to the center. Eventually, in the mobile version, it reverts to the desktop version where, at such a small width, it becomes invisible.
Let’s skip over the title, which spills onto clickable elements, which is an obvious error.
4K vs RWD
Designing a page that is responsive and accommodates 4K screens introduces additional challenges due to the use of a larger screen space. Elements such as backgrounds, decorations, and navigation (especially in the context of "position: fixed") must be designed flexibly to avoid disproportionate placement on large screens.
It's worth noting that despite the availability of ample space on 4K screens, there's a need to consider limiting the width of the page. Sometimes, constraining the width can be beneficial to maintain clarity and aesthetic appeal of the content. You just need to make sure that even after the restrictions, the website looks attractive and functional. Testing such a "trimmed" version of the page on various devices will help ensure that the user experience is always optimal, regardless of screen size.
It's worth noting that despite the availability of ample space on 4K screens, there's a need to consider limiting the width of the page. Sometimes, constraining the width can be beneficial to maintain clarity and aesthetic appeal of the content. You just need to make sure that even after the restrictions, the website looks attractive and functional. Testing such a "trimmed" version of the page on various devices will help ensure that the user experience is always optimal, regardless of screen size.
4K resolution images
Images in 4K resolution pose an additional challenge in responsive design due to their large size and file weight. Using such high-resolution images on smaller-screen devices can be inefficient, slowing down page loading and consuming more data.
In the context of responsive design, it's crucial to provide images in various resolutions optimized for different devices. The "srcset" technique in HTML5 allows the delivery of different image variants, enabling browsers to choose the most suitable one based on screen size and resolution.
For example, for the main image on a page, you can provide three variants: standard resolution for small screens, medium for tablets, and higher for 4K screens. This approach helps maintain image quality and page performance across different devices.
It's also essential to consider image compression, the use of modern image formats like WebP, and lazy loading to optimize image loading. Well-optimized images are crucial for responsive design, ensuring fast and efficient page loading on all devices.
In the context of responsive design, it's crucial to provide images in various resolutions optimized for different devices. The "srcset" technique in HTML5 allows the delivery of different image variants, enabling browsers to choose the most suitable one based on screen size and resolution.
For example, for the main image on a page, you can provide three variants: standard resolution for small screens, medium for tablets, and higher for 4K screens. This approach helps maintain image quality and page performance across different devices.
It's also essential to consider image compression, the use of modern image formats like WebP, and lazy loading to optimize image loading. Well-optimized images are crucial for responsive design, ensuring fast and efficient page loading on all devices.
Logo
When it comes to logos, there are several crucial considerations to keep in mind.
First and foremost, it's essential for the logo to be provided in SVG format whenever possible. This format is particularly useful as it allows for scalable graphics without any loss of quality, which is incredibly important in various design contexts.
Additionally, the logo should be delivered with a transparent background. This enables easy customization while maintaining aesthetics and clarity.
It's also important to ensure that the provided logo is of high quality, meaning it does not contain pixelation or other graphic errors that could affect its appearance at different sizes and on various mediums.
Lastly, don't forget about the file size. It's worthwhile to check that the size is not excessively large, as this could lead to performance issues.
First and foremost, it's essential for the logo to be provided in SVG format whenever possible. This format is particularly useful as it allows for scalable graphics without any loss of quality, which is incredibly important in various design contexts.
Additionally, the logo should be delivered with a transparent background. This enables easy customization while maintaining aesthetics and clarity.
It's also important to ensure that the provided logo is of high quality, meaning it does not contain pixelation or other graphic errors that could affect its appearance at different sizes and on various mediums.
Lastly, don't forget about the file size. It's worthwhile to check that the size is not excessively large, as this could lead to performance issues.
Favicon
Consistent appearance of the application makes you and your company look more professional. That is why developers should also get favicons from the design team. Most often it will be a slightly modified company logo.
You don’t have to spend too much time on it, there are plenty of favicon generator tools you can use. For example - realfavicongenerator.net
You don’t have to spend too much time on it, there are plenty of favicon generator tools you can use. For example - realfavicongenerator.net
Icons
When creating a project, it's crucial not to forget about providing appropriate icons for developers. There are many ready-made icon libraries that designers and developers can use in their projects, e.g. Font Awesome, React Icons, Heroicons. These libraries offer a consistent style across all elements and integrate well with most design tools.
A common issue is mixing several icon libraries in one project. The priority is to adhere to the "single source of truth" (SSOT) principle. This means that when choosing a library or using custom icons created by the design team, we avoid combining them with other icon sets or libraries.
If you (as in the design team) decide to deliver custom icons it's essential to remember the following rules:
1. Deliver them in SVG format.
2. All icons must have the same size.
3. Ensure that all icons are included in the style guide to avoid duplicates.
A common issue is mixing several icon libraries in one project. The priority is to adhere to the "single source of truth" (SSOT) principle. This means that when choosing a library or using custom icons created by the design team, we avoid combining them with other icon sets or libraries.
If you (as in the design team) decide to deliver custom icons it's essential to remember the following rules:
1. Deliver them in SVG format.
2. All icons must have the same size.
3. Ensure that all icons are included in the style guide to avoid duplicates.
Conclusion
In summary, the process of providing images to developers is crucial for optimizing web performance and user experience. Emphasizing high-quality, appropriately sized formats like WebP, PNG, and SVG ensures efficient loading times and responsive design. Consistency in delivering logos, favicons, and icons in optimal formats further enhances visual coherence and professionalism. By prioritizing collaboration and adherence to best practices, designers and developers can create seamless, user-centric web experiences.
Happy coding/ happy designing!.
Happy coding/ happy designing!.
Test heder judyta
test Judyta
desc.