Guide for Web Image Compression - Photoshop

To learn if your images needs a compression method, try to run a page speed test to learn the performance of your page before and after your changes.

Try Google Page Insight or Gtmetrix for your web tests.

Image File Type

There’s three basic images types for web:

Choosing your Image Program

Many professionals people trust Adobe Photoshop for image editing, but if you want a freebie program you can use Gimp or Affinity Photo. Any program do the same things!!

CMYK Vs RGB

CMYK stands for Cyan, Magenta, Yellow and Key, the pigments used in ink cartridges to form a full spectrum of colors. RGB stands for Red, Green and Blue. Refers to a system for representing the colors to be used on any display!! ( Like Phones, tablet, TV etc. )

8-Bit Vs 16-Bit

8-bit is the most common choice and contains 16.8 million combinations of colors. If you choose 16 or 32 bit, the file size starting to increase because contains trillions of color choices.

PPI Vs DPI

DPI stands for Dots Per Inch. If you have more color in one pixel, you have and better detail. The higher the DPI, the better tonality and the smoother the color blending. PPI, or Pixels Per Inch, is the number of pixels per inch on screen. A 72 PPI image on your computer will look the exact same as one with 1000 PPI, because your device has a set PPI within the screen.

For web-displayed choose 72 PPI. Check this article for more details - 99designs.

Compressing your Images for Web

Image compression is the process of decreasing the file size, which in turn speeds up the load time of the page. Lossy and lossless compression are the most common methods.

You can learn more here.

Lossy Vs Lossless Compression

Lossy compression takes away certain pixels in order to reduce the file size. In this case slight variations of colors were tossed out and the picture no longer blend naturally. If you apply higher ratios of compression you will see the image to degrade in quality. The quality keeps getting poorer and poorer every time the image is resized or compressed. Lossless compression, will reduce your image size without altering or deleting any of the original file’s data. If you have to adjust the image again after the compression, all your pixels and colors will remain. ZIP files, for example, use lossless compression. So what’s better, lossy or lossless? Typically lossy compression works best for large background JPEG images, producing a very small file size that loads very quickly. But Lossless compression, retains the quality of your image and still achieve a smaller file size.

“Save for Web” Compression

Programs like Photoshop will often offer a “Save for Web” export option, which does some of the file compression work for you. If you use the Photoshop try to export your content as JPEG and choose the quality between 60-70-80 to save your image. ( It depends the width size of the content )

Naming your Images

Always put your keywords into your image names for improved SEO. Use hyphens or underscores to separate the words in the file name and avoid question marks, percent signs and ampersands, which don’t load correctly and can cause unexpected behavior in image galleries. Remember to improve your overall SEO, it's important!!!