Image problem when zoomed out

HTML & CSS
1

I saved the the logo as svg. It looks okay when I zoom it in but when I zoom it out, it logo gets that effect (sorry I don’t know what is called).

Here is the css.

.logo {
	position: absolute;
	top: 0;
	width: 25vh;
	left: 0;
}

Screenshot_2019-12-16 Screenshot(1)

2

So what fomat was it before it was saved as an SVG?

3

The logo was png.

4

It looks like an aliased image displaying noticeable pixelation.

In whatever image app you used to create the svg, try looking for options like “smoothing” or “anti-alias”. It should be revealing if you can try making svg images from both a larger and smaller version of the logo. My guess would be a larger png makes for a better svg, but it wouldn’t be my first wrong guess.

Another guess. The trademarked logo intentionally resists manipulation to help preserve brand image. Try a public domain or personal image for the source.

1 Like
5

I manged to fix it by exporting it as png. However, the image now is heavy, is there a way to optimize it?

6

There are several online tools to optimise PNGs and JPGs. I usually use tinypng.com

1 Like
7

Why is it disappearing when I go to other tabs? It reappears when I go back to its tab, it looks like it’s loading the image.

8

Without seeing your code, we can only guess…

9

It’s just this, with bootstrap:

.logo {
	position: absolute;
	top: 0;
	width: 50vw;
	left: 0;
}

<img src="logo-min.png" class="d-block logo">

I’ve seen this thread from stackoverflow.

Maybe this is the reason?

Usually caused by very huge images resized using HTML/CSS. Another way to look at it, the images used was not resized to the size it was intended for the display. It takes time for the browser to resize and render them on the page, especially the large ones.

Also, a machine running low on memory will often offload resources to the swap. When windows are not in focus or are minimized, some browsers move resources off the memory and into the swap. As far as I know, Firefox does this and is configurable in the about:config. This allows the browser to save memory for other operations to use.

When the window regains focus, the browser picks them up from the swap (which generally is a slow operation), loads them back on the memory and renders them. This on-and-off-the-memory operation will take time thus could be what you are experiencing.

That’s why when using images on the web:

  • Resize the actual images to the size you need them to be
  • Optimize images by using compression. JPGs and PNGs are good at this
  • Don’t over use images
  • Spriting, to avoid multiple HTTP requests
10

This discussion is going off topic but where it would best go depends.

If you temporarily switch out the images for random very low weight image files, does the problem still happen?

Even if your visitors knew about the about:config settings, I wouldn’t make the site dependent on them having been changed.

My guesses include

  • You are thinking synchronously about code that runs asynchronously.
  • There is a problem with Event logic. In particular, something to do with changing tabs.
  • Bootstrap is doing something unintended resulting in reloading
  • something specific to your set-up. OS, browser, ISP, ???

I know trouble shooting can be less than enjoyable at times. There’s no guarantee that a problem will have only a single cause but if you can narrow things down it should help.

1 Like
11

maybe you will try to change it to img ? or try use photoshop or any tool for images … depends what you want to get in the end.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.