Memuat
Memuat
Watch every step above performed live, with English narration.
0 plays
Class book
Page 1 / 5
Cover: Photoshop Class #93: Export As: JPG, PNG, and WebP for Web
Click a page or use ◀ ▶ to turn · swipe on mobile · to enlarge
Want to go deeper?
Join one of our courses or ask us directly on WhatsApp.
Picked from the software, topic, and level of “Photoshop Class #93: Export As: JPG, PNG, and WebP for Web”.
Other ways we can help with Adobe Photoshop.
Learn with a mentor
Scheduled Graphic Design courses with live guidance and a certificate.

Course/Training Adobe Photoshop — Photoshop for Photographers
★ 5.0 (4)

Course/Training Adobe Photoshop — Private Lessons: Graphic Design with Adobe Photoshop
★ 5.0 (3)

Course/Training Photoshop — Adobe Photoshop From Basic to Ultimate
★ 5.0 (3)
Have it built for you
No time to learn Adobe Photoshop? Our team can do the project for you.

Development Service: JasaAdobe Photoshop CC 2020
★ 5.0 (5)

Development Service: Adobe Photoshop — Digital Imaging with Adobe Photoshop
★ 5.0 (5)

Development Service: Graphic Design and Photo Editing Using Adobe Photoshop CC
★ 5.0 (4)
Get notified about new Adobe Photoshop classes
At most one email a week. Unfollow anytime with one click.
The full narration of this video. The current sentence is highlighted while the video plays; click any sentence to jump there.
Here is the final result of this episode, three versions of the butterfly photo in JPG, PNG, and WebP formats, complete with file size comparisons and guidance on when to use each format. Let's get started. Hello, welcome back to the complete Adobe Photoshop series from Cerdas Inovasi Digital. We're entering the final module: Export, Workflow, and Final Project. This episode covers three image formats for the web: JPG, PNG, and WebP, as well as how to choose the right one.
Open the butterfly photo.
Select File > Export > Export S, or press Alt Shift Ctrl W.
On the left, there's a preview, and on the right, there are format, quality, and size settings, as well as an estimated file size below the preview.
Select JPG with quality 80.
JPG uses lossy compression, discarding details that are almost invisible to the eye, making the photo file smaller.
This is the most common format for photos.
Switch to PNG.
The file size jumps several times, because PNG does not discard any data at all. PNG is suitable for logos, icons, screenshots, and images with transparency, not for photos.
Switch to WebP.
At similar quality, WebP is often 30% smaller than JPG, and also supports transparency.
Almost all modern browsers support it, making it suitable for websites.
Export all three versions to the same folder and compare the file sizes in File Explorer.
For quick graphics, there's also a quick export SPNG in the File > Export menu.
Done. We've used Export S, compared JPG, PNG, and WebP, and understood when to use each format. In the next episode, we'll optimize file size for websites and marketplaces.
Need to edit product photos for marketplaces, retouch photos, design posters, or create social media content? Cerdas Inovasi Digital provides photo editing and graphic design services, as well as Photoshop courses from beginner to advanced. Want to master the entire series? 102 episodes from the interface to the final project? All episodes, complete with step-by-step PDF guides, source photos, and layered PSD files, are available to premium tutorial subscribers. Subscribe starting at Rp69.000 per month, save 28% with the 12-month package, or pay once Rp999.000 for lifetime access. Want just one class? Buy individual classes with lifetime access. Subscribe now at the premium page cerdasinovasidigital.com Contact us via WhatsApp, or visit cerdasinovasidigital.com Thank you for watching, see you in the next episode.
Type a question or keyword; we find the part of this episode that explains it and jump the video there.
Notes are saved with the current video time and are only visible to you.
Stuck on a step? Ask here; the instructor and other learners can answer.
No questions yet.

Cerdas Inovasi Digital Team
Software developers, BIM & 3D engineers, and AI practitioners
We build software, BIM models, games and AI automations for clients every day, and turn that hands-on work into step-by-step classes: every step is shown on screen and comes with a PDF guide you can keep.
See our clients →