Compressing your images before uploading

From Nexus Wiki

Jump to: navigation, search

What is this article about?

This article is inspired by LHammonds' "How to Convert Images" section on his OBMM How-to site. As such, it can be seen as a niche extension of the information contained therein. This article will include simple written and visual guided steps on how to save your images in a good compressed state when you utilise your preferred commercial or free image editing software. More importantly, it seeks to inform you on the points and advantages of familiarising yourself with this "web-friendly" practice. Of note, it also contains a very small statistical research on TESNexus' ImageShare section relevant to the topic.


Who should read it?

In essence, this article is unique in that it is done with the members of TESNexus in mind. It is primarily targeted for current or would-be uploaders in the ImageShare section, but the information here is also relevant to modders who upload their mod images or include it as part of their archives, or in fact any potential members that will fall into either or both of the groups mentioned.


The article is broken into three main parts separated by headings. For ease of navigation, you can bring up your browser's finder (commonly by pressing Ctrl + F) and then type the desired number with brackets as seen in the TABLE OF CONTENTS below to jump to the particular heading.

Example, in IE: Press Ctrl+F. In dialog box type "1" without the quotes and then press the "Find Next" button or Alt+F until you are at the desired part of the article. You can type and find "0" without the quotes to quickly go back to the table of contents.


If you are unfamiliar with some of the information presented here (especially in PART I), you are strongly encouraged to read through that section and then go on to the tutorial for your relevant software.


Contents

The Quote

TESNexus' big support issue is bandwidth. By cropping your images and saving them in compressed JPG format, you could save
TESNexus more bandwidth than you might know.


I was learning up on Lhammonds tutorial of Oblivion Mod Manager when I reached the section titled "How To Convert Images" (at this point I already had a few images up on TESNexus). It was there that I saw the quote above and I quickly realised I've thrown some of my valuable web marketing lessons out the window. In those lessons I may have learnt how to be a good "service provider" but I personally felt that I've become my own worst "customer" by taking a service for granted. Since then, as a member I've been trying to do my part by compressing images before I upload them. Doing so is a win-win situation for both the Nexus and its members. Read on and you will learn why.

Bandwidth In Relation To The Site User

As uploaders, using up unnecessary bandwidth is akin to simply dumping our items into a storage area. If we instead properly place/organise these items in the area it will make it easier and faster for someone to find and get at it. Webspaces are finite. As an example, hosted sites have an allocated amount of "space" (bandwidth) per month. If the Nexus were to experience a marked increase in traffic and members, AND at the same time every uploader were to forego any compression on their files, the results could be disastrous.


"If the total amount of data downloaded from the website in a particular month reaches this limit, the hosting company may shut off further public access to the site." This is a hypothetical, but plausible scenario.


For a site like TESNexus that is dependent on user generated content, the responsibility of employing bandwidth optimisation techniques should not only be the webmaster's. Besides helping TESNexus, the end-user advantages include;


  • Faster loading of images/pages as compared to if they were left uncompressed or not efficiently compressed.
  • Smaller file sizes of compressed images included with mods means that you are more likely to finish downloading them quicker, and in simple terms, makes way for other users to download them.


As image uploaders or modders who seek to attract viewers and downloaders:


  • In a professional perspective, you are less likely to "annoy your customers" with long load times, and instead allow their time to be spent on ratings/comments/feedback.
  • You will be more "web-friendly" to your fellow members on a limited bandwidth or dial-up internet plan.


Also, in a general scope, if the moderators of the site you go to needs to fully view your image or download your file as part of their moderating duties, you could also in effect help in easing up their workload.

ImageShare Section Research

To give a live example of some uploading patterns in the ImageShare section, a small research was carried out and tabulated.


Here is the list of filters, in order, that derived the sample size included in the research.


  1. Out of January to June 2008, 3 months were randomly selected.
    1. The first chosen month was downsized to the first third for selection (dates 1 -10 of the month). Out of these dates, one date is randomly selected.
    2. The second chosen month was downsized to the second third for selection (dates 11 -20 of the month). Out of these dates, one date is randomly selected.
    3. The third chosen month was downsized to the last third for selection (dates 21 to approximately 31 of the month). Out of these dates, one date is randomly selected.

  2. ALL images uploaded to the ImageShare section on the three chosen dates were saved to hard drive, then tagged and organised by uploaders. (pool)
    1. At any point of time, there can only be one image per uploader in the final sample size.
    2. If uploader has only one image in the pool, then that image is automatically included in the final sample size.
    3. If uploader has 2 images in the pool, the image with the dimension that reflects the dimensions he/she generally uploads to the site is included in the final sample size.
    4. If uploader has 3 or more odd numbered images in the pool, the image that is the median by filesize is selected.
    5. If uploader has 4 or more even numbered images in the pool, the image with the lower median by filesize is selected.


The aim of the above filters is to have, as far as possible, a random, unbiased and not grossly exaggerated (especially in trying to balance uploaders with 2 and 4 or more images) sample size class. With the filters above, 55 unique image uploaders were derived for the final sample size.


These 55 images were then compressed with Microsoft Paint (automated quality):

Here is the before and after compression comparison table:

Compressing your images before uploading1.gif

In brief:


TOTAL SIZE BEFORE COMPRESSION: 20.9 MB

TOTAL SIZE AFTER COMPRESSION: 7.14 MB

APPROXIMATE SIZE SAVED: 13.76 MB

(No. of files not affected or positively affected by compression test = 15)


  • sizes are 'Size On Disk'


Some minor conclusions can be made from this research. Pertaining to the sample size, out of 55 unique uploaders, 40 have not effectively compressed their images. The research also speaks for itself when, even with random months, exclusive dates and unique uploaders, 5 out of 55 images are unnecessarily huge at 1mb or more each in their original state. This may seem like relatively small numbers, but when you multiply the savings in this example with a given number of viewers (or downloaders), you should get an idea of the amount of bandwidth that is unnecessarily wasted.


Even then, the waste of bandwidth is very much underestimated with this derived sample set.

Compression Basics: Striking a Balance

For the uninformed, it is easy to start compressing your images before you begin to upload them. For uploaders who are already familiar, some of us may genuinely not know that we are uploading uncompressed jpegs, or jpegs that are not yet "effeciently' compressed.


This can be attributed to a few points in the various softwares which may be misleading. For example, Adobe Photoshop classes image quality as 'Low', 'Medium', 'High' and 'Maximum' along with the numbers when trying to export/save your images into jpeg. Sliders from 0-100 in some photo editing programs may also mislead the user into thinking that lower numbers denote a poor quality. Thankfully, some if not most of these softwares have live previews of the image to be saved, and that is where the focus should be (along with a small filesize).


The best way to strike a balance between acceptable quality and a good small filesize, without requiring extensive knowledge on the science of image compression, is by looking at the mentioned previews with your eyes. As with several reasons already mentioned in this article, opting for lower compression (in softwares other than MsPaint) because of its perceived superior quality has no significant benefits, other than unnecessary waste of bandwidth.


In fact, viewed at their intended dimensions (100% zoom), an image compressed using MsPaint and then compared with its uncompressed version will have no outwardly major difference in its quality. Remember, we are sharing images on a site, not sending them over to a printing press to be made into a publication. Compression in this instance should not be seen as a sacrifice of quality. Even if we may feel for our "art", wouldn't it be better if we balanced our options for the greater good (TESNexus and its members)?


Microsoft Paint, which by default is installed with your Windows OS is the simplest solution to compress the size of your images for uploading. The alternative to this are the commercial or free softwares that you may be using for advanced editing which provide more granular control.


For all intents and purposes relevant to uploading images efficiently on the Nexus, you should use them instead (assuming you are a current user of that particular software) to see whether you are able to push compression even further, significantly lowering filesize while at the same time ensuring the visual output's elements generally stay as intended.

Oblivion's Default Screen Captures

In relation to Oblivion, using the "Prt Scr" keyboard button generates your images into bitmaps. If you are using Fraps to generate them to other formats (especially if you intent to automatically generate it as .jpg to upload), check the filesize of that image to see whether it has been efficiently compressed.


In line with this article, 'Windows Picture and Fax Viewer' is not recommended for use as a converter to .jpg, as it apparently seems to do just that without efficient compression.



  • The following tutorials for the different softwares below are presented in a static manner; that is, I do not include my personal opinions as to how far you should push compression. After reading the above parts of the article you are now solely responsible for the choices you make to your images. I do not promote one software over the other, and the tutorial related to each software is intended to be used by those who already have them installed on their computers respectively. All tutorials are relative to saving/compressing images to JPEG only.

How to compress with Microsoft Paint

  1. Open your image in Paint
  2. On the menu tabs, click File --> Save As...
  3. A 'Save As' window pops up. Choose your desired save location and filename.
  4. Click on the box to the right of the text "Save as type" to see a drop down list.
  5. Choose "JPEG", then click the SAVE button.


Here is a visual guide:

Compressing your images before uploading2.gif

How to compress with Paint.Net (based on Ver 3.31)

  1. Open your image in Paint.Net
  2. On the menu tabs, click File --> Save As...
  3. A 'Save As' window pops up. Choose your desired save location and filename.
  4. Click on the box to the right of the text "Save as type" to see a drop down list.
  5. Choose "JPEG", then click the SAVE button.
  6. A 'Save Configuration' box pops up.
  7. Use the Quality slider or enter a value to adjust the rate of compression. On the left of this box you can preview your picture and final filesize if saved at whichever slider value you set it to.
  8. Click the 'OK' button.


Here is a visual guide:

Compressing your images before uploading3.gif

How to compress with GIMP (based on Ver 2.4.6)

  1. Open your image in GIMP
  2. On the menu tabs of your GIMP image window, click File --> Save As...
  3. A 'Save Image' window pops up. Choose your desired save name and save location.
  4. Click on the text called 'Select File Type'
  5. Scroll and choose "JPEG", then click the SAVE button.
  6. A 'Save as JPEG' box pops up.
  7. Select the checkbox 'Show preview in image window' to have a live preview. Note that you can move this 'Save as JPEG' box and previously mentioned 'Save Image' box away from your image window to get a clear preview of your image.
  8. Use the Quality slider or enter a value to adjust the rate of compression. The final output size is computed below the slider.
  9. Once done, Click on the 'Save' button


Here is a visual guide:

Compressing your images before uploading4.gif

Other notes: Before clicking on the 'Save' button, by clicking 'Advanced Options', you open up the advanced features. To learn more about these features, you can look at the 'References, Sources And Further Readings' section in this article for the link.

How to compress with FastStone Image Viewer (based on Ver 3.5)

  1. Open your image in FS Image Viewer. Your chosen image is the one highlighted with a border in the thumbnail browser.
  2. On the menu tabs, click File --> Save As...
  3. A 'Save As' window pops up. Choose your desired save location and filename.
  4. Click on the box to the right of the text "Save as type" to see a drop down list.
  5. Choose "JPEG Format", then click on the 'Options...' button.
  6. A 'File Format Options' window pops up.
  7. Adjust your picture preview size with the buttons between the two images.
  8. Use the Quality slider or enter a value to adjust the compression rate. On the lower portion of the window you can see your old and new filesize.
  9. Once done, click the 'OK' button. You will once again see the 'Save As' box. Click the 'Save' button.


Here is a visual guide:

Compressing your images before uploading5.gif

Other notes: If you want to learn more on some of the terms in this software's advanced options, you can look at the 'References, Sources and Further Readings section in this article for a link (More On The JPEG Format).

How to compress with Adobe Photoshop (based on CS3)

Basic Users:


  1. Open your image with Photoshop
  2. On the menu tabs, click File --> Save As...
  3. A 'Save As' window pops up. Choose your desired save location and filename.
  4. Click on the box to the right of the text "Format" to see a drop down list.
  5. Choose "JPEG", then click the SAVE button.
  6. A 'JPEG Options' window pops up.
  7. Under 'Format Options', select Baseline Optimized.
  8. Make sure the 'Preview' checkbox is checked.
  9. Use the Quality slider or enter a value (1-12) to adjust the rate of compression. Your final filesize can be found below the preview checkbox. You can also check your image viewer window to see a live preview.
  10. Once done, click the 'OK' button.

Here is a visual guide:

Compressing your images before uploading6.gif

Advanced Users:


Advanced users should instead use File --> Save For Web & Devices... option and start with one of the JPEG presets.

Author's End Notes

  • Another short consideration: In relation to bandwidth saving, if you already like the images the way they are (meaning you do not want to crop further), you should also think about resizing along with compression before uploading them. This is especially true for modders who primarily use their images as "enticement" for potential downloaders.


  • This article is fully intended to serve as an informational/educational piece, and is not intended to discourage members who were previously unaware of any of the points mentioned in it. TESNexus is a graphically intensive website if you consider user-generated content alone. If we as members use the site to upload our mods or images and continue doing so, there must be something about Nexus that we like; and if we like something, its worth taking better care of. A few simple steps in this instance could go a long way. In the words of LHammonds, "you could save TESNexus more bandwidth than you might know."


  • If you are somehow offended by the tone of this article which was intended to be as toneless as possible or just by informatives in general, you are kindly forewarned to not read any other articles that I may submit here in future.


  • Tutorials were made with the versions of software I personally use, and they may or may not be relevant to backdated versions of that particular software. Most likely though, it would not be a problem unless it were extremely backdated, in most cases a full 1.0 version difference. Adobe Photoshop should be relevant to all CS versions, and probably Photoshop 7.0 (if i remembered correctly). And if for some reason this should make a difference, all softwares are running on Windows XP.


  • Moderators please inform me if any part of this article breaks the Terms and Conditions of this site and I will amend it. Also, please advise on whether this article is better suited to be in another category other than 'General PC'

FAQ

Why didn't you include this and that software?!

I made these simple saving and compressing as jpeg tutorials for softwares that I personally use or have. If you find that there is a particular software that has a significant user base among the Nexus members that I've missed, feel free to PM me and I will update this article and include them given time. They should also preferably be freeware or trialware.


There is a broken link.

Please PM me and I will look into it, thanks.


You missed a step in the tutorial! Don't you see it?!

Kindly provide me with a solution or the missing step and I would be glad to amend the tutorial. The tutorials are meant to be simple and intuitive; apparent missing steps might just mean that they, on average, need not be explicitly pointed out : )


LOL! If these people are already using some of these advanced softwares, won't they already know this?!!

The tutorial section is meant to be static and informative- it was created without assumptions to a users' skillset with any particular software other than a prerequisite; that they at least know how to open their images in their relevant software. For those who already know it should be taken as a confirmation of knowledge; and for those who don't the gain of it.


Well, if you blahblahblah....the image uploaders will never see this, and I don't think this will make a difference. Nothing will change.

Your concerns are appreciated. I will personally make sure the information contained here does not go to waste, and follow up with other planned actions accordingly. Thank you.


ROFLCOPTER! Your own images aren't compressed before upload! What do you have to say to that?!

Capital! I shall certainly need to give my own article a good read through many times over then! In the meantime, you can read part 1 "The Quote".


Well... (long essay on disagreement and/or philosophy).

To each his own. I merely seek to pass on my limited learnt information to others; knowledge is empowerment.


Why do you care about the Nexus so much?

Because I can, I should, and I want to.

References, Sources And Further Readings

Personal tools