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?
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.
yup, also this
/u/dessalines, /u/nutomic, thoughts?
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.
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.
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.
Also, do you have a width limit for images? Otherwise if a post has a very wide image, it could mess up the UI.
There’s no limit, but they actually don’t look bad. Here’s one with a wide thumbnail.
I was more thinking of really wide thumbnails, like a 10:1 banner for a website.
You could test it out, it pry wouldn’t look that bad. The main thing is that the content around the image, the text and all, should wrap well.
Apparently it just makes the image shorter, which is good, but now the “expand image” icon is tiny.
I just pushed some more changes to thumbnails today, so that now they are cached in pictshare / all from the same domain. So the size and privacy part of it now should be good.
I do like picture thumbnails for articles that have them.
At least now it’s easier to block them by blocking just one domain, however that would also block all native pics…
So the size and privacy part of it now should be good.
The size? You mean aspect ratio?
I do like picture thumbnails for articles that have them.
Maybe an option to disable them? I’m sure a lot of people would agree with me on that point.
The size/pixels. I’m not changing the aspect ratios for the images.
If I did add an option to disable images, it’d be all images, not just post thumbnails.
I think we definitely need to try cropping images to a common aspect ratio. Otherwise it will always look bad.
deleted by creator
