search

BitcoinDesign / Guide

A free, open-source community resource for designers, developers and others working on non-custodial bitcoin products.
https://bitcoin.design/guide/
Other
457 stars 98 forks source link

Added home page banner theme for HereComesBitcoin #1112

Closed Abhijay007 closed 2 months ago

Abhijay007 commented 3 months ago

Implemented HereComes Bitcoin theme Banner, Here's a link to the issue proposal : https://github.com/BitcoinDesign/Guide/issues/1110

pixelcut-export

netlify[bot] commented 3 months ago

Deploy Preview for bitcoin-design-site ready!

Name Link
Latest commit 3dd72bf53d4d55dc5f23722029b637568f24d1e2
Latest deploy log https://app.netlify.com/sites/bitcoin-design-site/deploys/66d61a67d946f90008876f65
Deploy Preview https://deploy-preview-1112--bitcoin-design-site.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

mouxdesign commented 2 months ago

Tested deploy preview on Mobile and Desktop, LGTM.

Abhijay007 commented 2 months ago

Tested deploy preview on Mobile and Desktop, LGTM.

Thanks for the review, @mouxdesign! I think the images need better compression, as mentioned in the guide. However, when I followed the steps—specifically, running the site locally—the images should have been automatically compressed. I'm not sure why this isn't working. There might be an action/script that performs this task, but it doesn't seem to be triggered in my case, any suggestions on how I could run this manually?

GBKS commented 2 months ago

think the images need better compression, as mentioned in the guide. However, when I followed the steps—specifically, running the site locally—the images should have been automatically compressed. I'm not sure why this isn't working. There might be an action/script that performs this task, but it doesn't seem to be triggered in my case, any suggestions on how I could run this manually?

Good catch. We disabled the auto-compression recently because it caused lots of other issues (we have to update the docs).

You are right, that the images need compression still (I use ImageOptim, which is super fast), they are also way bigger than necessary. Here are sizes I'd recommend:

Otherwise everything looks great.

Abhijay007 commented 2 months ago

think the images need better compression, as mentioned in the guide. However, when I followed the steps—specifically, running the site locally—the images should have been automatically compressed. I'm not sure why this isn't working. There might be an action/script that performs this task, but it doesn't seem to be triggered in my case, any suggestions on how I could run this manually?

Good catch. We disabled the auto-compression recently because it caused lots of other issues (we have to update the docs).

You are right, that the images need compression still (I use ImageOptim, which is super fast), they are also way bigger than necessary. Here are sizes I'd recommend:

Otherwise everything looks great.

Thanks for the feedback @GBKS, but when I update them to these sizes, the images become blurry😅. can you please suggest any tools that can help generate high-quality images at those sizes?

GBKS commented 2 months ago

when I update them to these sizes, the images become blurry

I am not sure how that is possible. Can you share a screenshot maybe?

Abhijay007 commented 2 months ago

when I update them to these sizes, the images become blurry

I am not sure how that is possible. Can you share a screenshot maybe?

as you can see here it's for mobile view 400x400 in PNG format: it get's blurry.

Group 29

it's providing best quality in SVG but we can't use it for header images right ?

GBKS commented 2 months ago

as you can see here it's for mobile view 400x400 in PNG format: it get's blurry.

The vast majority of mobile phones will load the 2x version, which is 800x800, and should look crisp on retina screens.

Abhijay007 commented 2 months ago

as you can see here it's for mobile view 400x400 in PNG format: it get's blurry.

The vast majority of mobile phones will load the 2x version, which is 800x800, and should look crisp on retina screens.

it is getting blurry for even 800x800

GBKS commented 2 months ago

What phone do you preview with?

Abhijay007 commented 2 months ago

What phone do you preview with?

I am trying via inspect

GBKS commented 2 months ago

I am trying via inspect

Try to preview it on an actual phone.

Abhijay007 commented 2 months ago

I am trying via inspect

Try to preview it on an actual phone.

sure

GBKS commented 2 months ago

Here's the logic:

Hope that makes sense.

Abhijay007 commented 2 months ago

Here's the logic:

  • An iPhone 15 (using that as a reference phone) has a logical resolution of 393x852, and a physical resolution of 1179x2556, for a pixel ratio of 3.
  • Logical resolution is what the software uses for its math, physical resolution is the actual number of pixels on the display.
  • So the image will never be rendered larger than 393 (logical) pixels in width. Originally, all screens had a pixel ratio of 1, today many laptops and desktops still do, and that's what the regular images are optimized for.
  • With retina screens, we also have higher pixel ratios, and that's where the 2x images come in (393 becomes 786). They are optimized for a pixel ratio of 2. We could go higher, but it's useless since our eyes cannot tell more detail than 2 (hence the term retina screen).
  • 393 and 786 are weird numbers, so we just use 400 and 800 (for the mobile regular and 2x images).

Hope that makes sense.

Thanks for this, I will update those images

Abhijay007 commented 2 months ago

@GBKS I resized the images as instructed, but when I check the deployed version on both my mobile device and desktop, the images appear blurry. Reducing the dimensions seems to have also reduced the pixel quality, and I'm not sure how to fix this. I've provided access to the Figma file in the issue description above—could you please download the images from there and let me know if they appear blurry for you as well?

GBKS commented 2 months ago

Here's a screenshot of the deploy preview on my laptop. Looks crisp. Can you please share a screenshot so I can better understand what you see?

Screen Shot 2024-09-02 at 15 18 25

Abhijay007 commented 2 months ago

Here's a screenshot of the deploy preview on my laptop. Looks crisp. Can you please share a screenshot so I can better understand what you see?

Screen Shot 2024-09-02 at 15 18 25

yea it is looking nice

can you please check it once for mobile devices as well?

Mobile Screenshot
WhatsApp Image 2024-09-02 at 18 57 09

If it works fine for you, we can go ahead and merge it, as there might be an issue on my end. Also, could you please compress these images? I don't have access to the tool you shared earlier, ImageOptim.

GBKS commented 2 months ago

Thanks for the screenshot. I figured out what it is and created a PR that will address it. Your images are fine and will look crisp once this other PR is merged.

Can you please compress the images? ImageOptim tells me that they can be reduced by ~70% without quality loss.