Help:Optimizing Sprites

Optimization, as it is used here, is the word used to describe the process of reducing file sizes.

On webpages, it is important to keep optimization in mind. Text is received by the browser very, very quickly. Media, on the other hand can take much, much longer. On high traffic sites, like on your favorite game's wiki, small improvements to file sizes can make a large impact on page loads and positive user experience. Frequently on this wiki, if an image is taking too long, it may not be displayed at all (which is why you may not see all the images below). For reasons like this, contributors are encouraged to update images with large file-sizes with optimized ones of equal quality.

As far as optimization goes, pixel art has it easy. While there is a spectrum of optimization (beyond 'good' and 'bad'), the details of why and what that means is beyond the purpose of this guide. Just know that because everything is pixel art, you can get away with some ridiculously small images without losing any image quality. (If you want to know more, look up color indexing)

File formats

Wikis will allow you to upload images in one of three image formats: JPEG, GIF, and PNG. The extensions 'jpeg' and 'jpg' are interchangeable, and capitalization is irrelevant in most cases (lower-case extensions are the stylistic standard on this wiki).

Lets talk about these formats in a little more detail:

Examples of Good/Poor Image Optimization

JPG	GIF	PNG
Poorly Optimized Images:
7338 bytes	1396 bytes	4047 bytes
Well Optimized Images:
1558 bytes	564 bytes	625 bytes

JPG

• Is not able to have transparency
• Creates 'artifacts' (distortions and errors in the image) when optimized
• Does not use indexed color
• Popularly used for creating moderately small photo-image files

GIF

• Supports binary transparency
• No artifacts
• Strictly indexed color
• Capable of animated images
• Falling out of general use
• Very small size

PNG

• Highly versatile image optimization
• No artifacts
• Supports gradient alpha channel (transparency)
• Capable of indexed color
• Smaller than GIF when using more colors
• Increasingly popular
• Notoriously large files when not optimized

As you can see in the table to the upper-right, JPGs are not the right file format for our uses: they don't support transparency, create artifacts, and can have unnecessarily large sizes when without artifacts. GIFs are a good option for our uses, as are PNGs. Images in the game files are PNGs, so it's common to see imported game assets in PNG format on this wiki.

Remember: you can't update a file with another file-type without creating a distinct asset; requiring links to be manually re-written, and leaving a file-page orphaned.

Optimizing Files

Photoshop

Photoshop has some pretty extensive optimization capabilities, most of which are beyond the scope of our uses. Here are the explicit instructions on how to save optimized Starbound sprites.

1. With the image you want to save open, properly sized, and cropped, select File → Save for Web & Devices...
2. A new window will open
3. This window has a few different layouts, for consistency select the Optimized tab near the top left of the window if not currently active
4. Near the top right, below the Preset drop-down menu is another drop-down menu; select GIF or PNG-8 from the list (the PNG-8 image format is preferred on this wiki for consistency)
5. Make sure the Colors drop-down is 32 (you shouldn't need more than 32 colors)
6. The Color Table should populate with the colors found in the image (this should be less than 32 too)
7. Make sure Transparency is checked
8. Click Save and remember where you save the file

Gimp

--TODO--

Paint.NET

--TODO--

File-type etiquette

When saving an image, check to see if the image already exists on the wiki. If you are updating/replacing an image on the wiki, make sure it has the same file-name and file-format.

If you must update the image with a different file-format, it is absolutely necessary to update the pages that link to that image. You can check what pages link to an image in the File usage section of that image. All pages on that list link to the image you are replacing, and must be manually updated to the new file-format.

Once the pages have been updated, update the original image's page (click the edit tab up top) with a link to the new image location. Then consider flagging the image for deletion with the {{Delete|Reason}} template.

Follow our guide on adding images for detailed information on how to upload an image.