Why is the logo not sharp?

Hi faberh,

as Dan Rodney pointed out above: your logo is way to big! Reduce the image size to at least 75%.

It's also recommend to use SVGs for logos instead as they're automatically scalable (you won't have
pixelation issues at all). Illustrator will be your friend here.

Note: WordPress doesn't support SVG natively (for security reasons), but a plug-in exists: SVG Support.

Kind Regards,
Maurice

Hi

Adobe Photoshop is a program for modifying already created images or graphics, like photos, and is Adobe's most popular program. Raster or bitmap graphics are created in Photoshop.  Everything in Photoshop is just a series of pixels, so if you're scaling something up or down, it can lose its quality very quickly. Photoshop is a popular choice for web graphics, photo editing and designs since those projects will stay at a fixed size. Editing photos is awesome in Photoshop, because it includes a lot of unique filters, special effects and tools. Another great benefit of Photoshop is that you can have complete control of your projects, since you can edit your graphic pixel-by-pixel.

Adobe Illustrator is an advanced vector-based software. So, unlike Photoshop's pixel-based format, it uses mathematical constructs to create vector graphics. In Illustrator, a line is composed of two dots connected by a computer algorithm, instead of just a line of pixels. Because of this, Illustrator is used often to create logos or anything that may need to be printed or displayed at different sizes. A vector graphic will never lose its quality if it's scaled up or down. Illustrator will also give you a better print output since it's not resolution dependent. A drawback of Illustrator is that it can't be used easily to modify images that are already created, since there are limited filters and image editing tools available to you

You made a 2,400px logo to be displayed in a 90px space. Even at 2x (for high-res displays) you only need 180px. You're file has way too many pixels! Not only are you making people download a file much larger than needed, browsers are having to scale it down tremendously. Make the logo an appropriate size based on your webpage layout.

Also, ideally a logo should be saved as SVG, which Photoshop cannot do properly. Illustrator would be best for that.

I believe it the way your HTML and browser]] is scaling your large logo.  I created a 16mp 3:2 document and saver it as a jpeg.   I created a Photoshop Script to place your logo into the lower right corner an image base on the image height. And recorder in an action to use that script.  I then batch that action on the jpeg using the image processor pro script to save out 6 different size image to fit various sizes the action place in your logo after the 16MP image had been resized by the Image processor pro.  The Script use Bicubic interpolation to resize your Png. the gray image was size to for 300x200px, 900x600px, 1024x768pc, 1K 1920x1080px, 4K 3840x2160 and left full 16mp 3:2.  Open the image on a new window or new tab to see the full size resize.  Your logo is sharp and smooth at all sizes.

Your HTML resizes your full size logo file to 75px height.  Create a 75px heigh logo in Photoshop for your HTML

x

Do you mean this?

It looks crisp to me viewed as large as Firefox will allow me.

But not so good when viewed with Chrome.  Yes a definite problem there, but this is outside my area of expertise, and I suspect more to do with your website coding. It looks like Firefox is displaying it as a vector graphic, but Chrome as a raster.

We'll try and draw our Nancy into the discussion.  She'll know if anyone does.

Just check Edge, and it is even worse!

[EDIT]  I just had a look at the image location. It is a raster object, but very big.  I think it might work better if hosted at a smaller size

https://www.fbrbikes.nl/wp-content/uploads/2017/12/Logo-2-zwart.png

Hi Faberh,

If you zoom in the image gets cut off due to the screen size, is that what is happening here? 

Regards,

Sahil