<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">
<style type="text/css" style="display:none;"> P {margin-top:0;margin-bottom:0;} </style>
</head>
<body dir="ltr">
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<div style="margin:0px;font-size:12pt">
<p class="p1" style="margin:0px;font:12px Helvetica"><span style="margin:0px;font-weight:normal;font-size:12px;font-family:Helvetica">Hi Wayne</span><br>
</p>
<p class="p2" style="margin:0px;font:12px Helvetica;min-height:14px"><br>
</p>
<p class="p1" style="margin:0px;font:12px Helvetica"><b>Short version</b></p>
<p class="p1" style="margin:0px;font:12px Helvetica">A good starting point would be 1600w x 1000h in JPG. And choose a motive that looks nice when cropped.<span class="Apple-converted-space" style="margin:0px"> If smaller it will look grained on large devices.
And if larger it will be too slow for some connections.</span></p>
<p class="p2" style="margin:0px;font:12px Helvetica;min-height:14px"><br>
</p>
<p class="p1" style="margin:0px;font:12px Helvetica"><b>Long version</b></p>
<p class="p1" style="margin:0px;font:12px Helvetica">It depends on the layout, device and bandwidth.</p>
<p class="p2" style="margin:0px;font:12px Helvetica;min-height:14px"><br>
</p>
<p class="p1" style="margin:0px;font:12px Helvetica"><i>Image ratios and cropping</i></p>
<p class="p1" style="margin:0px;font:12px Helvetica">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<span> </span><a href="https://pacific-data.sprep.org/stories" title="https://pacific-data.sprep.org/stories" style="margin:0px">SPREP
website</a><a href="https://pacific-data.sprep.org/stories" style="margin:0px"></a> when you resize your browser window.</p>
<p class="p2" style="margin:0px;font:12px Helvetica;min-height:14px"><span style="margin:0px;font-weight:normal;font-size:12px;font-family:Helvetica">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.</span><br>
</p>
<p class="p2" style="margin:0px;font:12px Helvetica;min-height:14px"><br>
</p>
<p class="p1" style="margin:0px;font:12px Helvetica"><i>Format</i></p>
<p class="p1" style="margin:0px;font:12px Helvetica">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.</p>
<p class="p2" style="margin:0px;font:12px Helvetica;min-height:14px"><br>
</p>
<p class="p1" style="margin:0px;font:12px Helvetica"><i>Resolution</i></p>
<p class="p1" style="margin:0px;font:12px Helvetica">Currently we serve one size for all devices. So, resolution is a compromise between download speed and crispness. <span style="margin:0px;font-weight:normal;font-size:12px;font-family:Helvetica">Using an<span> </span></span><a href="https://pacific-data.sprep.org/sites/all/themes/custom/inform_regional/assets/images/hero-image.jpg" title="https://pacific-data.sprep.org/sites/all/themes/custom/inform_regional/assets/images/hero-image.jpg" style="margin:0px;font-weight:normal;font-size:12px;font-family:Helvetica">image
from the SPREP site</a><span style="margin:0px;font-weight:normal;font-size:12px;font-family:Helvetica"><span> </span>as an example, we see it </span><span style="margin:0px;font-weight:normal;font-size:12px;font-family:Helvetica">is 1920x1500 pixels and 372kb. </span><span style="margin:0px;font-weight:normal;font-size:12px;font-family:Helvetica">That
would be perfectly suitable for a header image on this site as well</span></p>
<p class="p2" style="margin:0px;font:12px Helvetica;min-height:14px"><br>
</p>
<p class="p1" style="margin:0px;font:12px Helvetica"><i>Coming changes</i></p>
<p class="p1" style="margin:0px;font:12px Helvetica">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.</p>
<p class="p2" style="margin:0px;font:12px Helvetica;min-height:14px"><b></b></p>
<p class="p1" style="margin:0px;font-size:12px;font-family:Helvetica"><i>We can add more layout options</i></p>
<p class="p1" style="margin:0px;font:12px Helvetica">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. </p>
<p class="p2" style="margin:0px;font:12px Helvetica;min-height:14px"><br>
</p>
<p class="p1" style="margin:0px;font-size:12px;font-family:Helvetica"><i>References</i></p>
<div class="p1" style="margin:0px;font-size:12px;font-family:Helvetica">
<p class="p1" style="margin:0px">The base theme that all these sites inherit from has some examples that you might find informative.</p>
<div class="p1" style="margin:0px">There are layout examples in the menu. E.g. a<span> </span><a href="https://hp-base-theme.gbif-staging.org/layout/video" title="https://hp-base-theme.gbif-staging.org/layout/video" style="margin:0px">video layout</a>.</div>
<div class="p1" style="margin:0px">And an example showing<span> </span><a href="https://hp-base-theme.gbif-staging.org/examples/images" title="https://hp-base-theme.gbif-staging.org/examples/images" style="margin:0px">image use</a>.</div>
</div>
<br>
<span style="margin:0px;font-size:12px;font-family:Helvetica;background-color:rgb(255, 255, 255);display:inline !important">I hope that helped</span><br>
</div>
<div style="margin:0px;font-size:12pt"><span style="margin:0px;font-size:12px;font-family:Helvetica;background-color:rgb(255, 255, 255);display:inline !important"><br>
</span></div>
<div style="margin:0px;font-size:12pt"><span style="margin:0px;font-size:12px;font-family:Helvetica;background-color:rgb(255, 255, 255);display:inline !important">Best</span></div>
<div style="margin:0px;font-size:12pt"><span style="margin:0px;font-size:12px;font-family:Helvetica;background-color:rgb(255, 255, 255);display:inline !important">Morten Høfft</span></div>
<span style="margin:0px;font-size:12pt"><span style="margin:0px;font-size:12px;font-family:Helvetica;background-color:rgb(255, 255, 255);display:inline !important">Web developer at GBIF.org</span></span><br>
</div>
<div id="appendonsend"></div>
<div style="font-family:Calibri,Arial,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)">
<br>
</div>
<hr tabindex="-1" style="display:inline-block; width:98%">
<div id="divRplyFwdMsg" dir="ltr"><font face="Calibri, sans-serif" color="#000000" style="font-size:11pt"><b>From:</b> Hosted-Portals <hosted-portals-bounces@lists.gbif.org> on behalf of Wayne Asera <waynea@sprep.org><br>
<b>Sent:</b> Wednesday, February 3, 2021 8:07 PM<br>
<b>To:</b> hosted-portals@lists.gbif.org <hosted-portals@lists.gbif.org><br>
<b>Subject:</b> [Hosted-Portals] Main background image Specifications</font>
<div> </div>
</div>
<div lang="EN-AU">
<div class="x_WordSection1">
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ">Hi everyone,</span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ"> </span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ">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.</span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ"> </span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ">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.</span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ">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?</span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ">Specifications that would help provide a better quality and resolution once it is uploaded so that, our graphic designers team can start.</span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ"> </span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ">Looking forward to hear from everyone.</span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ"> </span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ"> </span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ">regards,</span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ"> </span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ">Wayne. Asera</span></p>
<p class="x_MsoNormal" style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif;">
<span lang="EN-NZ"> </span></p>
</div>
</div>
</body>
</html>