Images are an integral component of Social Pinpoint and can significantly enhance the visual appeal and overall user experience of your site. In this article, we'll explore some valuable guidelines and tips so you can always optimize your visuals.
Image Dimension Guide
Tools |
Tool Name |
Aspect Ratio |
Dimensions (px) |
Notes |
|
Content Tools |
Banner |
3:1 |
1920 x 640 |
Full width image banners |
|
Image |
Any |
See ratio examples |
Images can be any ratio required, however, please consider the image quality and size guidelines. |
|
|
Multimedia Tools |
Gallery |
Any |
> 1400 width |
We recommend you size all images in the gallery to the same dimensions for maximum effect. |
|
Slider |
Any |
See ratio examples |
The Image Slider can take a variety of image sizes; however, we find that it looks stunning when the images in the tool are all the same size. |
|
|
Swipe |
Any |
See ratio examples |
Can take a variety of image sizes. It is essential that the two images are exactly the same size for the ‘before and after’ functionality to be effective. |
|
|
Hotspot |
Any |
See examples below |
The Hotspot tool can take a variety of image sizes, and of course the particular image that you are annotating. |
|
|
Feedback Tools |
Call to Action |
3:2 |
900 x 600 |
Sizes for the call-to-action varies on the location of the tool, and the amount of call-to-action text, and will resize image to suit in a responsive manner. |
|
Events |
3:1 |
1920 x 640 |
Full width image banners |
|
|
Faces |
3:2 |
450 x 300 |
Rectangle layout |
|
|
Feature Grid |
16:9 |
800 x 450 |
||
|
Logo Splash |
3:2 |
300 x 200 |
Landscape / horizontal logos: |
|
|
Newsfeed |
1:1 |
200 x 200 |
||
|
Form: Image Option |
4:3 |
200 x 160 |
Small square images similar to logos or landscape images. |
File sizes: Large files can impact the speed in which your web page loads. Ideally, you want image file sizes to be kept within 10 MB - without sacrificing quality.
The above dimensions are a guide - you may use larger image sizes if you want to emphasize certain images but be aware of the file size.
Logos
Your site logo is the primary visual element that enables users to instantly recognize your brand.
Your site logo is best provided as a vector file (.svg, .eps) as this will ensure maximum resolution across screen sizes and devices. Please avoid sending raster images (.png, .jpg) unless a vector file is not available.
Difference between vector and raster images
Raster images are made of pixels and can lose quality when scaled, making them ideal for detailed photos. Vector images use mathematical paths, allowing infinite scalability without loss of quality, which is perfect for logos and illustrations that often require scaling.
|
Raster Images |
Vector Images |
|
| Scalability |
Loses quality when scaled up |
Infinitely scalable without losing quality |
|
File Size |
Usually larger, especially at high resolution |
Typically smaller and more efficient |
|
Best For |
Photographs, detailed artwork |
Logos, icons, illustrations, text graphics |
|
Common Formats |
JPEG, PNG, GIF, BMP |
SVG, AI, EPS (PDFs are usually vector, but may not be, depending on the contents) |
| Editing |
Pixel-based editing (e.g., Photoshop) |
Path-based editing (e.g., Illustrator) |
Favicons
This image is displayed on tabs at the top of a web browser, browser bookmark bars, and more.
Favicons are generally an .ico file, though we are happy for you to provide this square icon to us as a regular .png file.
Image Banners
Social Pinpoint's banners are designed with accessibility in mind. As a result, our image banners are best utilized for lifestyle imagery to accompany the project title and description - images with text are not recommended for accessibility as text may get cut off on different screen sizes.
Ideal dimensions for Image Banners
- Full width – min. 1920 x 640px, 3:1 ratio (JPG or PNG)
- Side panel – min. 1280 x 640px, 2:1 ratio (JPG or PNG)
Choose images that:
- Are decorative – an image that serves only an aesthetic purpose and provides no functional or informational value to the user.
- Don’t display text – images with text are not accessible, and might be cropped at certain screen widths.
- Are landscape/horizontal orientation
- Use RGB color profile
- Aren’t too cropped - if there is a focal point within the image, make sure it is not too close, or it is likely to be cropped further on different screen widths.
Examples of good imagery to use within an image banner:
The platform utilizes an adaptive view-port, which automatically adjusts itself based on the screen size. This ensures a consistent user experience across different devices and because of this adaptability it's important to understand that banner dimensions can vary depending on the screen width. Here are a couple of examples on how the image banner reacts on different screens:
Standard Screen
Wide Screen
For these types of scenarios where parts of the images appear cropped, even if proper dimensions were used, you need to adjust the position of the image in the banner block settings. This function allows you to display the desired position of the image be it top/bottom or left/right, ensuring your visual content looks its best regardless of the screen size.
Thumbnail Editing
Thumbnail editing allows you to customize how thumbnails appear in various sections of the platform, such as Project Cards (used in your project lists), the Gallery, News Feed images, and more!
Let's take a look at a sample project. We've perfectly aligned the image banner. However, when we view its project card (below right) in the project list, we notice that it's not cropped at an ideal location. Here's how to edit it:
To edit a thumbnail:
- Dashboard > Files > Select image > Thumbnail Images
- This will open a window where you can edit the thumbnail images.
- Find 'Project List Card' and select "Edit Thumbnail."
- Reposition the image as you see fit and then save your changes.
💡 User Tip: Due to how web caches work, you might not see the changes take effect immediately when you refresh the page. To test the edited thumbnail, you can use an incognito/private browser window or clear your browser's cache.
Please note that not all blocks use these custom thumbnails. Here's a guide indicating which blocks utilize this feature:
| Content Tool | Thumbnail Image | Aspect Ratios |
| Gallery | Small / Medium / Large | 4:3 / 16:9 |
| Web Map (Image in feature pop-up) | Medium | 16:9 |
| Social Map (Image in feature pop-up) | Medium | 16:9 |
| Policyscape (Image in feature pop-up) | Medium | 16:9 |
| Q&A (Respondent avatar) | File Manager Listing | - |
| Events Feed | Small | 4:3 |
| Feature Grid | Medium / Large | 16:9 |
| News Feed | Small / Medium | 4:3 / 16:9 |
| Project Map | Small | 4:3 |
| Projects List Highlighted Projects List |
Project List Card | 16:9 |
Flow Type Form with image
For flow type forms with images, it's important to note that the Form editor doesn't allow you to adjust the positioning of the image used as a banner. The dimensions of the image are automatically set with the adaptive view the platform has.
There is no built-in feature to change the positioning of the image using the thumbnail editor. If you are looking to adjust the image's position, you will need to manually edit the image itself.
Not all images are well-suited for use as banners in flow type forms. Images that are already heavily cropped may not be the ideal choice. Ideally, you'd want more space to the left and right of faces or important elements to ensure they are always visible. The focal point of the image should ideally be centered to create a balanced and visually appealing banner.
Flow Form with Image:
Alternatively - you can opt to just add an image block 'above' the form tool instead:
For those curious: The height of the image is set at 25% of the viewport height, with a maximum height of 250 pixels. The width of the image dynamically adjusts based on the screen width, with 876 pixels being the maximum rendered width. As you resize your window, the image will proportionally scale down.