7 Best Practices to deliver optimized images to the dev team
Sharing best practices is an excellent way to improve the performance and productivity of our team. It can help us fill knowledge gaps, improve efficiency, encourage leadership, and more.
Benefits of applying best practices
- Improve our workflow as a team.
- Fill information gaps.
- Smooth project handoff from one designer to another and the development team.
- Avoid miscommunication issues with the team and client.
- Reduces meetings’ time.
- Improve efficiency and project understanding.
Best Practices Summary:
- File management
- Name conventions
- Image content structure
- Image Alt Texts
- Image formats
- Image File Size
- Image dimensions & Responsiveness
1. File management
When delivering the images to the development team, it is necessary to create a file where they can find the images easily. The path structure to place it should be hierarchical. Let’s take the following example of a website:
The previous image represents a basic site map of a website, where we can find the main screens:
- Home Page
- About Us
- Departments
- Blog
With this site map, there are two important things to notice:
- The menu and the footer are going to be constant on all pages. Also, some images or icons can be used several times along the website (Global Icons or Images in the site map image), we can create a folder in the main folder with all the global icons or images, including the menu and footer assets.
- The blog can have several articles, every article is one more page on the website, therefore, if the article contains images, you have to create a folder for each article.
Here you can see how the folder could look like with the previous considerations and site map:
Once we have the folder, you can refer to an image with a path, for example, the hero image for article 01 will be:
SiteFolder/04 Blog/02 Blog Grid/Article 01/01 Hero Image
Benefits of doing file management:
- It is an easy and quick way to change or find an image
- The dev team can replicate the same file management.
- Helps to have different cuts (phone, tablet, desktop) without changing the image name.
2. Name conventions
Once you have your design with the final images, the recommendation is to name those images in the design program you are using (for example Figma, Sketch, Adobe XD, etc.) before exporting it.
The name should contemplate the following criteria:
- “Use hyphens to separate words and don’t use special characters.” Image Filename SEO
- Keep the file name between five to six words at maximum.
- Use only lowercase letters.
- The name should briefly describe the image, not the interpretation related to the page context.
- Try to name the image thinking in humans, not only use keywords.
- Usually, on websites, the images have different cuts for phones, tablets, and desktops. Try to keep the same name for those images. In this case, it will be helpful to have a folder for each cut.
Benefits of implementing name conventions:
- This will improve the SEO ranking because the search engine will not visually differentiate the image, it will identify the image by the wording on the name.
- The accessibility experience will increase for those users who use reader tools on their devices.
3. Image content structure
When you are designing a digital product, usually a website, you can get very creative with the images and elements on the pages, it will be always important to keep it simple for development. Be aware of the image content and try to group elements, let’s take a look at the following image:
The first thing we notice is the dog’s photo in the center, a round blue gradient in the right-top corner, and a smaller one in the left bottom corner, the background remains white. There are several ways to develop this exactly on a website:
- Export only the dog’s image in a jpg format and leave the round corners and lights to the development team.
- Group the dog’s photo with the rounded corners and the round gradients, and export it as a png with a transparent background.
- Do the same as bullet 2, but export the image with the gray background in a jpg format.
If you choose option number one, it will take more time to develop exactly how you want it because the developer has to figure out how to make the gradient, where to place the lights, and apply the rounded corners to the image. In the case of number two, you will save all that time and effort by simply grouping the elements and exporting the group, in this case, it adds more weight to the page than the first option. And the third will be the most optimized option because a jpg image will weigh a little bit less than a png image if the background is plain and doesn’t have other elements like forms, patterns, or gradients.
In conclusion, you must evaluate which path works better for your situation, considering options 2 and 3 are going to be the most optimized in a matter of time and effort for the team and will save some lines of code and storage memory.
4. Image Alt Texts
Every image on the website or app should have an alternative text which describes the image composition, for two main reasons:
- Accessibility: it improves the usability for people who use screen readers and gives them richer content, almost in the same way a person with full vision can have.
- SEO (Search Engine Optimization): it helps the search engines on the internet determine what the image content is. This way, it will show your image or website in the search results.
These are some recommendations that you can apply to the alt texts:
- The length of the alt text should be short, 125 characters are the max length for your alt text, but keep it between 12–18 words.
- It should describe only the image content and must not be related to the surrounding content on the website, for that you can use captions.
- Use plain text to write it. No dashes, only spaces.
- Don’t use a list of keywords. The alt text could be read by a person in several situations, for example, when the image doesn’t load on the website, the alt text will be visible. Also, the screen reader reads it to the user.
- If the design has decorative drawings or patterns in the background that do not bring value to the context, it is not necessary to create an alt text, because it can cause noise in the usage of screen readers.
5. Image format
When an app or website is being developed, always keep in mind the optimization of the content, to maintain a low size weight of the product. It is essential to choose the correct image format to avoid large file sizes, we encourage the following validation:
JPEG:
This format is the most optimized for images with a lot of colors, such as photographs when there is no need for transparencies, and goes “through a compression process to significantly reduces the image file size — making them easier to store and load on webpages” while retaining high image quality. So if you don’t need transparency, go for JPEG. If the image has rounded corners, you will think it needs to be a PNG, but it requires lower storage by doing it with code, so in this case, it works using a JPEG.
PNG:
This format normally is used for web graphics, logos, charts, and illustrations, rather than high-quality photographs. Its main characteristic is its transparency, which allows the content behind the shapes to be visible. Take in mind that if the background’s website or app is a plain color, you can use a JPEG instead by putting the same color hexadecimal in the background’s image, otherwise, if the background has patterns, shadows, or color gradients, you should use a PNG.
SVG:
The SVG allows you to scale the vector inside the SVG without any quality loss (lossless) and does not need a specific resolution for this. This format can also handle transparencies, the main difference between a PNG and an SVG is the file size and resolution:
- File size: The SVG has a lighter file size than PNG because compressible to smaller file sizes at no cost to their definition, detail, or quality.
- Resolution: You can make an SVG as big as you want, and it won’t lose its definition. On the other hand, if you want to make a PNG bigger than its origin, it will start losing its definition. Also, the file size will be according to the image resolution, so the bigger, the heavier the file size.
GIF:
“GIF is a lossless, lightweight image file format ideal for small graphics on websites and in emails. It supports transparent elements and animated graphics. If you see a small animated image on the web, you’re probably looking at a GIF. However, GIFs are limited to 256 simultaneous colors, so they can’t achieve photographic quality” (A guide to image file formats and when to use them.)
6. Image File Size — Ensure image quality
The image file size is linked to the image format and resolution as we saw previously, but no matter what the image format is, you have to ensure that the file size is optimized, keeping an average of 100 KB per image, and always under 500 KB. This way your digital product will perform better, and the SEO ranking will improve.
There are different ways to optimize the images, but it depends on the program you are using and the image’s dimensions. In most cases, an image compressor can make a big difference, reducing considerably the file size.
Tinypng.com is an online compression tool that allows you to upload images in the format: WebP, PNG, or JPEG, and compress them. Once you download the compressed images, and it doesn’t have the file size you need, you can upload again the image several times until reaching the desired size, but you have to be careful here, because every time you compress the image, it will lose resolution, so you have to ensure the image quality each time before compressing it again.
Sometimes it is very difficult to compress an image to 100 KB without losing resolution, when you have reached the compression limit and it did not have 100 KB, you can try compressing the other images on the page (if it is possible) to lower file sizes to 30–50 KB, this way you will maintain the 100 KB average on the page. For example, if you have five images on a single page, the average file size should be approximately 100 KB, so the total image’s file size should be somewhere near 500 KB.
7. Image dimensions & Responsiveness
Regarding the image dimensions, it is also important to maintain it optimized and well-planned because it can cause an unnecessary usage of large-size image files (causing performance problems) or it can result in low-quality images for your website or app. To avoid this you can do the following:
Analyzing the most common devices
Analyzing which is the biggest screen size that your website will be displayed on and how much the images are going to grow because of the screen size, will give you an idea about how much should be the image size. For example, if your image’s dimension on the website or app is going to be always 500 x 500 px no matter the screen width, it won’t be necessary to use a bigger image than that dimension, because the difference won’t be noticeable if you use it in a 500 x 500 px frame unless you zoom it, and it will be justified if it is the expected behavior. The difference between image resolution will also depend on the PPI.
Another example is when you have a hero image, and it covers the screen’s width. In this case, if your image has a 2000 px width, it will start to lose resolution on screens that are wider than 2000 px. The highest resolution by now is 7680 x 4320 px (8k), so to be sure to not lose definition, your image should be at least 7680 px in width. But an image of that size will result in a heavy file image size, so you have to analyze the probability and concurrence of your website on those resolutions.
Use a different image for every breakpoint
The three most common devices are Laptops or Desktops, Smartphones, and tablets to access the internet. That’s why it is important to consider those three screen sizes in your design and the optimization for each of them.
When you have an image on your website it fits perfectly for the desktop version, and for example, the image size is 2430 x 1500 px, with a file size of 130 KB. If you use that same image for the mobile version, any smartphone will read it perfectly, but the most common smartphone resolution is 360 x 640 px, so the image is way bigger, and a smaller version of the image will work almost the same way and the file size could be up to 70% less, depending on the image, which can improve the website’s performance on phones if the page uses several images because it will load the image much faster.
The breakpoints also are essential to know when to change the image for a more optimized one to fit the design.
Let’s see the following example:
The dog’s image is the same one for the three devices. The image on the laptop can easily be used on the iPad, but on the phone screen, if we use the same image, the dog looks too small and it does not look good. In this case, it will be better to use another image for the phone version like this example:
In this case, the image on the phone screen is better framed, looks better, and emphasizes what I want to represent. To achieve this, it is necessary to use different cuts on the same image and change them depending on the breakpoint. You have to be sure about how the image looks on each breakpoint and analyze if it is necessary to use another image depending on how it looks and if you can save some space on the image file size by using another small one.
