Improve Forum title image

Site Feedback
1

Here is current title image from dark theme:
https://support.delta.chat/uploads/default/original/2X/8/85189919ac10b74ff3c1b361c9cffb3318d4defc.jpeg
JPEG, background is #111111 (which not corresponds to dark theme background #1a1a1a; and inside ‘D’ and ‘a’ letters it’s #000000.
Dimensions 1700x300 pixels, file size 103602 bytes.

Title image for light theme has same dimensions.

On page render these images scaled down to size described in header.scss by lines

.d-header #site-logo {
   height: var(--d-logo-height);
}
...
title {
    --d-logo-height: 2.4em;
}
...
@include viewport.from(sm) {
      --d-logo-height: 2.667em;
}

In my browser I currently see it scaled down to 241x42 pixels.
Here is a sample PNG version scaled down to that size, with #1a1a1a background, 1468 bytes.
DC_site_title_white_text_1a1a1a_bg_238x42_16c

1 Like
2

Saving traffic is a great idea.
The image you posted looks blurry on my 4K screen, maybe double that resolution would be good.

Also I wonder if an svg would also work there meanwhile…

3

Can you open dev tools in your browser, and tell the dimensions of that image’s box?

I have DC icon in SVG. What font should be used for the title?

4

image
image1488×1111 135 KB

discourse recommends 600 x 80 px.

you can make a pr to GitHub - deltachat/interface: General and shared components and discussions relating to deltachat user interface to upload your file so that we can find it in the future, unfortunately we did not already do that for the current banner logo.

As far as I remember the font is Tahoma, it is also used on https://delta.chat

Thanks for helping.

6

Can you get the dimentions in pixels of the scaled image on 4k display in full screen mode?
Right-click the image, select ‘Inspect’, devtools window will open, there will be colored boxes with dimensions.
(Article describes how to do it in Chrome The Box Model in DevTools | Codecademy , almost the same for Firefox).

7

That info is useless in this case:

image
image561×194 24.7 KB

this is the same as what you wrote in the OP, it seems to be more like logical pixels as a unit and not actual pixels.
I think we should just follow discourse’s recommendation of 600 x 80 px.