Skip to content

Reduced .png image sizes with pngquant saving 60MB

One really easy win for site load times is being diligent about .png size reduction. I simply ran:

pngquant -f --skip-if-larger --ext .png --speed 1 ./**/*.png

while inside the /source/images folder.

I've used pngquant many times in the past and have never been able to tell the difference between the output and the original. The next step in image optimization is reducing the image sizes to the actual rendered size of the image on the page. Many times you have a full quality image but need only half the pixels, but this is a good start.

Why do this? Images are usually a large portion of load times for a web site. Reducing image size can usually speed this up a fair bit especially for mobile users.

I welcome the reviewer to look through a sample of the changed png files to see if they can spot a difference in quality. The largest difference in a single folder was in the blogimages folder which went from 40M to 28M.

$ du -h -d1 .
 48K	./10k
440K	./2_6
656K	./2_7
328K	./2_8
760K	./2_9
616K	./3_0
304K	./3_1
672K	./404
1.2M	./4_0
688K	./4_1
632K	./4_2
704K	./50th
768K	./5_0
500K	./5_2
188K	./5_3
128K	./5_4
1.7M	./6_0
500K	./6_1
488K	./6_2
1.5M	./6_3
608K	./6_4
668K	./6_5
2.0M	./6_6
668K	./6_7
132K	./6_7_ee
1008K	./6_8
876K	./6_9
2.9M	./7_0
816K	./7_1
356K	./7_10
 40K	./7_10_5
348K	./7_11
816K	./7_12
488K	./7_13
820K	./7_14
1.5M	./7_2
512K	./7_3
732K	./7_4
 84K	./7_5
676K	./7_6
1.1M	./7_7
248K	./7_8
780K	./7_9
1.2M	./8_0
1.6M	./8_1
1.4M	./8_10
5.8M	./8_11
1.3M	./8_2
560K	./8_3
1.9M	./8_4
1.8M	./8_5
276K	./8_6
784K	./8_7
900K	./8_8
1.1M	./8_9
628K	./animated
4.0K	./applications
392K	./bb
296K	./bg
 40M	./blogimages
876K	./brief-history-of-gitlab-workhorse
1.1M	./ci
 28K	./ci-yml
124K	./ci_1_0
404K	./ci_2_0
 48K	./ci_2_1
140K	./ci_2_2
624K	./ci_3_0
1.2M	./ci_4_0
 80K	./ci_4_1
416K	./ci_4_2
1.5M	./ci_4_3
960K	./ci_5
772K	./ci_5_1
388K	./ci_5_4
 32K	./commitsprod
392K	./community
732K	./container-registry
512K	./create_files
800K	./cycle-analytics
432K	./direction
4.0K	./downloads
136K	./drbd
312K	./feature_approval
1.2M	./feature_branded_login
1.1M	./feature_groups
208K	./feature_ldap_sync
1.5M	./feature_page
300K	./features
 44K	./first_time_contribution
320K	./forum
164K	./future_ci
 16K	./gdk
1.3M	./git_flow
1.6M	./githost
344K	./gitlab-com
 28K	./gitlab_bugs
 12K	./gitlab_ci
 60K	./golden_gear_medal
2.6M	./handbook
264K	./home
 80K	./how_to
256K	./icons
288K	./issue-boards
1.0M	./making_gitlab_faster
284K	./markdown-guide
168K	./mattermost
204K	./merge_marshal
1.0M	./navigation-redesign
228K	./new_logo
124K	./organizations
168K	./pcf
 11M	./press
116K	./pricing
 40K	./products
372K	./quayio
 84K	./recurly
1.6M	./redesign
1.5M	./remotely
484K	./resellers
 32K	./runner_1_1
1.6M	./screens
1.4M	./screenshots_8.0
3.9M	./social-media-assets
2.6M	./stock
1.4M	./summitams2015
  0B	./summitaustin
672K	./support
 19M	./team
224K	./testimonials
232K	./tower_2_3
6.6M	./tweets
 27M	./unsplash
228K	./user_preferences
 12K	./version_check
206M	.

Is now:

$  du -h -d1 .
 24K	./10k
140K	./2_6
184K	./2_7
108K	./2_8
244K	./2_9
188K	./3_0
 96K	./3_1
672K	./404
384K	./4_0
200K	./4_1
188K	./4_2
696K	./50th
240K	./5_0
152K	./5_2
 56K	./5_3
 36K	./5_4
496K	./6_0
132K	./6_1
132K	./6_2
444K	./6_3
224K	./6_4
360K	./6_5
752K	./6_6
212K	./6_7
 36K	./6_7_ee
304K	./6_8
324K	./6_9
2.9M	./7_0
324K	./7_1
356K	./7_10
 16K	./7_10_5
348K	./7_11
300K	./7_12
488K	./7_13
436K	./7_14
744K	./7_2
444K	./7_3
200K	./7_4
 84K	./7_5
168K	./7_6
488K	./7_7
248K	./7_8
380K	./7_9
1.1M	./8_0
1.6M	./8_1
812K	./8_10
5.4M	./8_11
828K	./8_2
516K	./8_3
1.7M	./8_4
1.3M	./8_5
276K	./8_6
620K	./8_7
468K	./8_8
824K	./8_9
628K	./animated
4.0K	./applications
392K	./bb
284K	./bg
 28M	./blogimages
876K	./brief-history-of-gitlab-workhorse
396K	./ci
 28K	./ci-yml
 36K	./ci_1_0
116K	./ci_2_0
 16K	./ci_2_1
 40K	./ci_2_2
156K	./ci_3_0
344K	./ci_4_0
 28K	./ci_4_1
220K	./ci_4_2
408K	./ci_4_3
372K	./ci_5
204K	./ci_5_1
124K	./ci_5_4
 12K	./commitsprod
392K	./community
208K	./container-registry
164K	./create_files
332K	./cycle-analytics
400K	./direction
4.0K	./downloads
 52K	./drbd
 92K	./feature_approval
368K	./feature_branded_login
308K	./feature_groups
 68K	./feature_ldap_sync
1.4M	./feature_page
128K	./features
 16K	./first_time_contribution
 96K	./forum
 52K	./future_ci
8.0K	./gdk
384K	./git_flow
432K	./githost
200K	./gitlab-com
 12K	./gitlab_bugs
8.0K	./gitlab_ci
 28K	./golden_gear_medal
1.1M	./handbook
148K	./home
 80K	./how_to
164K	./icons
120K	./issue-boards
392K	./making_gitlab_faster
284K	./markdown-guide
 52K	./mattermost
 80K	./merge_marshal
340K	./navigation-redesign
228K	./new_logo
124K	./organizations
168K	./pcf
 11M	./press
116K	./pricing
 20K	./products
372K	./quayio
 80K	./recurly
660K	./redesign
628K	./remotely
472K	./resellers
 12K	./runner_1_1
488K	./screens
412K	./screenshots_8.0
2.7M	./social-media-assets
2.6M	./stock
1.4M	./summitams2015
  0B	./summitaustin
212K	./support
 15M	./team
184K	./testimonials
232K	./tower_2_3
5.0M	./tweets
 25M	./unsplash
 88K	./user_preferences
 12K	./version_check
143M	.

Merge request reports