Edit logo image or use css

HTML-CSS
1

im having a hard time with the logo image. I cant decide if i can fix it with css or if i need to edit the image itself.

2

It is an impossible answer to give without seeing what you are talking about

3

tree
tree900×500 80.8 KB
This is the image i would like to use in my header as a logo. Should i edit the photo to the right sized pixel then save the file or can i do everything on css?

4

900x500 is a bit big for a header logo.

BTW, jpeg does not support transparency (alpha channel), the checkerboard you see is where the transparency would have been. If you can get it as a png file with the original transparency it will look a lot better. If you have to edit the size remember to save it back as a png file.

1 Like
5

From a designer perspective what resolution would i use for a logo image that is shown on the right side of my header, in such a way that looks user friendly to mobile or desktop user?

6

I mean that is a bit of a design decision. How tall do you want the header and how large do you want the logo. To support retina displays you may want to keep the image at a higher resolution.

If you have the logo as an SVG that would be better as it will scale up and down with no loss in quality.

7

You don’t want to scale in css unnecessarily.

  1. Doing a lot of scaling takes more time to display the image. That used to be more important because people leave a slow page quickly. But nowadays CPUs are faster.

  2. However, you’re still hitting the CPU more than necessary so that means your draining a mobile’s battery unnecessarily.

  3. Retina is an Apple trademark. So as long as you specify the image size in relative or proportional units the OS will properly size the image. I don’t know about windows and linux OS. At first, Retina was just a single alternate density, but now newer displays are even more dense so if you don’t query the browser use relative units to size images. There’s even more variations outside of Apple.

If a logo is 20px or 100px high then allowing 60px or 300px for modern screens scaling that down is reasonable IMO. Keeping 3 different sizes of images is common not including logos or thumbnails.