[Hosted-Portals] Main background image Specifications

Morten Høfft mhoefft at gbif.org
Thu Feb 4 20:03:56 UTC 2021


Hi Wayne


Short version

A good starting point would be 1600w x 1000h in JPG. And choose a motive that looks nice when cropped. If smaller it will look grained on large devices. And if larger it will be too slow for some connections.


Long version

It depends on the layout, device and bandwidth.


Image ratios and cropping

For most images (except the post layout and images in markdown) the ratio is not fixed, as they adapt to the device/browser size. Just like you know it from the SPREP website<https://pacific-data.sprep.org/stories><https://pacific-data.sprep.org/stories> when you resize your browser window.

We do not have fixed image sizes on GBIF.org either. We manage to find images that work when cropped, but I'm certain that it can be difficult at times.


Format

If it isn’t an image, but graphics, then use SVG (instead of JPG) as that scales nicely and is small in terms of bytes. The image that you currently have (the light green background with an arc) looks like a perfect candidate for an SVG.


Resolution

Currently we serve one size for all devices. So, resolution is a compromise between download speed and crispness. Using an image from the SPREP site<https://pacific-data.sprep.org/sites/all/themes/custom/inform_regional/assets/images/hero-image.jpg> as an example, we see it is 1920x1500 pixels and 372kb. That would be perfectly suitable for a header image on this site as well


Coming changes

I hope to address resolution and formats in the following days or weeks, in such a way that high resolution images are expected to be uploaded, and they will then be scaled to more appropriate sizes and formats.

We can add more layout options

If your designer has a specific layout in mind (e.g. with fixed ratios) and it has general use, then I'm happy to help implement it or discuss it.


References

The base theme that all these sites inherit from has some examples that you might find informative.

There are layout examples in the menu. E.g. a video layout<https://hp-base-theme.gbif-staging.org/layout/video>.
And an example showing image use<https://hp-base-theme.gbif-staging.org/examples/images>.

I hope that helped

Best
Morten Høfft
Web developer at GBIF.org

________________________________
From: Hosted-Portals <hosted-portals-bounces at lists.gbif.org> on behalf of Wayne Asera <waynea at sprep.org>
Sent: Wednesday, February 3, 2021 8:07 PM
To: hosted-portals at lists.gbif.org <hosted-portals at lists.gbif.org>
Subject: [Hosted-Portals] Main background image Specifications


Hi everyone,



My name is Wayne, I am working with Bradley Myer, David Moverly and others who are involved in the hosted portal from Secretariat of the Pacific Regional Environment Programme (SPREP) for Pacific Countries and Territories.



We are in the process of setting up our hosted portal same as everyone. Currently, we are trying to upload a banner or main background image that would represent all the Pacific countries and territories as a theme.

I would like to ask if there is any specific dimension of the banner or main background image that is required to be uploaded on to the portal?

Specifications that would help provide a better quality and resolution once it is uploaded so that, our graphic designers team can start.



Looking forward to hear from everyone.





regards,



Wayne. Asera


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.gbif.org/pipermail/hosted-portals/attachments/20210204/b2b9b12e/attachment.html>


More information about the Hosted-Portals mailing list