Topic: Guide: Best practices for using images on the forum/web (Read 350 times)

I don't think the image proxy itself should adjust anything.

I adjusted it to include "height" and "width" by default. But, option 3 actually seems to be the most interesting overall. Because it makes adjustments easier for those who edit or is indifferent to those who ignore these fields. For the browser, all information is welcome. So, it can actually be an option to minimize this problem, of the lack of proportionality.

It is true that this only resolves this issue in images sent via TalkImg. But, it's worth remembering that TalkImg was designed with forum in mind. So, on my side, I try to solve any possible problems regarding the images. On that basis, I am fulfilling the mission I set out to do. If later a solution emerges that covers all images, that's fine. At least, until now, TalkImg has done its job, improving the experience of using images on the forum.

Now, this doesn't mean that everyone is forced to use TalkImg. Everyone can use whatever service they want. TalkImg is simply designed to work according to the forum's standards.

---

Meanwhile, I was reading your post, and I thought: all images, they all go through the proxy, could we resolve it via proxy?
I don't know, I'm just thinking out loud.

Haha, yeah. That's similar to the move I do before jumping into the pool. But, just so you know, that's a GIF, not an APNG (which is what I was curious about).

---

I'm confused. If you're talking about resizing the images yourself before you upload them to TalkImg, then the attributes that TalkImg calculates will be correct, no? If you're talking about resizing them after they've already been uploaded, then what's the harm in seeing the current values before replacing them with different ones?

---

I think it makes sense. (But, make sure to read my whole reply.)

The thing is, a measure like this will only make much difference on pages where all/most of the images were uploaded to TalkImg (and where people have used the BBCode without removing the dimension information).

So, ideally, like Loyce said, reducing layout shifts should be something that gets handled in a more fundamental way. I can think of a few different strategies, but they are all a bit too hairy (for me) to pursue [1]. I think a more appropriate time for me to see if I can solve this problem for all of the forum's images would be when I'm closer to finishing the work on the [cai] tag that I've written about previously. (And, I suppose it's worth considering that if I'm aiming to eventually solve this problem comprehensively, for all images, then it's not so important that TalkImg helps to solve some part of the problem in the meantime. On the other hand, maybe I never get to it, and I'm no longer around in a few years, and at that point a decision made now to include dimension information in TalkImg's BBCode will prove to have been wise.)

One final thought (I don't mean to confuse you, I'm just sharing all of my thinking): I still think my earlier suggestion to make TalkImg's default BBCode include just the height attribute has merit. If a TalkImg solution to the layout-shifting problem can only ever be a partial one anyway, then it doesn't really make sense to insist on partially avoiding all layout shifts (if you get my meaning). Partially avoiding most layout shifts will have just about the same level of real-world impact, and will probably have better ergonomics: people adjust other people's [img] tags, like I just did above to shahzadafzal's GIF, and if it becomes common to find [img] tags with both a height and a width attribute, then I reckon it'll become more common for after-the-fact resizing to be disproportionate. After all, I can't imagine most people busting out a calculator to make sure that their adjustments to both values have the same aspect ratio as before. I mean, they could just remove one dimension and adjust the other, but I don't expect that most users even know that they can do that, and the ones that do know might remove the height instead of the width, putting that image back where it started in terms of avoiding vertical layout shifts.

Ha! Reading my own thoughts, I see that I've left you with three options:

(1) Do nothing, and rely on this problem being fixed in another way.

(2) Make the default TalkImg BBCode include both a width and a height attribute.

(3) Make the default TalkImg BBCode include just the height attribute.

I think if it were up to me, the choice would be between 1 and 3. (But, remember, I only have a hunch that for typical forum content vertical layout shifts can mostly be avoided if the browser knows just the height of an image before loading it. So, you should probably do nothing until someone tests that hypothesis. If it turns out that browsers really are super picky about needing both dimensions before they can do anything clever around avoiding layout shifts, then the choice is between 1 and 2, and in that case, the tradeoffs aren't so clear, and with unclear tradeoffs, I tend toward inaction.)

---

[1] A lot of the time, I'm trying to solve problems for Bitcointalk, but with one hand tied behind my back, and a twice-wrapped gauze blindfold on: I can kind of see what I'm doing and kind of get things done, but not really. Remember, all I have is my own cobbled-together testing environment, and theymos and I don't really have a good/close rapport, at least not when it comes to software engineering, so most of the time it's just me coming up with patches by myself and trying to stick to things that don't require detailed knowledge of the differences that exist between SMF 1.1.19 and Bitcointalk's codebase. (And I'm just about the most detail-oriented person you could meet, so half-assed "shot in the dark" programming is anathema to me: in terms of activities I might enjoy, I think I'd rather be tasked with putting a campfire out with my face.)

I want to take a moment to express my heartfelt gratitude to OP for creating the incredibly helpful guide on optimizing images in the forum, as a complete newbie to uploading images, I was struggling to wrap my head around the process as I have always wondered how other forum users create fascinating artistry images during the pizza contest or another other contest that requires artistry images. But your guide made it more clearer.


Your step by step instructions and detailed explanation were obviously perfect for someone like me who's  just starting out, the example you provided using edit photo really helped to illustrate the point you were making, optimizing an image for web use can be a bit tricky and I've had my fair share of frustration the last time I tried to upload an image but I understand the process more now.

A very useful guide, especially for beginners who have not been able to optimize how they upload images properly and correctly on this forum.

I may be used to doing this but I use photoshop as my main application to edit the color, size, file type and of course the file size to be adjusted.

Doing this optimization work for some images that I will post in a contest thread that I often follow, and I set the file size to stay under the 1MB size,
so that it is not too large and does not overload the people who see the images.

To set the same proportions and size, I also set the size using the addition of HTML "width=xxx",
if the edited result is not the same size because it often happens that the image size is not the same and looks messy, but with HTML "width=xxx" it will be very helpful.

In addition, I use a part of the Microsoft Office 2010 application which is "Microsoft Office Picture Manager",
this is only in Office 2010 and I use it only for certain purposes when there are too many images that I have to resize the root file size can be smaller and remain proportional.
With a choice of 6 sizes that can be adjusted and can change the image format at once. It is very useful to resize images in bulk.

---

I have translated this thread into Indonesian language
https://bitcointalksearch.org/topic/--5522016

I agree with you. As I mentioned, I hate to see images that aren't proportionate. I'm the type who notices the pixel out of place... 

I can put the option that displays the height and width code by default. Testament for a while and we see the result. It is viable for all tastes, those who don't like it remove or change it, it's those who don't care about it just let it be.
What do you think?

Even if this works on the forum (which I haven't tested yet), it's not enough if the image is wide enough to push other things to the next line.
A more elegant (and time consuming for you) solution would be for the forum's image proxy to load and add the image dimensions at the moment the post is created.

He'll be the only one without black borders anywhere on his screen, no matter what

Agreed. But, thinking about this issue a little more (and not taking as definitive the MDN quote from my previous post), I think horizontal layout shifts can be prevented if the browser ahead-of-load knows the width, and vertical layout shifts can be prevented if the browser ahead-of-load knows the height (and, obviously, both kinds of shift can be prevented if the browser knows both dimensions).

Really, the annoying kind of layout shifts (for me, anyway) are when things keep shifting vertically (and I'm always on Tor, so sometimes image loading takes forever).

It makes me think that maybe a sane default choice for TalkImg would be BBCode that includes just the height attribute...

That way, vertical layout shifts might be prevented (hopefully, anyway; it's worth testing beforehand, but I'm a little too busy at the moment to do this myself), and the BBCode would be a bit more compact compared to including both dimensions (and having just the height to tweak would also make it harder for people to mess up the aspect ratio when making after-the-fact size adjustments, which are not ideal, obviously, but sometimes it's all people have the time to do, if they do anything at all, and sometimes it's done to shrink an already-uploaded image).

I care, too. But a lot of people don't seem to...

I have an uncle who watches everything on a horrifyingly mis-calibrated and mis-configured TV, and he's completely happy with it. I think: "Holy shit that's fucked." and he thinks: "Ooooooh. 4K is nice!"

Very well explained thank you joker_josue for the service


GIMP is an excellent option, offering functionality comparable to Photoshop. However, it can be slightly complex to use, especially if you're not familiar with Photoshop. I would also recommend a more lightweight and user-friendly alternative: Paint.NET. For simple tasks like resizing, I personally prefer Paint.NET as I find it easier to use.


hahaha I also tested this before reading your reply



hats off to joker_josue he's doing best... TalkImg now supports Multiple Uploads and Animated images too

The drawback of this is that your browser will only know the size after downloading the image, which leads to the page "jumping". It's one of the reasons why I dislike dynamic content: when something shows up on my screen, I don't want it to move if I'm not scrolling.

I must be one of the few people who cares Squashing pumpkins for instance does't do them justice.

It is as it is now. The user chooses the option he wants, with or without the measurements in the BBCode code.

You can't please everyone at the same time, so it stays as it is, which works well.

You generally only want to specify one of the width and height, as if you specify both of them, and the values are not proportional, you will skew the image and it will mess with the aspect ratio.

Not very important to most people, but it matters a lot if it's an ANN graphic or something else with a lot of text.


No actually, make it optional. As I sometimes resize the images myself and don't want to have to delete the width and height sections to add my own. It should be a checkbox or something.

Yes, I can do that.
It really ends up creating a more efficient method of managing page loading and improving the user experience.  
I will make the adjustments.

---

I thought of more things I could add to this guide, but I didn't want it to become too extensive. Maybe then I'll do another one.

While it's best (like you said) to take care of resizing beforehand, one way to ensure that an after-the-fact BBCode resize will be proportional is to specify just the width or the height (and let the missing dimension be calculated automatically).







(Not that it's actually important, but, if you're super pedantic about proportionality, then leaving the missing dimension to be calculated automatically is sometimes technically better, too: because the browser-calculated dimension isn't restricted to an integer value, the first example above has an aspect ratio of ~1.504:1, while the two single-specified-dimension examples have a slightly-more-correct aspect ratio of ~1.501:1, but, even in a true fractional-rendering context, I doubt anyone's eye would be sharp enough to pick up on a difference that small.)

---

While I'm on the subject of [img] tag dimensions, have you considered configuring TalkImg so that it (by default) includes both a width and a height attribute in the BBCode? (Basically, make your "BBCode full fix HxW" option the default choice.)

---

(Just testing if animated PNG files work on TalkImg.)

Yes, we can then define the specific size of the image in BBCode.

Personally, I always recommend resizing proportionally. In this case, it should be 400x266 and not 400x233.



Don't you think it looks better?


NOTE: Resizing via BBCode does not change the actual size of the image. It just tells the browser how large it should be displayed. Therefore, you should always seek to optimize the image to the most appropriate size for web use.

I just want to add these sites to compress or optimize images alternatively without losing the quality. I am using this on my blog to optimize pages for SEO.

- https://tinypng.com/
- https://imagecompressor.com/
- https://compressor.io/
- https://shortpixel.com/online-image-compression

About resizing the image, we can add height and width to the image bbcode sample below.

Guide: Best practices for using images on the forum/web
Powered by TalkImg

After more than a year of TalkImg, image hosting service dedicated to the forum, and having answered several questions related to the use of images, I decided to create a guide on best practices for using images in the forum and on the web in general. This guide highlights the use of images on Bitcointalk, but these practices are also useful for use on other web sites.


 File Size  .:
On any website, not just Bitcointalk, it is important to take into account the size of the image file that is used. This is essential so that visitors can enjoy the best browsing experience. Although many already have fast internet connections, this is not always enough for the website to load quickly, it needs to have good optimization to ensure speed. This optimization mainly involves images, and possibly other resources that the website may have.

The size of the file will influence how quickly an image loads, if it is large (in bytes; kB; MB) it will take longer to load. The file size will depend on the image's dimensions, resolution and file type. Typically, it is recommended that an image used on the web be no more than 1 MB for good performance. It's true that the forum allows images up to 2.5MB, but remember large images take longer to load.

For example, the TalkImg logo if not optimized would take up 220kB more, being optimized it would take up less than 70kB.

Many may think that this can make you lose quality, but when done well, quality is not lost. Follow the guide and learn how to do it.


 File Type  .:
To achieve good image optimization, you need to choose an appropriate file type. On the web, it is not recommended to use images in BMP or TIF, as they are a type of file with low optimization. The most recommended are JPG, PNG and GIF. On some websites it is possible to use WEBP files, which have excellent levels of optimization. Only JPG, PNG and GIF are accepted on the Bitcointalk forum.

What file type to choose? It depends on the objective of the image.
The JPG type is ideal for photos and images without transparent backgrounds.
The PNG type is ideal for graphics, images with text, or images that require transparent backgrounds.
The GIF type is for animated images, but they should never have a large resolution, nor with very long animations.

An example: the photos of the pizzas in pizza contest must be in JPG. The contest presentation banner must be in PNG.


 Image Size  .:
Another point to consider to obtain images optimized for the web is their size (pixels). In most cases, large or high-resolution images are not necessary, especially on the forum. Unless the image is for printing or for analyzing details, there is no need for the image to be very large.

An image measuring 1920x1280px is already more than enough size for most use cases on the web. But, you can most likely get good results on images less than half this size. For the forum, images between 600px and 1200px (on the larger side) are usually enough.

Here's a tip: always use a proportional resolution. In other words, if the original image is 1920x1280 and you want to reduce it to 600, the result should be 600x400px. If you have another measurement, it will distort the image, which may not look very nice.


 How to Optimize?  .:
There are several programs that can be used to help with the optimization process. Even some smartphones have included some functions that help in this field. Of course, we have the famous Photoshop that allows you to make these adjustments to images to make them more optimized. But there are other free programs that allow you to perform this task.

Perhaps one of the best-known free image editing programs is GIMP. It works on Linux, Windows and Mac. Many consider it open source Photoshop competitor.
For those who don't want to install any programs, they can use the website edit.photo. It's free, no accounts required, no cookies, ads or tracking.


 Practical Example  .:
I will give an example of a high resolution image and how you can optimize it with edit.photo.

Example image: https://www.pexels.com/photo/close-up-shot-of-a-bitcoin-6765369/
Original size: 5311x3541px
File Size: 3.56MB
File Type: JPG

1. Choose the image:


2. Choose the "Resize" option:


3. In the bottom center, find the "Height" and "Width" field, with a padlock. Close the padlock (to ensure proportionality) and choose the desired size.


4. In the top right corner, you will find the export option. Choose JPG, set the quality to 80% and download.


5. Use TalkImg, or another image hosting site, to upload the exported image and get the BBCode code to post on the forum.

Result:
Optimized size: 800x533 px
File size: 90kB
File Type: JPG


Look at the original image and look at the edited image, and you will see that there was no significant loss of quality, but we were able to optimize the image to perform well on the forum/web. Try repeating the exercise and you will see how easy it is.


 Conclusion  .:
As you can see, having an image optimized for forum use is not very complicated, it is possible with just a few clicks. You can use this procedure in any image editing program, no matter how simple it may be. If you make good use of images, you will be able to enrich the forum experience for everyone.


I hope this guide is useful to everyone and I will remain at your disposal for any clarifications. If you want more guides on this topic, feel free to ask, and I'll check what I can do.