Here at Yapla, we like to help associations to have an effective and impactful communication. With the democratization of digital tools, proposing a convincing website for your organization has become essential.
Find beautiful images for your association
The images on a website are not to be neglected. They allow visitors to discover the spirit of your association and can spark the desire to join your organization. Don't worry because we have good news for you! There are free online image banks to meet this need. Here is our selection:
Unsplash
With more than a million free high definition images offered by a community of photographers from around the world, Unsplash has quickly become a reference. If you feel like it, remember to credit the author of the uploaded photograph. Advice: use English terms to find what you are looking for.
Pexels
This image bank offers a complete choice of photos and videos. Pexels gathers pictures from different image banks. The icing on the cake, or the sundae, you can search in French.
FlatIcon
FlatIcon offers a very large library of icons, most of which are available for free. The site offers thematic packs to quickly obtain a coherent set. An attribution to the author is required with a free account.
Choose the right format
It is important to know the most suitable format when choosing your images and their integration on your website. To make it as simple as possible, we will see the two most common formats:
JPG
It is the most used format on the web since many years. This format is best for images with a background and many colors.
PNG
You should use the PNG format if your image has a transparency/opacity area. Also, keep in mind that the PNG format is often chosen to integrate logos or graphics with lines and text because it allows for a cleaner and less smudgy image than the previous format.
Optimize your images for your website
Optimizing your images is an important and often neglected step. It allows you to have a faster and better referenced website. Here are our 3 recommendations:
Resize your images
To avoid display and speed problems, remember to resize your images before integrating them on your website.
Compress your images
Keep in mind that the majority of your visits will be on mobile devices. Therefore, it is important that the page is as light as possible. Compressing images is a very effective way to reduce the size of a web page and its download time.
You can use an online tool like Compressor or TinyPNG to reduce the weight of your image to improve the loading of your website.
Rename your images
Before importing your visuals on your website, it is important to take the time to rename all your images:
- You will find them easier to find when the time comes;
- Renamed images will allow a better referencing;
- You will contribute to making the Internet more accessible for people with visual impairments or others
Optimize my images according to its use in your website
Depending on the use of the image, the best practices may vary. If you need more information on Yapla's modules, read this article: List of modules for the website functionality.
In any case, if you want to maximize the resolution of your image, you can import an image twice as big as the desired size (3840px for a banner for example) and of course compress it with the tools mentioned above.
Image area
The image area is perfect for displaying and resizing any image size as these options are in the module. If the size is not defined in the module, it will take 100% of its container. However, if the image is in a 50% area in your page it will take 50% of the page width.
Images of multiple or featured articles
The key word when you have images in list view is consistency. If each of your article images are the same size, the display in list view will be much more uniform.
Banner
Your banner is likely to be the largest image on your website. Keep in mind that the most common computer screen size is 1920x1080. So a banner with a width of 1920px at least is a good practice.
Favicon
The favicon doesn't need to be bigger than 16px by 16px.
Conclusion
We have seen together several good practices and tools to optimize the images on your website. You now have the tools to find beautiful images, choose the right format and optimize them before integrating them on your website. If you still have questions, don't hesitate to book a time slot for a demonstration or technical help here.
Comments
Please sign in to leave a comment.