When blocs shrinks my logo for mobile and tablet the logo gets very blurry. Why is this?
My guess is probably its not a big enough file size. Need a higher resolution file for the tablet and phone.
casey
Well, since the logo gets smaller in mobile and tablet I don’t think thats the problem unfortunatly.
//Cissi
It might be because the pixel densities of mobiles and tablets can be higher than many monitors. A single pixel-density monitor showing an image, would need the same image to be twice as big on a retina-display iPhone. I see a lot of blurry logos on my retina MacBook.
If you could post a URL with an example, we could tell for sure.
Yeah, my 5k screen does not display a blurry logo, but on other screens it does.
http://sourcetech.se is the url.
Your logo is blurry on my retina screen MacBook. When I reduce the size of the browser window and blocsapp adjusts the logo size it becomes sharp - exactly what I would expect because The image pixel size is then much larger than the browser points being used.
[edit:
None of this matters if your display resolution is the same size as the screen resolution in the OS.
To explain further - my macbook has a horizontal resolution of 2,880 pixels. In normal usage the virtual screen size is 1440 pixels, so on fullscreen a browser would think that the screen width is 1440pixels ( points).
If an image is 100 pixels in size, and sized at 100pixels inside the browser, in reality it will be stretched over 200 pixels of my display panel. It will look somewhat fuzzy compared to vector graphics and text that will be using the full resolution available on the screen (2880), not just the notional browser width ( 1440 ). Each pixel of the image will be stretched over four pixels of the display panel.
If an alternative image file is available for the graphics and the file has a 2X suffix, the browser will use that instead, so that although the image is set in browser terms to be 100 pixels wide, a 200 pixel wide image will be used. That will appear sharp because every pixel of the image is represented by one pixel on the physical screen, not four physical pixels.
When blocsap makes a mobile version, the image size may shrink to 50 pixels as far as the browser is concerned, but the source image remains at 100 pixels. At that time the image will appear crisp since one pixel in the image is reproduced as a single pixel on the physical screen.
Things get worse when images are not available in a precise ratio that matches the bvirtual screen pixels to panel pixels. Imagine if my browser image is set to be 100 pixels wide but the image itself is 150 pixels wide. In my case then the image blurs because 150 pixels of information will be stretched over 200 pixels in the hardware panel and no single pixel of the image can be precisely mapped to the screen.
That’s why 2X images are important on retina type screens. the same will apply to windows where high resolution screens have a lower virtual resolution set in Windows. ]
Hi,
Okey, we never had this problem on our old website, with the same assets.
I tried to set a larger image in the project setting and added a class to it. But the logo does not resize…
//C
None of this behaviour is specific to Blocsapp. Whether an image is blurred or not depends on the device it’s being used on, the size of the image file (if it’s non-vector) and the size the browser is trying to display the image at.
You can specifically set the size of the logo in the side panel, unfortunately you can’t control the size directly on a mobile, tablet and desktop basis.
You can make a workaround by having different navigation panels for mobile, tablet and desktop and set explicit sizes for the logo according to format.
Something that should work perfectly is to use svg for your logo, though it won’t work with very old browsers.
Your on the right track using the bigger file, all you need to do is add the height size in the side panel. I make my logo files 2 or 3 time larger than it’s intended size. This way when I tell blocs to make it display say 50 in height it will display sharp on all of the different types of screens.
Look around at some of the blocs sites that have super crisp looking logos on a retina screens, tablet or phone. If you download or inspect the image you will see the file much larger than the size it’s displaying.
@pauland has a lot of knowledge and a better understanding than I do. You can make different different menus and images for different devices, sometimes you need that. But to add to his comments, you’ll find in the ever changing pixel landscape there are choices to be made and I find there is hardly ever the perfect solution.
Casey
Okey, so I should not use a class to this? As I understand it if I don’t use a class the image will not be responsive?
Well I cannot choose a svg in the project settings, otherwise I would have used it.
Thanks for all your help!
Thanks! I tried with bigger files but as they did not resize accordingly with the class I tried to find a asset with the right dimensions…