Optimizing the logo image uploaded by the journalist

UX
1

Hello

I would like to gather some opinions on which method is better for optimizing the logo image uploaded by the journalist, with respect to resizing and cropping. There are 2 possible approaches-

  1. Resize the image to a fixed maximum height/width while preserving the aspect ratio. Results in- Reduced size, same aspect ratio, whole image

  2. Crop the image to a square (from center), before resizing to a fixed maximum edge length. Results in- Reduced size, square logo, parts of image lost which user cannot control if he/she uploads a non-square image

Which method looks more suitable? Any new suggestions are also welcome.

2

Hi aywdi, a few questions:

Is there a specific logo aspect ratio that’s supported on SecureDrop?

Is it visible to the user anywhere? (So they can make sure the logo they upload fits the aspect ratio)

3

When a journalist uploads a logo, it is saved as it is, in its original size and aspect ratio. Ideally, a square image will work best.

SecureDrop does not specify any aspect ratio to the user.

4

I think a maximum width with maintained aspect ratio would be best here rather than cropping the image to prevent any kind of loss of image parts unpredictably. Also I agree with @ei8fdb that there should be some kind of information shown somewhere about the maximum and minimum width of a logo so the journalist can pick images on that basis.

1 Like
5

FYI in the source and journalist templates the logo width is forced at 250px. On the source home page there is no constraint on the width or height, reason why the documentation suggests a size of 500px x 450px.

There definitely is room for improvement :wink:

6

Any particular reason the suggested size is not a square image?

7

Not that I know. I think it just happens to be this way :wink:

8

Looks like it is because of the size of the default image: https://github.com/freedomofpress/securedrop/blob/develop/securedrop/static/i/logo.png

9

Screenshot from 2018-02-21 19-19-29
Screenshot from 2018-02-21 19-19-29.png786×400 18.5 KB

@saptaks @dachary How does this look?

1 Like
10

Sorry for the potentially silly question - but why is the logo width forced to a particular value? Just to understand what the ultimate need for a particular width is.

11

I think this is a good beginning because the SecureDrop is telling the user the dimensions of the logo needed, allowing them to make prepare the correctly sized image.

The image upload could be then handled by either:

  • making these dimensions mandatory "sorry the image isn’t the correct dimensions"
    or better would be
  • to provide the user with a way of cropping the image they’ve uploaded to the defined dimensions

Maybe these links are useful.

12

There is a single file with the logo. But it must show in two different sizes. The 250px width constraint reduces the size of the logo and makes it look small. That’s the technical reason why :wink: