• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

[Tutorial] How to reduce upload consumed by loading webpages w/Pictures

Status
Not open for further replies.

Znote

<?php echo $title; ?>
Staff member
Global Moderator
Premium User
Joined
Feb 14, 2008
Messages
7,030
Solutions
256
Reaction score
2,117
Location
Norway
GitHub
Znote
Edit 2010: Slightly updated for Uniform Server!

Greetings.

This tutorial is for people who are using Uniform Server(a), with Nicaw ACC.

(My english isn't 100% perfect, but its atleast understandable)
In order to follow my tutorial, you need a photobucket account, you can register an account here: HERE

When somebody connects to your home page, you are uploading pictures to them, etc header and lots of other smaller pictures to make your homepage look nice. This tutorial will show you how you can make them download thoose pictures from etc photobucket, instead of you wasting your upstream on uploading the pictures to them.

For an example:
You are hosting an otserver, I want to test it, I enter the link to your homepage, and I see a custom picture from your ot, etc "Welcome to Znote". That picture probaly has a size between 30kb, and 150kb.

Normally, the hoster of the server, is using his network, to send you thoose 30 - 150kb everytime you refresh the site without cache on the Nicaw ACC.
But since that hoster was a bit smart, following my tutorial ;) He will only send 0.001kb~ [a link that will automatic make you download the 30 - 150kb] from a picture hosting service. [imageshack/photobucket]

Ok, lets getting started, in this tutorial, I will go after the inferno layout, you can choose another layout if you want too.

You open your Uniserv folder, and you open the www folder you have nicaw files in. Then you open the skins folder.

\www\skins
In this folder, you will see javascripts, and CSS documents.
cssjava.jpg


As you see on this photo, I have marked inferno CSS document, open that with a normal text document.

In the text document, search for:

Code:
blockquote {
	padding: 0 3em;
	background: url

you will probaly get something like this:
Code:
blockquote {
	padding: 0 3em;
	background: url([COLOR="Red"]TheImageYourUploading[/COLOR]) no-repeat 1em 0;
	font-style: italic;
}

No repeat means that when somebody is browsing your page, the picture will not repeat every click you do, etc when you click on create account, highscores etc. But it will still upload to you each time you refresh the site without cache. 1 time is 1 time to much.

In my text document, you will se this:
mytextd.jpg


As you see on my text document, instead of uploading the picture myself, I have put in a link from photobucket, a direct link to the picture. So when ppl enter your page, they will
download that picture from photobucket instead of you!

For thoose of you who are experienced, this shoud be enough for you to understand how to do this. But I will keep on this tutorial for newbeginners.

================================================================

Ok, how can you make your pictures come instead of mine? How did I make that url to download exacly the correct picture? etc etc etc....

When your Nicaw ACC is running Inferno, Inferno used the pictures that is located in a folder named Inferno in this skins folder.
On this picture I have marked that folder:
infernofoldermarked.jpg


Inside of that folder, there are the pictures that is beeing used to make your page look nice, also its thoose pictures that can slows your internett down.

Now login at http://photobucket.com/ and upload ALL pictures in that inferno folder.

You will get a direct link to every one of thoose pictures.
Now look:
Code:
blockquote {
	padding: 0 3em;
	background: url([COLOR="Red"]TheImageYourUploading[/COLOR]) no-repeat 1em 0;
	font-style: italic;
}

Simply add that link instead of the image your uploading! Remember to make sure the direct link is the same picture as that picture your uploading.

Code:
blockquote {
	padding: 0 3em;
	background: url([COLOR="Green"]YourDirectLinkFromPhotobucket[/COLOR]) no-repeat 1em 0;
	font-style: italic;
}

Now if you look at the text document, scroll longer down, and you will find the other pictures you also where uploading, do the same thing to them! Whollah! Your done. Now you will upload alot of less bytes when you are hosting your online account page, and so now if you have a popular ot, the players will get a little less spikes, and such things.! :)


For thoose of you who thinks this dosn't matter, since its only a couple bytes? There is a cruel way to "dos" attack through web pages, not actually dos attack? Its rather called opera, open 20 pages and repeat refresh each 10 sec...

There are diffrent ways ppl can be cruel and lagg your server through your online page, so doing this will strongly prevent that.

I don't know if this has been posted before, I tryed to search for it, but didn't find any.
This tutorial is made by me, it's not copyed from any other places.

Comments please :)

+REP me if you like this please :)

Note that this will only help you a little bit, you won't be able to have like 1000 players online just because of this!
This is probaly posted in the wrong place lol <.< Just move it to the correct board if this is wrong please. :)
 
Last edited:
oh wow, This really helped me out, nice!
 
Why write so much for so little. It's most common knowledge.

You could've just say. "Use an external host instead of your local."

But, it's good I guess for the ones who don't know how to edit css.

Rename the topic to something like "How to edit your webpage to use an external host for big images/files.".

This works for everything not just nicaws aac.
 
Cato, ofc your right, but "Use an external host instead of your local."

Id look at that and just... WTF? o_O

My tutorial makes this much more understandable, so ppl like ME can understand it.

EDIT:

I don't want to rename it to your title, because for newbs, that might be to "advance" talking to understand.

But id rather call it "[Tutorial] How to reduce webpage lag (90%) through pictures" or something like that.

Anyhow, I can't change the title myself, I guess I don't got that option on this user.

So if any admins, mods or somebody who can change this change it to "Tutorial] How to reduce webpage lag (90%) through pictures" it would be fine.
 
Last edited:
Oki looks fine ^^

Thanks.
 
Last edited:
This is a common tactic for sites that use many particularly large images.
They usually have one server dedicated to hosting the web page, then several others dedicated to hosting the images.
Sometimes they split off other large files too (java and flash applets, videos, sound files, etc).
 
common but/and smart! ;)
 
just hope photobucket wont remove the images or delete the account other wise nothing will show up
 
They will adventually, if it gets extremely populated. Think my friend got his pictures downloaded from photobuckets aprox 2000 times/day for a couple months and it at last got deleted, but think its very rare. I think ppl on ****** got photobucket signatures from 2006.


Just make sure u use photobucket, imageshack has a very low hits unt'll pic gets deleted, so not recomanded.
 
Hmm, do I need to update this tutorial for Modern aac? :/ Shouldn't be so hard to understand how to tweak other sites than Nicaw with this tip.
 
Hmm, do I need to update this tutorial for Modern aac? :/ Shouldn't be so hard to understand how to tweak other sites than Nicaw with this tip.

its pretty much the same idea. if they can follow this they should be able to do it for Modern aac.

still updating it wouldnt be such a bad idea. more people need to do this a lot of OT's are laggy and im sure this would help a little with spikes.
 
CoralCDN

There is a much easier way to do that:
Change every image url in source
example:
http://myots.tld/images/background.jpg
to:
example:
http://myots.tld.nyud.net/images/background.jpg
 
Neeh :p
 
Last edited:
Status
Not open for further replies.
Back
Top