The default project image (images/puzzle-piece-placeholder.svg), used for projects with no logo, is not optimized. Actually, it's not even a real vector image, it's a PNG image embedded into an SVG. The result is an unnecessarily large 10.7kB file.
The code:
<svg width="81" height="80" viewBox="0 0 51 80" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M0.5 2C0.5 0.895429 1.39543 0 2.5 0H78.5C79.6046 0 80.5 0.895431 80.5 2V80H0.5V2Z" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1502_4331" transform="scale(0.00462963)"/>
</pattern>
<image id="image0_1502_4331" width="216" height="216" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSU...
^^^^^^^^^^^^^^^
Open images/puzzle-piece-placeholder.svg in a text editor and you'll see the code above.
I'm attaching a new SVG file (1.1kB) made by me, containing a vector version of the existing image.
I'm also attaching another version, with a solid gray-bluish background, which, IMO, looks better than the white background version. Here's a screenshot of how it would look like:
| Comment | File | Size | Author |
|---|---|---|---|
| #25 | puzzle_piece_gradiant_dark_mode.png | 281.27 KB | lostcarpark |
| #25 | puzzle_piece_gradiant_preview.png | 321.26 KB | lostcarpark |
| #23 | puzzle_piece_mockup_darker.png | 274.9 KB | lostcarpark |
| #20 | puzzle_piece_contrast_test.png | 12.34 KB | lostcarpark |
| #15 | puzzle-piece-placeholder-MR376.png | 1.84 KB | lostcarpark |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #5
chrisfromredfinCreated two branches to reflect the two options. One just the smaller SVG, one the alternate SVG.
Smaller SVG (first) vs. Alternate (second):
Thoughts from folks?
Comment #6
chrisfromredfinComment #7
lostcarpark commentedI definitely favor a proper SVG image for the "puzzle piece" image. The image above looks good. I do rather like the version with the colored background. I wonder how it would look with the color inside the puzzle piece only?
Comment #8
lostcarpark commentedI've had a look at the alternative image, I notice it has rounded corners. I think it should have square corners like the project logos. Here's the current image:
The other version has a transparent background, so no corner issues.
I did a mockup based on Chris's images with a version of the logo with a filled in puzzle piece, but with no background around the puzzle piece.
Comment #9
bsnodgrass commentedI like how it looks in the mockup in https://www.drupal.org/project/project_browser/issues/3330235#comment-15...
Comment #11
lostcarpark commented@ravi kant, I see you've created MR !376, but haven't added any commits yet. Happy to add my SVG from #8 if it's useful. It's modified from your original vector image.
Comment #12
ravi kant commentedAccording to me, Logo with background color and round corner is looking good.
Comment #13
lostcarpark commented@ravi kant, I agree the logo looks good.
However, please see the Project Browser documentation on logos at: https://www.drupal.org/docs/contributed-modules/project-browser/module-m...
Specifically, the guideline says: (Please note: you should not round the corners in the PNG itself, unless there is some compelling branding reason. We will round corners when displaying in the Project Browser.)
Although that's referring to project logos, I think the part about rounded corners applies to the placeholder image too. The rounded corners should be added by CSS rather than part of the image. When it renders in the browser, it will have rounded corners.
Hope that clarifies.
Comment #14
lostcarpark commentedI've added my version of the puzzle piece to MR !376.
This is a screenshot showing it in a development environment.
Comment #15
lostcarpark commentedSo to summarise, we currently have three options:
My concern with this one is may lack sufficient contrast on some backgrounds.
I would be happy with this one if the rounded corners are corrected, as the rounding should be applied by CSS.
I have offered this as an alternative option.
Comment #16
rkoller356 -might have a potential color contrast issue. the puzzle piece in white (#ffffff) on the background (#bbcddd) has a color contrast of 1.6:1 and SC1.4.11 (ui components and graphical objects) has a minimum requirement of of 3:1. (and i notice 357 has the similar problem grey on white has probably also only 1.6:1. aside the color contrast issue i would also rather tend to either 356 or 376. 357 perishes (hope that is the correct term) in contrast to projects that have colorful project icons.
Comment #17
lostcarpark commentedGood points, @rkoller. Note that !357 is not a white background, but a transparent background, so it will show on the background of the theme. This will be white in Claro, but won't always in other themes. For example, Gin offers a dark mode. My worry is that if an admin theme with a grey background becomes popular, the icon could disappear completely.
Comment #18
volkswagenchickI do like having the alternative image for color contrast for dark mode or inverted color schemes.
Comment #19
rkolleryes my comment was totally claro centric. but i was aware that 357 is transparent. and yes on a dark theme in gin (and claro in the future) 357 would be close to invisible. therefore +1 for the suggestion @volkswagenchick brought up, having an alternative image if a darkmode is in place. that way things would be future proof. and i wonder if it would make sense to add something like PB inside the puzzle piece. at the moment it isn't necessarily clear that the icon is the default no project icon available icon or the actual icon of a project. by adding something like the project browser initials it might help to signify that?
Comment #20
lostcarpark commentedI've put together a contrast test image showing the three versions on a white, mid-grey, and black background:
Comment #21
chrisfromredfinI like option 2 the best because I like that it takes up the "full size" of the icon space, which I like to happen by default. But that's my only issue and I'm happy to be outvoted if we can get a consensus around one of them. :)
Comment #22
rkolleri've quickly checked all the nine variants with color contrast analyzer and listed the resulting color contrasts:
357:
icon to background 1.6:1. 2.5:1 13.1:1
356:
icon to background. 1.6:1. 2.4:1. 13:1
puzzle to icon 1.6:1
376:
outline to background. 5:1 1.3:1 4.2:1
outline to inside puzzel. 3.1:1
I agree with #21 having an icon taking up the full size is nice. but going with a single icon instead of light and dark mode variants, the blueish background needs some adjustment to improve the contrast against white and grey background as well as the currently white puzzle outline inside needs some update. each don't meet the 3:1.
and comparing 357 and 376 the latter is the more robust. a single grey outline for each background doesnt work except against the black background. the only slight problem the darker blue outline is close to invisible against a grey background and even though it has a high enough color contrast against the black the dark blue outline nearly vanishes vanishes visually.
Comment #23
lostcarpark commentedI have made a change to the version in MR !356 (white puzzle piece on blue background).
I changed the box to square, and darkened the background to increase contrast.
I discovered that the image size was only 80x80 pixels, when the preview logos are 100x100, so it wasn't hitting the edges and the CSS rounding wasn't affecting it. To resolve this, I resized the placeholder image to a default of 512x512 to match the logo images. The logos on cards will shrink but not enlarge, and it now displays the same size as other logos and has rounded corners applied.
Here is a preview:
I haven't added to a MR yet, as I thought I should get feedback first.
I have also rebased all three MR branches as they were quite a few commits behind.
Comment #25
lostcarpark commentedI have tried adding a slight gradient to the background, which I think gives it a more dynamic look, and also should look at least somewhat distinct from almost any background color. The contrast between the image background and the puzzle piece should be strong enough that it should stand out regardless.
I've attached screenshots showing it in light and dark mode on the Gin theme:
There are some issues with how Project Browser displays in Gin, but the main point is that it looks clear in both.
I have opened MR !378 with this image.
(Also accidentally pushed this to MR !376, but have reverted).
Comment #30
chrisfromredfinLove this; contrast is great.