Image optimization
Add to favorites
Optimize your images to improve performance.

UI Design Handbook
1
UI Design Aesthetic
3:52
2
Design for accessibility
1:59
3
Localization
1:14
4
Color Selection
5:06
5
Pick Fonts
3:35
6
Font Managers
2:06
7
Icon Organizer
2:59
8
UI Sound Design
4:25
9
Stock Images
1:29
10
Image optimization
1:46
11
Illustrations
1:38
12
Realistic Mockups
2:47
13
UI 3D Assets
2:29
14
Introduction to Animations
5:09
15
UI Animation Resources
1:45
16
Apple Watch Faces
2:06
17
Designing for Apple Watch
4:24
18
Designing for Apple TV
1:58
19
Design for Game Center
3:43
20
Designing for CarPlay
1:37
21
Designing App Clips
7:05
22
Designing Widgets
3:29
23
Design Systems
1:27
24
UI Kits
3:33
25
Prototyping Tools
3:22
26
Voice prototyping
2:14
27
Prototyping with Code
3:01
28
Turn your Designs into Code
2:18
29
Version Control Tools
2:12
30
Developer Handoff
1:05
31
Color Theory
10:35
32
Dark Interfaces
3:53
33
Icons
10:32
34
Background Patterns
5:41
35
Typographic Scales
2:40
What is image optimization?
Image optimization refers to adding high quality images with the right format, dimensions, resolutions as well as size while ensuring that the image size is not too big. Doing this will help improve the time it takes to load a page which in turn will improve the performance.
Use the right format
Before we start with optimizing the images, it's best to ensure that you've chosen the best image format. PNG images have a higher quality but this comes with a bigger file size. JPEG is best suited for photography and most of the images, especially when the image doesn't need to be transparent. GIF is the right format when you want to share short videos, avoid uploading .mp4 footage.
SVG
Scalable Vector Graphics, popularly know as SVG is an XML based vector image format. SVGs are highly responsive, resolution independent as well as smaller in size compared to other formats which makes these ideal for the web. SVG files can be edited in graphic editing program and even text editors.
PDF stands for Portable Document Format and is used to display documents as well as graphics in the best manner possible. PDFs work well regardless of operating system, device or browser. Most design tools allow you to export the design files as PDF. PDFs are commonly used in print or when you'd like to display the document or the graphic on the web.
Use the right dimensions
It is recommended to export your assets in the same size that you will require. One common mistake is to use a larger image than what you need. When you resize an image, please keep in mind to keep the proportions so that you don't end up distorting it.
ImageOptim
ImageOptim is a free tool that can help you optimize JPG and PNG images.
Tinypng
Tinypng is a really good tool to optimize JPG and PNG images. You just have to drop an image and as soon as it's done processing, a download link is provided.
Squash
Squash is a simple, powerful app for compressing and converting images for the web and more.
JPEGMini Pro
This app really does the work, it can optimize any JPG file perfectly.
Aerate
Aerate does a really good job at optimizing JPG and PNG images.
How optimize your images with Aerate
It is a good practice to optimize your images. As we mentioned before, there are many tools that can help you. For this case, we will use Aerate because it does a really good job at optimizing JPG and PNG assets but feel free to use your favorite tool. As you can see for this exercise we have an JPEG image with a size of 3.7 MB.
Once you have the image or images you want to optimize, open Aerate app and just drag the images to the compress area. You can even drag entire folders filled with images. Here, we will drag our image and just wait a couple of seconds for it to render.
After a few seconds you will witness that the image size was reduced significantly. From 3.7MB to 635 KB without compromising the image resolution.
If you are happy with the result, you can save the new version of the image or after you save this new version, you can use it to try reducing the size of the image one more time. In our case we are happy with the results so we will just save the image.
Conclusion
You can use JPEG for almost any image, except if you need an image with transparency; for those cases, the right choice will be PNG. Use GIF only if it is necessary to add some small videos. You can always use any of these optimization apps to help you have a better render of your assets without compromising the image quality.
Learn with videos and source files. Available to Pro subscribers only.
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Browse all downloads
1
UI Design Aesthetic
Learn about UI design aesthetics.
3:52
2
Design for accessibility
Learn about accessibility in design.
1:59
3
Localization
Read more about the importance of localization.
1:14
4
Color Selection
Select colors for your projects
5:06
5
Pick Fonts
Select the most suitable fonts for your design.
3:35
6
Font Managers
Manage your fonts more efficiently.
2:06
7
Icon Organizer
Organize your icons in a better way.
2:59
8
UI Sound Design
Importance of sound in UI design
4:25
9
Stock Images
Find the right images for your UI
1:29
10
Image optimization
Optimize your images to improve performance.
1:46
11
Illustrations
Add illustrations to your design project
1:38
12
Realistic Mockups
Resources to add realistic mockups to your design.
2:47
13
UI 3D Assets
Work with 3D assets in your design projects
2:29
14
Introduction to Animations
Learn about basic animations in UI design.
5:09
15
UI Animation Resources
List of tools and resources for UI animation.
1:45
16
Apple Watch Faces
Create customizable watch faces for the Apple watch
2:06
17
Designing for Apple Watch
Getting started with Apple Watch Design
4:24
18
Designing for Apple TV
Learn the basics steps to design for Apple TV
1:58
19
Design for Game Center
Learn how to design for Game Center
3:43
20
Designing for CarPlay
Learn the basics of designing for CarPlay
1:37
21
Designing App Clips
Learn how to design app clips for iOS
7:05
22
Designing Widgets
Design widgets for your applications.
3:29
23
Design Systems
Create design systems for a better workflow.
1:27
24
UI Kits
Learn more about UI Kits and where to find them.
3:33
25
Prototyping Tools
Learn about prototyping tools.
3:22
26
Voice prototyping
Take a look at voice prototyping.
2:14
27
Prototyping with Code
Read more about prototyping with code.
3:01
28
Turn your Designs into Code
Learn how to turn your Designs into Code.
2:18
29
Version Control Tools
Share and synchronize your files with your team
2:12
30
Developer Handoff
Learn more about developer handoff.
1:05
31
Color Theory
Understand color theory to select the best color themes for your application.
10:35
32
Dark Interfaces
Add dark mode to your application.
3:53
33
Icons
Learn more about UI icons.
10:32
34
Background Patterns
Create beautiful background patterns.
5:41
35
Typographic Scales
Learn more about typographic scales.
2:40
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Daniel Nisttahuz
Senior Product Designer at Design+Code
Motion Designer @Design+Code
7 courses - 12 hours

UX Design Handbook
Learn about design thinking, with exercises. Free tutorials for learning user experience design.
2 hrs

UI Design Handbook
A comprehensive guide to the best tips and tricks for UI design. Free tutorials for learning user interface design.
2 hrs

Create a Promo Video in After Effects
In this course we will show you how to create a promo video using After Effects.
2 hrs

Animating in Principle
Learn how to animate interactive user interfaces from Figma to Principle. Get to design the app flow for multiple screens, interactions, and animations. At the end of the course, you will have a beautiful prototype that you can share with stakeholders.
1 hrs

Video Editing in ScreenFlow
Learn different techniques, transitions actions and effects to edit a video using Screeflow
1 hrs

Motion Design in After Effects
Learn animation and motion design with After Effects
3 hrs

Learn iOS 11 Design
Learn colors, typography and layout for iOS 8
1 hrs