Working with images in Webflow
Design
What frames should I use in Figma?
This is a common question from Designers coming into Webflow.
As technology advances and devices have better resolutions, these are changing values.
Most common user resolutions are now (June 2023):
- Full HD 1920px
- Desktop 1440px
- Tablet
- Mobile 375px
My recommendation for Figma is:
- Desktop 1440px
- Tablet 880px
- Mobile 375px
Tablet is not done many times so, as Webflow Developer I find mainly Desktop and Mobile.
Important: You should not design at 1920px because when a viewport is smaller, there will be lost of issues. It is better to design at 1440px which is the most common issue. You could find issues for low desktop resolutions (1280px ie.) but this is better than designing at 1920px.
Also, if you are going to use "Figma to Webflow" Plugin just need to design for Desktop (1440px) with Autolayout. I would recommend to do also Mobile (375px) to have a reference.
When you move your design to Webflow you should take into account Webflow Breakpoints.
Webflow has 4 preset breakpoints:
- Desktop (>992px)
- Tablet (768px - 991px)
- Mobile Landscape (480px - 767px)
- Mobile Portrait (<480px)
You also have the option to add 3 larger breakpoints (this option I do not recommend it at all).
- 1280px
- 1440px
- 1920px
See a Figma example
Image File Types
What image type should I use?
The question, what to use?
First, if there is animated content, you should decide between:
- Video (.mp4)
- Lottie animation (json)
- Gif
I care a lot about web performance so I like having the three formats of the same animation to test them and decide.For images:
- Everything that can be vectorial I use .svg unless it has a lot of weight
- Then I use mainly .png exporting x2 and sometimes even more when the client really cares about image quality
- Sometimes I export the same image as .jpg x2 and .png x2 so I can see later what is the best option
Compression
I do not upload images more than 250Kb, that is too much.I want the sites to load fast
So I transform and compress all the images. For this, there are good third party services such as:
- Tinypng
- IloveIMG
- Compressor
- Vecta.io
So my process is:
- Export from figma for both .png and .jpg x2
- Compress images with third party sites or transform to webp inside Webflow
Image Element
How to add images?
Adding images
You can add images in four different ways:
- Using an image element
- Image as Background image
- Adding an image for CMS directly from Webflow Editor (note that you can't compress it by now at Webflow, CMS images should be optimized before being uploaded)
- You could use more advanced techniques with Javascript or CSS
See official documentation for image and image resolution
Make sure to enable/disable responsive images, see tutorial here.
Background Images
Working with Background images
See official documentation when adding background images.
Images Aspect ratio
This is a Utility to use different aspect ratios for images. I use it a lot for grids, specially when working with CMS.
It is a mix from Pablo Stanley aspect-ratio-boxes Cloneable and Edgar Allan Knockout Cloneable.
Feel free to use the classes applied here to your project
Aspect ratio 1:1
Aspect ratio 4:3
Aspect ratio 3:2
Aspect ratio 8:5
Aspect ratio 16:9
Aspect ratio 21:9
Aspect ratio images
Aspect ratio 1:1
Aspect ratio 4:3
Aspect ratio 3:2
Aspect ratio 8:5
Aspect ratio 16:9
Aspect ratio 21:9
SEO
Good practices of Search Optimization of images
These are Good practices of Search Engine Optimization of Images.
When to use the image element <img />?
- When Your Image need to be indexed by search engine
- If it has relation to content, including cards (click areas), but not related to design. Design is probably the most difficult thing to parse here because so it's all design right. I would say perhaps functional design (Cards, thumbnails, profile images, things you can click) vs Aesthetic design which is mostly used for sites appeal.
- List item
- If your image is not too small ( not iconic images ).
- Images where you can add alt and title attribute.
- Images from a webpage which you want to print using print media css
When to use CSS background-image?
- Images Purely Used to Design.
- No Relation With Content.
- Small Images which we can play with CSS3.
- Repeating Images ( In blog author icon , date icon will be repeated for each article etc.,).
All images at Webflow should have alt text (unless they are decorative). This is crucial for SEO
See official documentation for Alt Text images