Pixilated text

[RichZep]

In Photo I made a square. Added text. It was pixilated, like the old bitmaps. I then switch over to Publisher and the text is perfect. 

[GarryP]

Photo will always show you the whole document ‘at the document resolution’, whereas Designer and Publisher will show you vector-based layers ‘at the screen resolution’.

Those aren’t the correct technical terms but hopefully you get the idea.

Photo = always see pixels, as the document would be when exported; Designer/Publisher = vectors shown more clearly.

This is normal for the Affinity applications.

[Old Bruce]

View it at 100% not the 782% you have it at in your screenshot.

[RichZep]

Ahhhhhhh, thank you both. I don't usually use text in Photo but thought I would this time, making a tile for a website.

 

[Pšenda]

2 hours ago, RichZep said:

I then switch over to Publisher and the text is perfect. 

Try switch to Designer persona, and set View Mode (menu View or Toolbar) to Pixel.

[Pyanepsion]

Affinity Photo is a raster tool, so it seems logical that images, including those of letters, should be converted to raster, with the corollary of pixelation. As I'm not much of a raster user, this is a point I wouldn't have thought of without your messages.

When a raster image is intended for a medium where it can be enlarged, for example an Internet page or a e-book, how can we limit this pixelation effect?

[Pšenda]

27 minutes ago, Pyanepsion said:

how can we limit this pixelation effect?

Increase image resolution.

The image is then displayed reduced in normal view, and when zoomed in, more and more detail is gradually displayed. Pixelation occurs when zooming in above the image resolution, when details are already missing. 

Edited August 3, 2023 by Pšenda

[Pyanepsion]

31 minutes ago, Pšenda said:

Increase image resolution.

 I’ve thought of forcing the point to the pixel, but this can only really work on verticals and horizontals, and, of course, increasing the resolution, but this quickly leads to a significant increase in capacity:

An image going from 72 to 300 resolution will go from 72 × 72 = 5,184 pixels per inch, to 300 × 300 = 90,000 pixels per inch.

The right solution, at least for the Internet, is to use images adapted to each magnification range:

To adapt to different screen sizes:

<picture>
  <source media="(min-width: 3841px) and (max-width: 5120px)" srcset="/webp/image_5120.webp">
  <source media="(min-width: 2561px) and (max-width: 3860px)" srcset="/webp/image_3860.webp">
  <source media="(min-width: 1201px) and (max-width: 2560px)" srcset="/webp/image_2560.webp">
  <source media="(min-width: 992px) and (max-width: 1200px)" srcset="/webp/image_1200.webp">
  <source media="(min-width: 768px) and (max-width: 991px)" srcset="/webp/image_992.webp">
  <source media="(min-width: 576px) and (max-width: 767px)" srcset="/webp/image_768.webp">
  <source media="(min-width: 480px) and (max-width: 575px)" srcset="/webp/image_576.webp">
  <source media="(min-width: 0px) and (max-width: 479px)" srcset="/webp/image_480.webp">
  <img src="/webp/umage.webp" alt="texte alternatif" title="Texte au survol" class="classe" id="identifiant">
</picture>

To be able to magnify by squashing your fingers if the application allows:

var img = document.getElementById('monImage');
var scale = 1;

img.addEventListener('touchmove', function(e) {
  if (e.scale > 1 && scale === 1) {
    // L’utilisateur a écarté les doigts, changeons vers une image haute résolution
    img.src = 'chemin/vers/haute-resolution.png';
    scale = e.scale;
  } else if (e.scale <= 1 && scale > 1) {
    // L’utilisateur a rapproché les doigts, revenons à l'image basse résolution
    img.src = 'chemin/vers/basse-resolution.png';
    scale = e.scale;
  }
});

 

[R C-R]

9 hours ago, Pyanepsion said:

When a raster image is intended for a medium where it can be enlarged, for example an Internet page or a e-book, how can we limit this pixelation effect?

It is preferable not to use raster images for text wherever possible, so for instance use web page creation tools that allow you to create HTML text elements.