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)
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:
|Poorly Optimized Images:|
|7338 bytes||1396 bytes||4047 bytes|
|Well Optimized Images:|
|1558 bytes||564 bytes||625 bytes|
- Is not able to have transparency
- Creates 'artifacts' (errors) when optimized
- Does not use indexed color
- Popularly used for creating moderately small photo-image files
- Supports binary transparency
- No artifacts
- Strictly indexed color
- Capable of animated images
- Falling out of general use
- Very small size
- 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.
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.
- With the image you want to save open, properly sized, and cropped, select
Save for Web & Devices...
- A new window will open
- This window has a few different layouts, for consistency select the
Optimizedtab near the top left of the window if not currently active
- Near the top right, below the
Presetdrop-down menu is another drop-down menu; select
PNG-8from the list (the
PNG-8image format is preferred on this wiki for consistency)
- Make sure the
32(you shouldn't need more than 32 colors)
Color Tableshould populate with the colors found in the image (this should be less than 32 too)
- Make sure
Saveand remember where you save the file
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
Follow our guide on adding images for detailed information on how to upload an image.