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:

  • JPEG/JPG // The most common format for images.
  • PNG // The only format for images with a transparent background compar to JPEG has a larger file size.
  • GIF // Visual animation.

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 choise and contain’s 16.8 million combinations of colors.

If you choose 16 or 32 bit, the file size starting to increase because contain’s trillions of color choises.

 

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.

Image Dimensions

Review these image dimension best practices to optimize your images for web:

  • Look for your web platform’s image optimization recommendations. // Squarespace, recommends uploading hero images between 1500 and 2500 pixels wide.
  • Re-size your images only as large as your content width. // If your content on the page is 720 pixels wide, make your width to 720px, if you choose to upload a larger wide, then the image will automatically fit to those dimensions.
  • Remember to the aspect ratio. // Otherwise your image will be blur or distort.
  • Always save in pixels. // Inches should be saved for print materials.
  • Smaller dimensions. // If you reduce the aspect ratio of your image this will reduce the file size. That’s means quicker load time and better page speed.

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 everytime 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, retain’s 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!!!