Progressive Image with Photoshop

HaRdY
HaRdY
Nov 5 · 2 min read

What’s Progressive Image?

Progressive Image is part of Lossless Image Optimization. Standard JPEGs are a baseline. So, it loads from top to bottom. While progressive images load from low quality to high in several passes.

Baseline JPEGs vs Progressive JPEGs Image

(video by cloudinary)

Generates Progressive JPEGs Image with Photoshop

  1. Open Image to Photoshop
Open image to photoshop (Image Credit to https://pixabay.com/)

2. Open Image to Photoshop and Go to File -> Save for Web

File -> Save for web option

3. Select image type to JPEGs

Change image type gif to JPEG

4. Check progressive options from the image type menu and save it’s.

check progressive option from the menu it

Benefits of Progressive Images

  1. Reduce page load time: Progressive images is part of image optimization. Google Page Speed, GTmatrix, and other tools are recommended a progressive.
  2. Reduce bandwidth cost: We can reduce bandwidth with lazy load and progressive based on web scroll.
  3. Improve UX: While the image is loading meanwhile the user can read relevant content. The image load with default width and height.
  4. Improve First Contentful Paint Times: Progressive image helps to reduce first contentful paint marks the time at which the first text or image is painted.
  5. Improve Time to Interactive: Time to interactive is the amount of time it takes for the page to become fully interactive.

HaRdY

Written by

HaRdY

UI Architect and Front-End Lover. Somewhere in between #000000 #FFFFFF.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade