Pictures for technology page make transparent + better quality output #58

New Issue

Closed

opened 2024-06-12 13:51:59 +00:00 by mik-tf · 11 comments

mik-tf commented 2024-06-12 13:51:59 +00:00

Owner

Copy Link

Situation

• Images with transparent background appear with a grey background, instead of being transparent

Todo

• We need at least that the technology pictures have transparent background

@ehab

Can you have a look? @sabrinasadik told me you could help with this.

I share here pictures with transparent background

# Situation - Images with transparent background appear with a grey background, instead of being transparent # Todo - We need at least that the technology pictures have transparent background @ehab Can you have a look? @sabrinasadik told me you could help with this. I share here pictures with transparent background 

tech_1.png

78 KiB

tech_2.png

87 KiB

tech_4.png

87 KiB

tech_3.png

43 KiB

ehab was assigned by mik-tf 2024-06-12 14:05:20 +00:00

mik-tf commented 2024-06-13 02:51:41 +00:00

Author

Owner

Copy Link

Update

Also, it seems that pictures are not well displayed (the quality of the graphics is poor). It seems it wasn't like this before. I don't know if something changed at some point. Maybe it can be improved. Thanks!

# Update Also, it seems that pictures are not well displayed (the quality of the graphics is poor). It seems it wasn't like this before. I don't know if something changed at some point. Maybe it can be improved. Thanks!

mik-tf changed title from Pictures for technology page make transparent to Pictures for technology page make transparent + better quality output 2024-06-13 15:18:13 +00:00

mik-tf added this to the Project Inca Website Optimization project 2024-06-13 19:18:58 +00:00

ehab commented 2024-06-14 08:43:30 +00:00

Owner

Copy Link

@mik-tf picture looks good for me at a 1920*1080 screen
also, I see that you used the images with gray background #eef6ff not transparent if you use a transparent image like the attached
ll not work right at dark mode because of the black text

can you send me a screenshot of an image with poor quality?

 @mik-tf picture looks good for me at a 1920*1080 screen also, I see that you used the images with gray background #eef6ff not transparent if you use a transparent image like the attached ll not work right at dark mode because of the black text  can you send me a screenshot of an image with poor quality?

image.png

136 KiB

image.png

168 KiB

tech_tfchain_pic.png

127 KiB

mik-tf commented 2024-06-14 12:49:11 +00:00

Author

Owner

Copy Link

@ehab Thanks so much! Clearly going in the right direction.

Here are some pictures that don't come out right:

---

The image next to smart contract for it looks great with the transparent background.

I understand about the text in black. Can you update the 4 images on tech with the transparent background and cropping the image so we don't see the text?

E.g. just the picture not the Quantum-Safe Storage text. It's not needed as it's already in the text next to the picture.

Thanks a lot!

@ehab Thanks so much! Clearly going in the right direction. Here are some pictures that don't come out right:   --- The image next to smart contract for it looks great with the transparent background. I understand about the text in black. Can you update the 4 images on tech with the transparent background and cropping the image so we don't see the text? E.g. just the picture not the Quantum-Safe Storage text. It's not needed as it's already in the text next to the picture. Thanks a lot!

image.png

1009 KiB

image.png

957 KiB

marionrvrn commented 2024-06-14 12:51:12 +00:00

Member

Copy Link

I've just created the content for the builders page (this page has been added to the development_builders_test branch for now).

However, the image quality is very poor (images are blurred and sizes seem incorrect). Can you please check if this is also the case on your sides? @ehab @mik-tf

Thank you!

I've just created the content for the builders page (this page has been added to the development_builders_test branch for now). However, the image quality is very poor (images are blurred and sizes seem incorrect). Can you please check if this is also the case on your sides? @ehab @mik-tf Thank you!

mik-tf commented 2024-06-14 12:53:35 +00:00

Author

Owner

Copy Link

I did some testing and I found that for example I can get a clear picture by adding layout:

    image={{
      src: '~/assets/images/test_image4.jpg',
      alt: '',
      layout: '100px 100px, 100vw',
    }}

Of course the image is now too big, but just trying to understand more how it works.

The layout part came from the file: src/utils/images-optimization.ts

I did some testing and I found that for example I can get a clear picture by adding layout: ``` image={{ src: '~/assets/images/test_image4.jpg', alt: '', layout: '100px 100px, 100vw', }} ```  Of course the image is now too big, but just trying to understand more how it works. The layout part came from the file: `src/utils/images-optimization.ts`

image.png

1.1 MiB

👍 1

ehab commented 2024-06-15 11:42:05 +00:00

Owner

Copy Link

I fixed some images at development_fix_images branch

at

I fixed some images at development_fix_images branch  at

image.png

1.1 MiB

image.png

1.9 MiB

❤️ 1

mik-tf commented 2024-06-15 13:49:07 +00:00

Author

Owner

Copy Link

Thanks @ehab it looks way better now.

Do you think you can check the image quality of the other images on the website? Tech page is done. No pictures on about page. So index, builder landing page + post pages, etc.

It might aready be fixed with what you did: I will have access to a computer later to check.

Thanks again. So much better.

Thanks @ehab it looks way better now. Do you think you can check the image quality of the other images on the website? Tech page is done. No pictures on about page. So index, builder landing page + post pages, etc. It might aready be fixed with what you did: I will have access to a computer later to check. Thanks again. So much better.

ehab commented 2024-06-19 12:14:54 +00:00

Owner

Copy Link

I fixed some images at Builder but other images need high resolution because it's too low like Elestio image
also, I see hero images fixed at 1024 so need the image to be 1024 or more not less

I fixed some images at Builder but other images need high resolution because it's too low like Elestio image also, I see hero images fixed at 1024 so need the image to be 1024 or more not less

mik-tf commented 2024-06-19 13:01:37 +00:00

Author

Owner

Copy Link

That's great @ehab thanks a lot.

So what is needed for images to come out right? Just to make sure the resolution is above or at 1024? Thanks.

Can you merge/PR your changes?

That's great @ehab thanks a lot. So what is needed for images to come out right? Just to make sure the resolution is above or at 1024? Thanks. Can you merge/PR your changes?

mik-tf commented 2024-06-19 13:03:12 +00:00

Author

Owner

Copy Link

Oh yeah! the images look amazing. well done.

Oh yeah! the images look amazing. well done.

👍 1

mik-tf referenced this issue 2024-06-19 13:17:57 +00:00

development_fix_images #72

mik-tf commented 2024-06-19 18:55:53 +00:00

Author

Owner

Copy Link

@ehab nailed it. closing.

@ehab nailed it. closing.

mik-tf closed this issue 2024-06-19 18:55:53 +00:00

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

development

marionrvrn-patch-1

development_patch1

main

No results found.

Labels

Clear labels

  

Issue

  

Question

  

Roadmap

  

Story

  

Task

  

Urgent

No Label

Issue

Question

Roadmap

Story

Task

Urgent

Milestone

Clear milestone

No items

No Milestone

Projects

Clear projects

No project

Project Inca Website Optimization

Assignees

Clear assignees

No Assignees

ehab

3 Participants

Notifications

Subscribe

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: tfgrid/www_projectinca#58

No description provided.