Search code examples
wordpresscompressiongimpimage-compression

Ways to reduce image size for wordpress without reducing quality


I am building a WordPress website, and the website runs perfectly, but the images don't load. I've reduced the image sizes from megabytes to kilobytes, but the images still do not load.

I used GIMP and www.iloveimg.com and a few other free online compressing tools, but they either do not reduce the images at all, or drastically reduce the quality.

Are there other free tools I can use to reduce these sizes but keep quality?


Solution

  • Depends on image content and size in pixels...

    • CGI (logos and graphics) that have flat uniform areas are best formatted as PNG (note: the "compression level" is just how hard the algorithm will try to compress things, there are rarely significant gains at the higher levels). PNG also avoids compression artifacts that never look good on the smooth edges of text. Two more things to know:
      • If your images are processed in high precision in Gimp (anything better that 8bit), Gimp will by default export a 16-bit PNG which is overkill, so specify one of the 8*formats explicitly.
      • If the image is color-indexed, Gimp will export a color-indexed PNG which is significantly smaller than the full RGB one.
    • Anything with a significant amount of photography should be saved as JPEG, above Q=75 the quality is fairly good. A big factor of output size in the "chroma subsampling" that you will find in Gimp's advanced options, "4:2:0" divides the file size by two compared to "4:4:4". You can also click the "Show preview in image window" to have a direct estimate of how big the file will be while you tweak the options.
    • You can also save everything as WebP (lossless, or lossy). This is the best way to support something like photography where you also want transparency. Support in modern browsers is good these days, but servers are not always configured to serve these properly as images.