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
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 websitehttps://pacific-data.sprep.org/storieshttps://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 sitehttps://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 layouthttps://hp-base-theme.gbif-staging.org/layout/video. And an example showing image usehttps://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@lists.gbif.org on behalf of Wayne Asera waynea@sprep.org Sent: Wednesday, February 3, 2021 8:07 PM To: hosted-portals@lists.gbif.org hosted-portals@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
Hi Morten,
Thank you very much for getting back. I appreciate the detailed information provided. We will send the necessary details to our graphic designers.
Again thanks.
Regards,
Wayne. Asera
From: Hosted-Portals hosted-portals-bounces@lists.gbif.org On Behalf Of Morten Høfft Sent: Friday, 5 February 2021 10:04 am To: hosted-portals@lists.gbif.org Subject: Re: [Hosted-Portals] Main background image Specifications
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 websitehttps://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 sitehttps://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 layouthttps://hp-base-theme.gbif-staging.org/layout/video. And an example showing image usehttps://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@lists.gbif.orgmailto:hosted-portals-bounces@lists.gbif.org> on behalf of Wayne Asera <waynea@sprep.orgmailto:waynea@sprep.org> Sent: Wednesday, February 3, 2021 8:07 PM To: hosted-portals@lists.gbif.orgmailto:hosted-portals@lists.gbif.org <hosted-portals@lists.gbif.orgmailto:hosted-portals@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
participants (2)
-
Morten Høfft -
Wayne Asera