How to choose the pictures of your site Webfow ? And how do you manage them? 😅 If you feel helpless in the face of this challenge, I have good news! By reading this article (until the end, we don't cheat 😉) you will have all the cards in hand to make the best choices and display magnificent visuals on your website!
A colorful item 🎨
You have already seen an infinite quantity without even noticing it ✌🏼
In fact, a raster is a digital image composed of a set of pixels arranged in a regular grid. Each pixel assigned a color value is stored in computer memory as a numerical code.
These raster images are obtained using a digital camera, scanner, or image processing software. They are commonly used to store photographs and images that have subtle color gradations and smooth tonal transitions.
One photography is therefore a raster image 🤓
Why is it interesting? Because matrix images have particular characteristics that it is important to take into account if you want to use them on your site.
Let's see their limits 👇
The quality of a raster image depends on several factors such as resolution, The image size, the number of colors And the compression. Higher resolution images (more pixels per inch) have better image quality, but also require more space storing and may take longer to charge ⏳
Raster images also have limitations in terms of resizing, because if they are zoomed in, the pixels become visible and the image may become blurry or pixelated. So it's not a good idea to make them bigger for your website... On the other hand, they can be cropped without losing too much quality, as only pixels outside the cropped area will be removed 😊
One vector image is a digital image that is created using geometric shapes, lines, lines, curves, circles, and polygons, not pixels as is the case with photos.
These images are generally created using vector graphics software such as Adobe Illustrator. Unlike raster images, they can be resized infinitely without losing quality, because they are based on mathematical formulas 🤓
On a site, they are widely used, especially for logos, the Icons And the illustrations ✌🏼 The major advantage of vector images is that they can be enlarged or reduced without losing sharpness or quality 🤩
As you can see, vector images are not photos, but rather illustrations.
Their limitation is that they cannot reproduce the details and nuances of images as complex as a photograph.
Now that you know the subtleties of images, it's time to move on to something more concrete. I named the choice of visuals for your site 👇
LThe visual identity of a brand is the set of graphic elements that make it possible to identify it visually. It's a bit like a business ID card.
.gif)
It includes things like the logo, the colours, the Typography, the shapes ... and the pictures ! 😎
All of this is combined in a Graphic charter, which establishes the rules for using these graphic elements so that the brand is coherent and recognizable.
Visual identity is a key element of Branding, which consists of all the actions and strategies put in place to develop the image of the brand in the minds of consumers. The visual identity must therefore be consistent with the brand strategy to be effective ✌🏼
A good visual identity should allow the brand to differentiate itself from its competitors, to transmit its values and personality, and to attract the attention of consumers. It must also be adaptable to different communication media, whether it is a website, packaging, advertising, or even a brand.
Pssst, to learn more about visual identity, click on this guide to create a successful graphic charter and logo 😇 https://www.elias.studio/blog/le-guide-pour-reussir-votre-charte-graphique-et-votre-logo
Thanks to this reminder of thevisual identity, you understand why you can't choose the visuals on your site at random. In fact, you need to ensure that all of your brand content is consistent and respects your brand identity 🤞
In this sense, the choice of your visuals will be linked to your Graphic charter. What does it contain? At the time of its creation, you had to think about these elements...
.gif)
Depending on the visual identity specific to your brand, you could choose to post photos, illustrations, or a mix of both on your site!
If you have made the choice to add illustrations to your website this may be of interest to you 🤓
A bad choice of illustrations can kill your artistic direction! 😵
If you are not sure about the illustrations on your site, maybe they are dated illustrations... So what better way to find inspiration than soaking up this year's trends? 😇
In 2023, we are creating an immersive universe full of simplicity, a touch of humor and a touch of nostalgia!
If you choose to shoot photos in order to put them on your website, you are making an interesting choice ✌🏼 Personalized photos (provided they are successful, that goes without saying 😅) represent an important element of reassurance and are very valuable for your brand image.
In 2023, corporate photos are riding on fundamental trends. We are looking for authenticity, simplicity and well-being 🌿
In concrete terms, this means:
It's your lucky day! 😎
Here are 50 tools to find the visuals for your website on a zero budget (+ 1 bonus tool):
To find illustrations and/or personalize them:
💎 Stubborn: https://stubborn.fun/
✌🏼 Undraw: https://undraw.co/illustrations
🔥 Humans: https://www.humaaans.com/
👾 Icons8: https://icons8.com/
👑 Absurd design: https://absurd.design/
🎯 Pimp my Drawing: https://pimpmydrawing.com/
🤓 Lukas Zadam: https://lukaszadam.com/illustrations
✅ Vectors: https://fr.vecteezy.com/
🥇 Open Doodles: https://www.opendoodles.com/
⭐️ Illustrations: https://illlustrations.co/
😎 Vector Portal: https://vectorportal.com/
💎 DrawKit: https://www.drawkit.com/
✌🏼 Fresh Folk: https://fresh-folk.com/
🔥 Mixkit: https://mixkit.co/free-stock-art/
👾 Open Peeps: https://www.openpeeps.com/
👑 Blush: https://blush.design/fr
🎯 Skribbl: https://weareskribbl.com/
🤓 Nice illustrations: https://niceillustrations.com/
✅ Storyset: https://storyset.com/
⚒ Highlights: https://www.highlights.design/
🔥 Coco Material: https://cocomaterial.com/
💁 ♂️ People: https://personas.draftbit.com/
Bonus: Olio Constructor https://olio.work/
To find icons and/or customize them:
🔥 Isometric Love: https://www.isometriclove.com/
👾 Dreamstime: https://fr.dreamstime.com/vectors
👑 Flaticon: https://www.flaticon.com/
🔥 Freepik: https://www.freepik.com/
✅ Animations: https://animaticons.co/
☀️ Icomoon: https://icomoon.io/
🧤 Medialoot: https://medialoot.com/icons/
⚒ The Noun Project: https://thenounproject.com/
🥇 Heroicons: https://heroicons.com/
⭐️ Line: https://linea.io/
🐵 Icon: https://icones.js.org/
💎 Emoji Cloud: https://alohe.github.io/emojicloud/
🍇 Shape: https://shape.so/
✌🏼 Iconhub: https://iconhub.io/
To find free royalty-free visuals:
🎯 Unsplash: https://unsplash.com/fr
🤓 Gratisopgraphy: https://gratisography.com/
🕶 Piqsels: https://www.piqsels.com/fr
⚒ Visual Hunt: https://visualhunt.com/
🥇 Pixabay: https://pixabay.com/fr/
⭐️ Free photos: https://freephotos.cc/fr
💎 Pexels: https://www.pexels.com/fr-fr/
✌🏼 Magdalene: https://magdeleine.co/
🚴🏻 ♂️ StockSnap: https://stocksnap.io/
👾 Burst: https://burst.shopify.com/
To crop your photos in two clicks:
💡 Remove by: https://www.remove.bg/fr
👑 Sticker mule: https://www.stickermule.com/trace
🎯 Picsart: https://picsart.com/background-remover
🤓 BG Eraser: https://bgeraser.com/
✅ Pixlr: https://pixlr.com/fr/remove-background/
In a very classic way, you can on Webflow, add your images, the edit, the supersede (still happy 😆) but also the stylize and add a Alt-text.
To add an image to your site from the Webflow editor, there are several ways to do it. You can add it from the Add panel, the Assets panel, the quick search or directly from your computer via drag & drop.
I'll let you consult Webflow lessons to read more explanations 📚!
However, note that the maximum size of your photo file is 4MB! 😇
Of course, the image sizes for a site may vary depending on several factors such as resolution, screen size, and desired image quality. That being the case, we can note these few recommendations to optimize your images on your website 👇
Here are some commonly used image sizes:
.gif)
La image size should not be confused with file size !
As mentioned above, the maximum size allowed for a photo file on Webflow is 4 MB. If your file exceeds this weight, don't worry! 💡
By using compression you will not only be able to add your visuals but the loading time of your site will be reduced 😊 We'll talk about it just after!
On Webflow, you can add images in GIF, PNG, PNG, JPEG, SVG, and WebP format to your website. Each format has its own specificities:
If you want to go deeper into these topics, See you here!
By cropping your visuals, you can improve the aesthetics of your visuals, and therefore of your website 😊 Unwanted elements will be removed, giving a sharper and professional appearance.
Additionally, by removing unnecessary parts of the image, such as the background, its weight can be reduced, which will improve page loading speed. And that's great for improving the user experience and natural referencing 🤩
Finally, cropped images can be used on various media without compatibility problems.
As you can imagine, the compression is a process that makes it possible to reduce the size of image files without sacrificing visual quality. This is a very interesting option (which should no longer be one 🤪) for websites because visuals often take up a large part of the bandwidth and can slow down the loading time of the page.
To do this, I recommend using a online compression tool. There are several that can reduce file size while maintaining visual quality. A safe bet: ILOVEIMG.
Also, animating your visuals can make a difference, especially if you are looking to explain your products or services. Again, I am giving you a tool that will allow you to do this easily and for free! Jitter 😎
Have fun, the tool is very intuitive!
Do you know the visuals Favicon, Webclip and OpenGraph ? 🤔
However, they are important visuals for a website. Here is a brief explanation of each:
A favicon is a small icon Who appears in thebrowser tab next to the name of the website. It is also used as an icon for bookmarks and shortcuts on mobile devices. Favicons are generally small, often 16x16 pixels or 32x32 pixels.
To choose a favicon, it is important to select a simple and easily recognizable visual that represents the visual identity of your website ✨
A webclip is a icon specific to Apple devices, which appears on the home screen when a user adds your website to their shortcuts. The recommended dimensions for a webclip are 180x180 pixels for iOS devices and 192x192 pixels for Android devices.
🧐 The visuals used for webclips should be clear and easily recognizable for users.
OpenGraph is a metadata protocol that allows websites to provide additional information to social networks and search engines when they share links to your website. OpenGraph images are generally large, often 1200x630 pixels or 800x800 pixels, and should be of high quality to ensure the visual is sharp and engaging on social media.
OpenGraph images should also be relevant to the page or article they represent 💡
In the end, as usual, it is important to choose appropriate visuals and to ensure that they are optimized for their specific use. The visuals Favicon and Webclip are important to improve the user experience and facilitate access to the website, while images OpenGraph are important for improving sharing on social networks and search engines! 💯
By carefully choosing the visuals for each type, you can improve the appearance and functionality of your website and increase the visibility of your website on social networks!
We move on to the next concept, the SEO !
.gif)
Webflow fans, I'm waiting for you there 🚀
