Encyclopaedia Metallum: The Metal Archives

Message board

* FAQ    * Register   * Login 



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

Joined: Fri Sep 05, 2008 8:35 am
Posts: 4014
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

Top
 Profile  
Alhadis
Madder Max

Joined: Fri Sep 05, 2008 8:35 am
Posts: 4014
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. Run the image through an EXIF reader to 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.

Top
 Profile  
Alhadis
Madder Max

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

Image
Under the File menu, look for an option called "Save for web & devices", or in recent versions, "Save for Web (Legacy)". 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.

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.

Top
 Profile  
Alhadis
Madder Max

Joined: Fri Sep 05, 2008 8:35 am
Posts: 4014
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.

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:
  • Images with sharp details but too many colours (more than 3)
  • Images with a limited colour palette but considerable detail
  • PNG-24 images that you'd like to keep at their original size without shrinking them

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:

  • 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.
  • 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

Always make sure it's saved as a progressive JPEG, too. It'll squeeze out a few extra bytes of filesize (in most cases).

Don't get too attached to an image's quality, either. JPEG is a lossy compression format: it's designed to throw out quality in order to generate smaller filesizes. 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.

Top
 Profile  
Alhadis
Madder Max

Joined: Fri Sep 05, 2008 8:35 am
Posts: 4014
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.

Top
 Profile  
Alhadis
Madder Max

Joined: Fri Sep 05, 2008 8:35 am
Posts: 4014
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:

Image

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.

Top
 Profile  
Peyp
Metal newbie

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

Thanks so much for this.
_________________
Witchrot wrote:
Due to the unfortunate reality of our guitarist fucking my girlfriend of almost 7 years WITCHROT will be taking an extended hiatus. I however will continue the band in another space and time... Thanks for the support, stay heavy. Also our drummer died...


RIP DIAMHEA

Top
 Profile  
islwnd
Mallcore Kid

Joined: Tue Oct 28, 2014 11:46 am
Posts: 19
PostPosted: Wed May 17, 2017 2:48 am 
 

GIMP compresses JPEG's better than Photoshop.
Image resizing (choose Sinc-Lanczos3)
RGB/Grayscale/Indexed modes (for Grayscale, first use Color>Desaturate>Average)
Image saving

If you want even better compression, use MozJPEG (command line manual).

Best indexed/paletted PNG: PNGoo for Windows (Linux/Mac pngquant GUI's).
Losslessly shrink any PNG: FileOptimizer for Windows (use it after PNGoo - others for Linux/Mac).
_________________
Takuya Tsutsui
R.I.P. 2008-06-25

Top
 Profile  
Clint_metalcdratings
Mallcore Kid

Joined: Fri Apr 15, 2005 12:41 am
Posts: 16
PostPosted: Wed Apr 19, 2023 4:21 pm 
 

I posted this in the 'Suggestions and Complaints' section, but this topic might be better ...

I recently added my physical CD collection to DISCOGS and have already added (contributed) over 100 releases that weren't on the site, but they have a general rule because of copyright worries: Don't use the internet for album cover-artwork images.
Therefore, the site has some poor-quality scan/photo images and, in my opinion, it shouldn't be this way because of the high-quality images already online (like the images at M-A). New scans/photos also take a lot of time that I'd rather spend adding info to the release pages.

Is there an administrator on this forum who could grant me permission to copy album cover-artwork images from Metal-Archives to DISCOGS? I emailed the webmaster yesterday, so they might respond, but I'm hoping some of you can help with this too. I believe that if I'm granted permission, it resolves the copyright worry.

Thanks,
_________________
Clint

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


Who is online

Users browsing this forum: No registered users and 12 guests


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