Since the post thumbnails got implemented a couple of weeks ago, the main page got a lot more, how do I put it, untidier. Before, it was very clean and unifying, with every post being roughly the same, and in theme with the rest of the design.

But after thumbnails it got a little messy. With images having different aspect ratios, sometimes not loading (just as a technical side issue). Images extracted from the articles are generally ugly and don’t have much to do with the actual context of the article (at least in my view).

I would actually prefer completely getting rid of any images (except for memes and any other picture-based formats), since this way all the focus is given to the actual contexts of a post and posts look nicer imo. Also, this reduces the page size a lot, which is nice. Dunno, maybe a compromise could be reached with specific criteria for aspect ratios…

Just wanted to ask if I’m the only person who’s bothered by that?

  • AgreeableLandscape
    3·
    5 years ago

    My biggest problem is that the thumbnails show up a second after the page loads and moves the other elements out of the way in the process. This can cause misclicks and generally make the page feel glitchy even though it isn’t.

    My suggestion would be to:

    • Crop all the thumbnails to be square so their dimensions are consistent.
    • Have a generic “image” icon where the thumbnail is supposed to be and only replace it when the thumbnail is loaded (there are JavaScript libraries for doing this, I believe it’s called lazy loading).
      • A smooth transition when displaying the image like a simple fade-in animation would also go a long way toward making it seem less glitchy.
    • Make sure that elements don’t move around as the page loads. This is commonly associated with a webpage lagging or glitching out and is generally a bad look.
      • DessalinesMA
        2·
        5 years ago

        The transition and placeholder ideas are good, but I tried out the cropping / static aspect ratio a while back and hated it.

        Its a problem because square images get blank space to become rectangles, rectangles get important content chopped off, for things like phone wallpapers, you have no idea what it is because its a square now, etc. With fluid images, you get not just the content, but the shape of what you are seeing, which in a thumbnail is sometimes just as important.

        • AgreeableLandscape
          2·
          5 years ago

          If you don’t want to crop, you could also work out and store the aspect ratios of each thumbnail (which should be easy to get since Lemmy stores its own thumbnails now) and send that in the post metadata so the image element is already the right size when the page loads.

        • nutomicA
          1·
          5 years ago

          There are a few different ways of cropping images. For example, Mastodon lets you manually set the focus of the image, and keeps that point centered when it crops the image.

        • AgreeableLandscape
          1·
          5 years ago

          Also, do you have a width limit for images? Otherwise if a post has a very wide image, it could mess up the UI.