Encyclopaedia Metallum: The Metal Archives

Message board

* FAQ    * Search   * Register   * Login 



Reply to topic
Author Message Previous topic | Next topic
Alhadis
Madder Max

Joined: Fri Sep 05, 2008 8:35 am
Posts: 4010
Location: Australia
PostPosted: Fri Jan 29, 2016 4:20 pm 
 

I see this more often than I'd like... tiny album covers and grainy band logos squashed into band pages because the uploader didn't know how to reduce an image's filesize. More often than not, these images are easily compressed without reducing them to a bokeh piece.

DISCLAIMER:
If any of the headings appear illegible, download and install these fonts. Seriously. This isn't an option.

Table tl;dr of Contents:
  1. Don't use "File → Save as..."
  2. Use "File → Save for web & devices"
  3. Select the right format
  4. Get a stripper
  5. Other considerations
_________________
Buy shit.

Top
 Profile  
Alhadis
Madder Max

Joined: Fri Sep 05, 2008 8:35 am
Posts: 4010
Location: Australia
PostPosted: Fri Jan 29, 2016 4:22 pm 
 

Image
If you see this at any point in the save process, you've done it wrong:

Image

Never ever, EVER save an image for web-delivery with Photoshop's "Save as..." command.

This feature is so irredeemably useless as to be worthy of Adobe pulling JPEG and PNG as options from the file-formats list. I'd even go as far as suggesting a sharp metal instrument be directed through the forehead of whatever developer insists on keeping those formats there as options.

If you save an image this way, Photoshop embeds a thick, greasy wad of program-specific data inside it, bloating its size as much as 25-30 KBs. That's at least half the maximum permitted filesize for images. Too often I see ~49 KBs images uploaded at an absurd 200×200 size because the author exported the image this way. Here are some gems I've found - click on each to see exactly what's inside the file.

Image Image Image

Since none of you won't, let me highlight the most pertinent bit:

Spoiler: show
Image
And that's not even all that's bloating it. Check out the last example and see for yourself.

That's right. There's an image inside one of those images. One nobody even sees... AND it's bigger than the fucking image it's embedded inside.

I think you get the point.
_________________
Buy shit.

Top
 Profile  
Alhadis
Madder Max

Joined: Fri Sep 05, 2008 8:35 am
Posts: 4010
Location: Australia
PostPosted: Fri Jan 29, 2016 4:23 pm 
 

Image
Under the File menu, there's an option called Save for web & devices. Newer versions of Photoshop shortened it to just Save for web, and the latest version even moved it to a submenu (where it now says "Legacy", but it still does the same thing). Whatever. You'll know it when you see it.

Anyway, when opened, you'll find yourself staring at this:

ImageImage

Make sure the options on the right are set to the following values:
  • Convert to RGB: ✅ On
  • Preview: "Internet Standard RGB (No colour management)"
  • Metadata: "None"

Finally, make sure the Optimised tab in the top-left corner is selected. This shows you how your image will look on the web after it's saved.

Image

In the bottom-left corner, you'll find the filesize of the exported image using the current quality/format settings. Keep a close eye on this as you play with the quality settings. Seriously.
_________________
Buy shit.

Top
 Profile  
Alhadis
Madder Max

Joined: Fri Sep 05, 2008 8:35 am
Posts: 4010
Location: Australia
PostPosted: Fri Jan 29, 2016 4:24 pm 
 

Image

PNG-24
If the image has a limited colour palette (2-3 colours), simple details, and is free of compression artefacts, it should probably be saved as a PNG image.

Some examples, all of which sit under the 50 KB mark (seriously):
Spoiler: show
Image
Image
Image


Photoshop actually isn't very good at saving PNGs at optimum filesize. Thankfully, there's a free tool everybody should be using called TinyPNG that performs insane compression on PNG images with virtually zero loss of visible quality. The reduction in filesize varies based on the image's content, but you can expect an 80 KBs PNG to be squashed down to ~45 KBs (roughly). Experiment, the site won't headbutt you for uploading too many images. It's free! (One has to wonder what they're getting out of it...)

Of course, this part is pretty much hit-and-miss... and sometimes, you won't be able to hit the 50 KBs mark, because an image just has too much detail. In which case, you'll need PNG-8 or GIF.

Image
PNG-8 / GIF
Suitable for:

PNG-8 and GIF are both similar in how they compress images, but PNG-8 generally produces better filesizes... usually. Occasionally, it's actually the other way around. Depends on the image's content, of course.

Make sure the GIF/PNG-8 settings are set to these:

   Image

  • No dithering
  • No transparency:
    Don't be tempted to make PNG-8/GIF images transparent; they won't look as good as PNG-24 images. Unless, of course, the original image you're working with already looks like that.
  • Matte:
    Leave it at pure white (#FFFFFF in the colour picker)
  • Interlaced: OFF
  • Embed Colour Profile: OFF
  • Colour reduction algorithm:
    "Perceptual" or "Adaptive" are usually best. Quality and filesize will vary considerably based on the image's content, the algorithm you choose, and the colour depth... so flip between the two and see which gives more accurate results. Perceptual tends to work better for colours, whereas adaptive often works better for greyscale/black-and-white images. YMMV, though.

Image
JPEG
Suitable for:
  • Literally anything that doesn't fit the above two formats.
  • Photographs
  • Paintings

Two important things to remember about saving in JPEG format:
  1. Always make sure it's saved as a progressive JPEG. Even if it's not a progressive metal band (lel?)
  2.  
    Image

Don't get too attached to an image's quality: JPG is a lossy compression format, so it's designed to throw out quality in return for smaller files. How much quality gets thrown out depends on its contrast.

Low-contrast images compress much better in JPG format. For instance, this album cover was saved at 59% quality, 1167×1200 resolution, and it only weighed 47.41 KBs.

Conversely, images with greater contrast are harder to save. Shoot for 620×620, and crank the quality until the filesize in the bottom-left corner pops the 50 KBs limit. If it looks like shit, shrink the image down by 20px (so the second attempt would be 600×600). Repeat the procedure until you get an image down to the best possible size while compromising as little quality as you can. The results are often unimpressive. Melechesh's Enki is a good case of an image that just has too much detail to keep at a bigger res.

Knowing what size and quality to save a JPEG at takes practice, but you'll get a sixth sense for it (trust me).
_________________
Buy shit.

Top
 Profile  
Alhadis
Madder Max

Joined: Fri Sep 05, 2008 8:35 am
Posts: 4010
Location: Australia
PostPosted: Fri Jan 29, 2016 4:25 pm 
 

Image
Images you encounter on the web often have useless metadata embedded inside them that inflate their filesize. This can be safely stripped with a dedicated tool:

  • Windows
    Have used this one for years, never had a single problem with it.
     
  • Mac OS
    Haven't tried this, YMMV.
     
  • Programmer's approach
    `exiftool $@ "-All=" -overwrite_original filename.jpg;`
    My preferred approach, obviously, but not one I expect anybody here to follow. :p

Anyway. Irrespective of how you choose to strip metadata from images, you'll find that having a tool on-hand to do so is VERY helpful. Hell, you might find that an image that seems too big actually isn't.
_________________
Buy shit.

Top
 Profile  
Alhadis
Madder Max

Joined: Fri Sep 05, 2008 8:35 am
Posts: 4010
Location: Australia
PostPosted: Fri Jan 29, 2016 4:25 pm 
 

Image
The following points are helpful to keep in mind, but not mandatory.

Black-and-white palettes
If you're saving a greyscale image as a PNG or GIF, make sure to run Photoshop's Desaturate tool before saving. Even if it looks achromatic, the pixels may be holding additional colour data that isn't needed. This extra data can potentially skew the colour reduction process, which affects the result's accuracy and its size.

Image
Not true black (or white, for that matter)
When saving an image as an indexed PNG (PNG-8) or GIF, Photoshop will try and smooth pixels together by averaging similar colours. This sometimes results in pure black or white becoming a few invisible shades brighter or darker than their polarised counterparts:

ImageImage

Make sure to set the palette's darkest colour to pure black (#000000). Not every device displays dark shades of grey in a uniform manner, making it possible for an almost-black background to look like a dark grey-box against an actual black background.
_________________
Buy shit.

Top
 Profile  
Peyp
Mallcore Kid

Joined: Mon May 25, 2015 1:16 am
Posts: 19
Location: United States
PostPosted: Mon May 30, 2016 1:34 pm 
 

Thanks so much for this.
_________________
A Taiwanese Metalcore band that barely knows English wrote:
When I was child they had come
In my brain They dwelt inside
I whispered to you will
and severed you all nerve
Then linked the endless loop
and told me If you could
This doesn't make sense even in context

Top
 Profile  
Display posts from previous:  Sort by  
Reply to topic


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

 
Jump to:  

Back to the Encyclopaedia Metallum


Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group