Images take time to load. This is a fact of internet life. Another cold, hard fact is that the larger the image the longer the load time. What is not absolute, however, is the level of technology being employed to view images by the average end-user. A good majority of us are using smartphones and laptops and some of us are using desktop/tower machines to facilitate our copious consumption of media. There are also those of us using older technology that may not be up to 'spec', so to speak, thus making it more of a chore to view things on the internet than everyone else.
As such, I'm going to educate you on a very simple way to make sure the images you use in a "Journal Feature" here on dA load in a timely fashion for all concerned, thus making what you offer more enjoyable for all who come across it. This will involve some basic use of HTML code but it is certainly not anything supremely difficult to understand and, with regular use, will seem like second nature in the end.
First things first, in order to inject HTML code into a journal you need to make sure that the editing mode is, naturally, HTML mode -
Now, in order make it so that a journal full of images loads quicker, we're going to employ code that allows you to order your selections as a series of thumbnails. The basic code for a weblink goes like this -
which should, if you've coded correctly, have this effect -
Basically, just copy the link from your browsers URL field and paste that link between the two "" characters in the line of code and add a bit of text between the >< characters to make a meaningful title for your link.
In order to use a thumbnail as a link, we're going to use this same bit of code, except we're going to inject an additional bit of code where it says 'This is a link to a Website' in order to allow the thumbnail to act in such a manner. That bit of code goes thus -
In order to get the appropriate image for your thumbnail, as shown above, you'll want to right click on your image in the browser and select 'View Image' from the list that appears, at least that's how you do it in Firefox. I'm not exactly sure what it is for other browsers but a simple web search will reveal the answer. You will then need to copy the URL and paste it between the "" characters following the 'img src' tag. You'll notice that there is a 'width' function in that line of code. This is very useful in that it will allow you to control how big or small your thumbnail link appears in your journal. Let's see what the effect would be if we had two thumbnails of the same image with two different values, the first at 100 and the second at 250 -
Now, in order to use thumbnails as links, we'll need to inject our 'img src' code into the space between the >< characters in our 'a href' code, like this -
and Voila! You now have a thumbnail link that loads faster than a full-sized image and will, when clicked, take the user to the page that corresponds to the thumbnail. It's very important to remember that the first link in our code must correspond to the URL for the page on which the image is featured and the second must correspond to the link of the image itself when viewed in the browser.
Now, let's talk a little about arrangement. Naturally, when you want to do a feature, you tend to want it to look as nice as possible. Let's say we have six images we want to feature. If you want to feature them all together as a group, merely place the code for all six thumbnail links back to back in your editing panel, like this -
which will have the following effect -
Notice how the thumbnails have spaces in between them. That can be accomplished by placing a space in the code after the > character which follows the /a segment in each individual string of code. If you wish no spacing, merely eliminate that particular bit of spacing.
Now, let's say you want to arrange these thumbnails in groups of two. Well, you accomplish this by organizing the code for the link/thumbnails in groups of two, like this -
which will have the following effect -
Pretty simple once you get the hang of it. Now let's look at one other bit of code that will allow you to make a presentation even more dynamic. It's called centering and the code looks like this -
I'll show you the effect of this code in a second but notice the 'i', 'u' and 'b' style tags I put around the "place anything you want to center in this space" text. As you'll see, these style tags allow you to italicize, underline or bold the text in question. Now let's combine the code here a little and show you what the 'center' function does for you -
So there you have it. This may be more than you ever wanted to know about HTML code (frankly, I know very little beyond this myself) but these are some fairly simple ways to make your journal features more presentable and less likely to bog down a person's computer when they view those features. Enjoy.