[{"data":1,"prerenderedAt":792},["ShallowReactive",2],{"/en-us/blog/simple-trick-for-smaller-screenshots":3,"navigation-en-us":35,"banner-en-us":435,"footer-en-us":445,"blog-post-authors-en-us-James Ramsay":687,"blog-related-posts-en-us-simple-trick-for-smaller-screenshots":701,"assessment-promotions-en-us":743,"next-steps-en-us":782},{"id":4,"title":5,"authorSlugs":6,"body":8,"categorySlug":9,"config":10,"content":14,"description":8,"extension":24,"isFeatured":12,"meta":25,"navigation":26,"path":27,"publishedDate":20,"seo":28,"stem":32,"tagSlugs":33,"__hash__":34},"blogPosts/en-us/blog/simple-trick-for-smaller-screenshots.yml","Simple Trick For Smaller Screenshots",[7],"james-ramsay",null,"unfiltered",{"slug":11,"featured":12,"template":13},"simple-trick-for-smaller-screenshots",false,"BlogPost",{"title":15,"description":16,"authors":17,"heroImage":19,"date":20,"body":21,"category":9,"tags":22},"One simple trick to make your screenshots 80% smaller","How to compress your screenshots automatically with pngquant and zopfli",[18],"James Ramsay","https://res.cloudinary.com/about-gitlab-com/image/upload/v1749666775/Blog/Hero%20Images/cover.jpg","2020-01-30","**Updated 2020-02-03:** Added macOS Automator instructions.\n\nI take screenshots every day to share with others in issues, blog posts, email, and Slack.\nI like them to be crisp, high resolution, and importantly the image file size should be as small as possible. Keeping the file size small means they are both fast to upload and to download. This is particularly important when I am writing a blog post or documentation.\n\nBelow is a quick primer on PNG compression, and instructions for completely automating the process.\n\n\u003Cfigure class=\"video_container\">\n  \u003Ciframe src=\"https://www.youtube-nocookie.com/embed/_E1f0xXDU3g\" frameborder=\"0\" allowfullscreen=\"true\"> \u003C/iframe>\n\u003C/figure>\n\nWhen you capture a screenshot on your Mac, the image will be saved in the\nPNG-32 format, with support for 16 million distinct colors and transparency. This means that the screenshot will perfectly capture every pixel on your screen, but having four 8-bit channels for red, green, blue and alpha (transparency) for every pixel makes the file very large. If you're interested, you can verify this yourself using [pngcheck](http://www.libpng.org/pub/png/apps/pngcheck.html).\n\nIn practice, the subjects of my screenshots are buttons and forms, not photographs.  While you might want 16 million colors for photos, we don't need them for screenshots, so we can take advantage of the PNG-8 format with its more compact 256 color palette.\n\n## Lossy Compression: Color Quantization\n\nThe first step is to reduce the color palette of the screenshot. This is a type of lossy compression called [color quantization](https://en.wikipedia.org/wiki/Color_quantization), which will reduce the number of distinct colors in the image.\n\nThe [pngquant](https://pngquant.org/) command line utility is the perfect tool for this job, and if you've used the popular [ImageAlpha](https://pngmini.com/) tool, you've already used the pngquant library.\n\n```bash\n# Install pngquant using Homebrew\n\nbrew install pngquant\n\n# Quantize 32-bit RGBA PNG to 8-bit (or smaller) RGBA-palette\n# pngquant [number of colors] [options] input.png\n#   --skip-if-larger  only save converted file if they're smaller than original\n#   --strip           remove optional metadata\n#   --ext=.png        set output filename to be same as input filename\n#   --force           overwrite existing output files\n\npngquant 256 --skip-if-larger --strip --ext=.png --force example.png\n```\n\nThe screenshots below illustrate different levels of palette size reduction.\n\n| PNG-32 (134 KB)                                                                                                                                    | 256 colors (42 KB)                                                                                                                              | 128 colors (39 KB)                                                                                                                              | 64 colors (38 KB)                                                                                                                            |\n| -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |\n| [![Source PNG-32](https://about.gitlab.com/images/blogimages/png-compression/example.raw.png)](https://about.gitlab.com/images/blogimages/png-compression/example.raw.png) | [![256 colors](https://about.gitlab.com/images/blogimages/png-compression/example.256.png)](https://about.gitlab.com/images/blogimages/png-compression/example.256.png) | [![128 colors](https://about.gitlab.com/images/blogimages/png-compression/example.128.png)](https://about.gitlab.com/images/blogimages/png-compression/example.128.png) | [![64 colors](https://about.gitlab.com/images/blogimages/png-compression/example.64.png)](https://about.gitlab.com/images/blogimages/png-compression/example.64.png) |\n\n\nI've observed for most screenshots you can comfortably reduce the color palette to as few as 64 colors before the difference in image quality becomes noticeable. If you frequently take screenshots of gradients or more complex images, you may want to stick with 256 colors to avoid noticeable artifacts.\n\n## Lossless Compression: DEFLATE\n\nThe PNG image file format uses [DEFLATE](https://en.wikipedia.org/wiki/DEFLATE) compression internally for an added layer of lossless compression, but most\nPNG libraries do not implement aggressive lossless compression. This provides another opportunity to reduce the file size further.\n\nIn 2013, Google released [zopfli](https://github.com/google/zopfli), which claimed to **improve compression by 3-8% compared to `zlib`**. The trade off for this improvement: waiting an extra 1-2 seconds. (There is no decompression penalty when viewing the compressed image).\n\n```bash\n# Install zopfli using Homebrew, which includes zopflipng\n\nbrew install zopfli\n\n# Optimize PNG compression\n# zopflipng [options] input.png output.png\n#   -y  do not ask about overwriting files\nzopflipng -y example.png example.png\n```\n\nRelative to the massive savings from color quantization, improving lossless compression provides a much smaller reduction, but in the context of pages with many images these marginal gains do add up to worthwhile savings.\n\n![Chart: file size savings](https://about.gitlab.com/images/blogimages/png-compression/chart.png)\n\n## Automation\n\nThe trick is to make this happen automatically every time I capture a screenshot using [Hazel](https://www.noodlesoft.com/) or [Automator](https://support.apple.com/en-au/guide/automator/welcome/mac).\nThis allows you to run commands based on file events, like every time a new screenshot is added to a directory.\n\nA bonus trick, is to create a dedicated Screenshots directory, so that they don't clutter your desktop. This is also easy:\n\n```bash\n# Create a Screenshots directory in the current users Home directory\n\nmkdir -p \"$HOME/Screenshots\"\n\n# Configure macOS to capture screenshots to this location\n# If you want to revert this change, and save screenshots to your desktop,\n# instead use \"$HOME/Desktop\"\n\ndefaults write com.apple.screencapture location \"$HOME/Screenshots\"\n```\n\nUsing Hazel, add the Screenshots folder where newly captured screenshots will be created, and create a new rule to compress files when they are added.\nCombining the commands above, and using `$1` syntax to access the filename argument passed by Hazel, the final script is:\n\n```bash\npngquant 64 --skip-if-larger --strip --ext=.png --force \"$1\"\nzopflipng -y \"$1\" \"$1\"\n```\n\nAlternatively, using Automator, create a new **Folder Action** that receives notifications from the Screenshots folder. Add a **Run Shell Script** block, and make sure to **Pass input as arguments**. Combining the commands above, and this time using `$@` syntax to handle multiple arguments, and absolute paths for pngquant and zopflipng, the final script is:\n\n```bash\nfor f in \"$@\"\ndo\n  /opt/homebrew/bin/pngquant 64 --skip-if-larger --strip --ext=.png --force \"$f\"\n  /opt/homebrew/bin/zopflipng -y \"$f\" \"$f\"\ndone\n```\n\nThe absolute paths for pngquant and zopflipng can vary depending on the version of Homebrew.\nYou can double check the exact path with `which pngquant` and `which zopflipng`.\n\nHere are screenshots of the configuration.\n\n| Hazel                                                                                                                                                      | Automator                                                                                                                                                                |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| [![Hazel Screenshot Compression Rule](https://about.gitlab.com/images/blogimages/png-compression/hazel.png)](https://about.gitlab.com/images/blogimages/png-compression/hazel.png) | [![Automator Screenshot Compression Action](https://about.gitlab.com/images/blogimages/png-compression/automator.png)](https://about.gitlab.com/images/blogimages/png-compression/automator.png) |\n\n\nMy final trick, is to add the Screenshots folder to my Dock for easy access.\n\nThis is achieved by dragging the Screenshots folder from Finder to your\nDock.\n\n## Summary\n\nThe PNG file format is great for screenshots, but the defaults output is too large for sharing on the internet. Instead of using ImageAlpha and\nImageOptim to compress your screenshots by hand, you can use Hazel to automate this to regularly yield file size reductions of 80%.\n\nIf you know of compression tricks, or alternatives that work on Windows or Linux, let me know below in the comments!\n\nCover image by [Emmy Smith](https://unsplash.com/@emsmith) on [Unsplash](https://unsplash.com/photos/LEjEst7lLfU)",[23],"workflow","yml",{},true,"/en-us/blog/simple-trick-for-smaller-screenshots",{"ogTitle":15,"ogImage":19,"ogDescription":16,"ogSiteName":29,"noIndex":12,"ogType":30,"ogUrl":31,"title":15,"canonicalUrls":31,"description":16},"https://about.gitlab.com","article","https://about.gitlab.com/blog/simple-trick-for-smaller-screenshots","en-us/blog/simple-trick-for-smaller-screenshots",[23],"d2JYmL0XBcmitCkCuwf_FL24uiIFIfKvsMr1FBVsfgY",{"data":36},{"logo":37,"freeTrial":42,"sales":47,"login":52,"items":57,"search":365,"minimal":396,"duo":415,"pricingDeployment":425},{"config":38},{"href":39,"dataGaName":40,"dataGaLocation":41},"/","gitlab logo","header",{"text":43,"config":44},"Get free trial",{"href":45,"dataGaName":46,"dataGaLocation":41},"https://gitlab.com/-/trial_registrations/new?glm_source=about.gitlab.com&glm_content=default-saas-trial/","free trial",{"text":48,"config":49},"Talk to sales",{"href":50,"dataGaName":51,"dataGaLocation":41},"/sales/","sales",{"text":53,"config":54},"Sign in",{"href":55,"dataGaName":56,"dataGaLocation":41},"https://gitlab.com/users/sign_in/","sign in",[58,85,180,185,286,346],{"text":59,"config":60,"cards":62},"Platform",{"dataNavLevelOne":61},"platform",[63,69,77],{"title":59,"description":64,"link":65},"The intelligent orchestration platform for DevSecOps",{"text":66,"config":67},"Explore our Platform",{"href":68,"dataGaName":61,"dataGaLocation":41},"/platform/",{"title":70,"description":71,"link":72},"GitLab Duo Agent Platform","Agentic AI for the entire software lifecycle",{"text":73,"config":74},"Meet GitLab Duo",{"href":75,"dataGaName":76,"dataGaLocation":41},"/gitlab-duo-agent-platform/","gitlab duo agent platform",{"title":78,"description":79,"link":80},"Why GitLab","See the top reasons enterprises choose GitLab",{"text":81,"config":82},"Learn more",{"href":83,"dataGaName":84,"dataGaLocation":41},"/why-gitlab/","why gitlab",{"text":86,"left":26,"config":87,"link":89,"lists":93,"footer":162},"Product",{"dataNavLevelOne":88},"solutions",{"text":90,"config":91},"View all Solutions",{"href":92,"dataGaName":88,"dataGaLocation":41},"/solutions/",[94,118,141],{"title":95,"description":96,"link":97,"items":102},"Automation","CI/CD and automation to accelerate deployment",{"config":98},{"icon":99,"href":100,"dataGaName":101,"dataGaLocation":41},"AutomatedCodeAlt","/solutions/delivery-automation/","automated software delivery",[103,107,110,114],{"text":104,"config":105},"CI/CD",{"href":106,"dataGaLocation":41,"dataGaName":104},"/solutions/continuous-integration/",{"text":70,"config":108},{"href":75,"dataGaLocation":41,"dataGaName":109},"gitlab duo agent platform - product menu",{"text":111,"config":112},"Source Code Management",{"href":113,"dataGaLocation":41,"dataGaName":111},"/solutions/source-code-management/",{"text":115,"config":116},"Automated Software Delivery",{"href":100,"dataGaLocation":41,"dataGaName":117},"Automated software delivery",{"title":119,"description":120,"link":121,"items":126},"Security","Deliver code faster without compromising security",{"config":122},{"href":123,"dataGaName":124,"dataGaLocation":41,"icon":125},"/solutions/application-security-testing/","security and compliance","ShieldCheckLight",[127,131,136],{"text":128,"config":129},"Application Security Testing",{"href":123,"dataGaName":130,"dataGaLocation":41},"Application security testing",{"text":132,"config":133},"Software Supply Chain Security",{"href":134,"dataGaLocation":41,"dataGaName":135},"/solutions/supply-chain/","Software supply chain security",{"text":137,"config":138},"Software Compliance",{"href":139,"dataGaName":140,"dataGaLocation":41},"/solutions/software-compliance/","software compliance",{"title":142,"link":143,"items":148},"Measurement",{"config":144},{"icon":145,"href":146,"dataGaName":147,"dataGaLocation":41},"DigitalTransformation","/solutions/visibility-measurement/","visibility and measurement",[149,153,157],{"text":150,"config":151},"Visibility & Measurement",{"href":146,"dataGaLocation":41,"dataGaName":152},"Visibility and Measurement",{"text":154,"config":155},"Value Stream Management",{"href":156,"dataGaLocation":41,"dataGaName":154},"/solutions/value-stream-management/",{"text":158,"config":159},"Analytics & Insights",{"href":160,"dataGaLocation":41,"dataGaName":161},"/solutions/analytics-and-insights/","Analytics and insights",{"title":163,"items":164},"GitLab for",[165,170,175],{"text":166,"config":167},"Enterprise",{"href":168,"dataGaLocation":41,"dataGaName":169},"/enterprise/","enterprise",{"text":171,"config":172},"Small Business",{"href":173,"dataGaLocation":41,"dataGaName":174},"/small-business/","small business",{"text":176,"config":177},"Public Sector",{"href":178,"dataGaLocation":41,"dataGaName":179},"/solutions/public-sector/","public sector",{"text":181,"config":182},"Pricing",{"href":183,"dataGaName":184,"dataGaLocation":41,"dataNavLevelOne":184},"/pricing/","pricing",{"text":186,"config":187,"link":189,"lists":193,"feature":273},"Resources",{"dataNavLevelOne":188},"resources",{"text":190,"config":191},"View all resources",{"href":192,"dataGaName":188,"dataGaLocation":41},"/resources/",[194,227,245],{"title":195,"items":196},"Getting started",[197,202,207,212,217,222],{"text":198,"config":199},"Install",{"href":200,"dataGaName":201,"dataGaLocation":41},"/install/","install",{"text":203,"config":204},"Quick start guides",{"href":205,"dataGaName":206,"dataGaLocation":41},"/get-started/","quick setup checklists",{"text":208,"config":209},"Learn",{"href":210,"dataGaLocation":41,"dataGaName":211},"https://university.gitlab.com/","learn",{"text":213,"config":214},"Product documentation",{"href":215,"dataGaName":216,"dataGaLocation":41},"https://docs.gitlab.com/","product documentation",{"text":218,"config":219},"Best practice videos",{"href":220,"dataGaName":221,"dataGaLocation":41},"/getting-started-videos/","best practice videos",{"text":223,"config":224},"Integrations",{"href":225,"dataGaName":226,"dataGaLocation":41},"/integrations/","integrations",{"title":228,"items":229},"Discover",[230,235,240],{"text":231,"config":232},"Customer success stories",{"href":233,"dataGaName":234,"dataGaLocation":41},"/customers/","customer success stories",{"text":236,"config":237},"Blog",{"href":238,"dataGaName":239,"dataGaLocation":41},"/blog/","blog",{"text":241,"config":242},"Remote",{"href":243,"dataGaName":244,"dataGaLocation":41},"https://handbook.gitlab.com/handbook/company/culture/all-remote/","remote",{"title":246,"items":247},"Connect",[248,253,258,263,268],{"text":249,"config":250},"GitLab Services",{"href":251,"dataGaName":252,"dataGaLocation":41},"/services/","services",{"text":254,"config":255},"Community",{"href":256,"dataGaName":257,"dataGaLocation":41},"/community/","community",{"text":259,"config":260},"Forum",{"href":261,"dataGaName":262,"dataGaLocation":41},"https://forum.gitlab.com/","forum",{"text":264,"config":265},"Events",{"href":266,"dataGaName":267,"dataGaLocation":41},"/events/","events",{"text":269,"config":270},"Partners",{"href":271,"dataGaName":272,"dataGaLocation":41},"/partners/","partners",{"backgroundColor":274,"textColor":275,"text":276,"image":277,"link":281},"#2f2a6b","#fff","Insights for the future of software development",{"altText":278,"config":279},"the source promo card",{"src":280},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1758208064/dzl0dbift9xdizyelkk4.svg",{"text":282,"config":283},"Read the latest",{"href":284,"dataGaName":285,"dataGaLocation":41},"/the-source/","the source",{"text":287,"config":288,"lists":290},"Company",{"dataNavLevelOne":289},"company",[291],{"items":292},[293,298,304,306,311,316,321,326,331,336,341],{"text":294,"config":295},"About",{"href":296,"dataGaName":297,"dataGaLocation":41},"/company/","about",{"text":299,"config":300,"footerGa":303},"Jobs",{"href":301,"dataGaName":302,"dataGaLocation":41},"/jobs/","jobs",{"dataGaName":302},{"text":264,"config":305},{"href":266,"dataGaName":267,"dataGaLocation":41},{"text":307,"config":308},"Leadership",{"href":309,"dataGaName":310,"dataGaLocation":41},"/company/team/e-group/","leadership",{"text":312,"config":313},"Team",{"href":314,"dataGaName":315,"dataGaLocation":41},"/company/team/","team",{"text":317,"config":318},"Handbook",{"href":319,"dataGaName":320,"dataGaLocation":41},"https://handbook.gitlab.com/","handbook",{"text":322,"config":323},"Investor relations",{"href":324,"dataGaName":325,"dataGaLocation":41},"https://ir.gitlab.com/","investor relations",{"text":327,"config":328},"Trust Center",{"href":329,"dataGaName":330,"dataGaLocation":41},"/security/","trust center",{"text":332,"config":333},"AI Transparency Center",{"href":334,"dataGaName":335,"dataGaLocation":41},"/ai-transparency-center/","ai transparency center",{"text":337,"config":338},"Newsletter",{"href":339,"dataGaName":340,"dataGaLocation":41},"/company/contact/#contact-forms","newsletter",{"text":342,"config":343},"Press",{"href":344,"dataGaName":345,"dataGaLocation":41},"/press/","press",{"text":347,"config":348,"lists":349},"Contact us",{"dataNavLevelOne":289},[350],{"items":351},[352,355,360],{"text":48,"config":353},{"href":50,"dataGaName":354,"dataGaLocation":41},"talk to sales",{"text":356,"config":357},"Support portal",{"href":358,"dataGaName":359,"dataGaLocation":41},"https://support.gitlab.com","support portal",{"text":361,"config":362},"Customer portal",{"href":363,"dataGaName":364,"dataGaLocation":41},"https://customers.gitlab.com/customers/sign_in/","customer portal",{"close":366,"login":367,"suggestions":374},"Close",{"text":368,"link":369},"To search repositories and projects, login to",{"text":370,"config":371},"gitlab.com",{"href":55,"dataGaName":372,"dataGaLocation":373},"search login","search",{"text":375,"default":376},"Suggestions",[377,379,383,385,389,393],{"text":70,"config":378},{"href":75,"dataGaName":70,"dataGaLocation":373},{"text":380,"config":381},"Code Suggestions (AI)",{"href":382,"dataGaName":380,"dataGaLocation":373},"/solutions/code-suggestions/",{"text":104,"config":384},{"href":106,"dataGaName":104,"dataGaLocation":373},{"text":386,"config":387},"GitLab on AWS",{"href":388,"dataGaName":386,"dataGaLocation":373},"/partners/technology-partners/aws/",{"text":390,"config":391},"GitLab on Google Cloud",{"href":392,"dataGaName":390,"dataGaLocation":373},"/partners/technology-partners/google-cloud-platform/",{"text":394,"config":395},"Why GitLab?",{"href":83,"dataGaName":394,"dataGaLocation":373},{"freeTrial":397,"mobileIcon":402,"desktopIcon":407,"secondaryButton":410},{"text":398,"config":399},"Start free trial",{"href":400,"dataGaName":46,"dataGaLocation":401},"https://gitlab.com/-/trials/new/","nav",{"altText":403,"config":404},"Gitlab Icon",{"src":405,"dataGaName":406,"dataGaLocation":401},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1758203874/jypbw1jx72aexsoohd7x.svg","gitlab icon",{"altText":403,"config":408},{"src":409,"dataGaName":406,"dataGaLocation":401},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1758203875/gs4c8p8opsgvflgkswz9.svg",{"text":411,"config":412},"Get Started",{"href":413,"dataGaName":414,"dataGaLocation":401},"https://gitlab.com/-/trial_registrations/new?glm_source=about.gitlab.com/compare/gitlab-vs-github/","get started",{"freeTrial":416,"mobileIcon":421,"desktopIcon":423},{"text":417,"config":418},"Learn more about GitLab Duo",{"href":419,"dataGaName":420,"dataGaLocation":401},"/gitlab-duo/","gitlab duo",{"altText":403,"config":422},{"src":405,"dataGaName":406,"dataGaLocation":401},{"altText":403,"config":424},{"src":409,"dataGaName":406,"dataGaLocation":401},{"freeTrial":426,"mobileIcon":431,"desktopIcon":433},{"text":427,"config":428},"Back to pricing",{"href":183,"dataGaName":429,"dataGaLocation":401,"icon":430},"back to pricing","GoBack",{"altText":403,"config":432},{"src":405,"dataGaName":406,"dataGaLocation":401},{"altText":403,"config":434},{"src":409,"dataGaName":406,"dataGaLocation":401},{"title":436,"button":437,"config":442},"See how agentic AI transforms software delivery",{"text":438,"config":439},"Watch GitLab Transcend now",{"href":440,"dataGaName":441,"dataGaLocation":41},"/events/transcend/virtual/","transcend event",{"layout":443,"icon":444},"release","AiStar",{"data":446},{"text":447,"source":448,"edit":454,"contribute":459,"config":464,"items":469,"minimal":676},"Git is a trademark of Software Freedom Conservancy and our use of 'GitLab' is under license",{"text":449,"config":450},"View page source",{"href":451,"dataGaName":452,"dataGaLocation":453},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/","page source","footer",{"text":455,"config":456},"Edit this page",{"href":457,"dataGaName":458,"dataGaLocation":453},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/-/blob/main/content/","web ide",{"text":460,"config":461},"Please contribute",{"href":462,"dataGaName":463,"dataGaLocation":453},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/-/blob/main/CONTRIBUTING.md/","please contribute",{"twitter":465,"facebook":466,"youtube":467,"linkedin":468},"https://twitter.com/gitlab","https://www.facebook.com/gitlab","https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg","https://www.linkedin.com/company/gitlab-com",[470,517,571,615,642],{"title":181,"links":471,"subMenu":486},[472,476,481],{"text":473,"config":474},"View plans",{"href":183,"dataGaName":475,"dataGaLocation":453},"view plans",{"text":477,"config":478},"Why Premium?",{"href":479,"dataGaName":480,"dataGaLocation":453},"/pricing/premium/","why premium",{"text":482,"config":483},"Why Ultimate?",{"href":484,"dataGaName":485,"dataGaLocation":453},"/pricing/ultimate/","why ultimate",[487],{"title":488,"links":489},"Contact Us",[490,493,495,497,502,507,512],{"text":491,"config":492},"Contact sales",{"href":50,"dataGaName":51,"dataGaLocation":453},{"text":356,"config":494},{"href":358,"dataGaName":359,"dataGaLocation":453},{"text":361,"config":496},{"href":363,"dataGaName":364,"dataGaLocation":453},{"text":498,"config":499},"Status",{"href":500,"dataGaName":501,"dataGaLocation":453},"https://status.gitlab.com/","status",{"text":503,"config":504},"Terms of use",{"href":505,"dataGaName":506,"dataGaLocation":453},"/terms/","terms of use",{"text":508,"config":509},"Privacy statement",{"href":510,"dataGaName":511,"dataGaLocation":453},"/privacy/","privacy statement",{"text":513,"config":514},"Cookie preferences",{"dataGaName":515,"dataGaLocation":453,"id":516,"isOneTrustButton":26},"cookie preferences","ot-sdk-btn",{"title":86,"links":518,"subMenu":527},[519,523],{"text":520,"config":521},"DevSecOps platform",{"href":68,"dataGaName":522,"dataGaLocation":453},"devsecops platform",{"text":524,"config":525},"AI-Assisted Development",{"href":419,"dataGaName":526,"dataGaLocation":453},"ai-assisted development",[528],{"title":529,"links":530},"Topics",[531,536,541,546,551,556,561,566],{"text":532,"config":533},"CICD",{"href":534,"dataGaName":535,"dataGaLocation":453},"/topics/ci-cd/","cicd",{"text":537,"config":538},"GitOps",{"href":539,"dataGaName":540,"dataGaLocation":453},"/topics/gitops/","gitops",{"text":542,"config":543},"DevOps",{"href":544,"dataGaName":545,"dataGaLocation":453},"/topics/devops/","devops",{"text":547,"config":548},"Version Control",{"href":549,"dataGaName":550,"dataGaLocation":453},"/topics/version-control/","version control",{"text":552,"config":553},"DevSecOps",{"href":554,"dataGaName":555,"dataGaLocation":453},"/topics/devsecops/","devsecops",{"text":557,"config":558},"Cloud Native",{"href":559,"dataGaName":560,"dataGaLocation":453},"/topics/cloud-native/","cloud native",{"text":562,"config":563},"AI for Coding",{"href":564,"dataGaName":565,"dataGaLocation":453},"/topics/devops/ai-for-coding/","ai for coding",{"text":567,"config":568},"Agentic AI",{"href":569,"dataGaName":570,"dataGaLocation":453},"/topics/agentic-ai/","agentic ai",{"title":572,"links":573},"Solutions",[574,576,578,583,587,590,594,597,599,602,605,610],{"text":128,"config":575},{"href":123,"dataGaName":128,"dataGaLocation":453},{"text":117,"config":577},{"href":100,"dataGaName":101,"dataGaLocation":453},{"text":579,"config":580},"Agile development",{"href":581,"dataGaName":582,"dataGaLocation":453},"/solutions/agile-delivery/","agile delivery",{"text":584,"config":585},"SCM",{"href":113,"dataGaName":586,"dataGaLocation":453},"source code management",{"text":532,"config":588},{"href":106,"dataGaName":589,"dataGaLocation":453},"continuous integration & delivery",{"text":591,"config":592},"Value stream management",{"href":156,"dataGaName":593,"dataGaLocation":453},"value stream management",{"text":537,"config":595},{"href":596,"dataGaName":540,"dataGaLocation":453},"/solutions/gitops/",{"text":166,"config":598},{"href":168,"dataGaName":169,"dataGaLocation":453},{"text":600,"config":601},"Small business",{"href":173,"dataGaName":174,"dataGaLocation":453},{"text":603,"config":604},"Public sector",{"href":178,"dataGaName":179,"dataGaLocation":453},{"text":606,"config":607},"Education",{"href":608,"dataGaName":609,"dataGaLocation":453},"/solutions/education/","education",{"text":611,"config":612},"Financial services",{"href":613,"dataGaName":614,"dataGaLocation":453},"/solutions/finance/","financial services",{"title":186,"links":616},[617,619,621,623,626,628,630,632,634,636,638,640],{"text":198,"config":618},{"href":200,"dataGaName":201,"dataGaLocation":453},{"text":203,"config":620},{"href":205,"dataGaName":206,"dataGaLocation":453},{"text":208,"config":622},{"href":210,"dataGaName":211,"dataGaLocation":453},{"text":213,"config":624},{"href":215,"dataGaName":625,"dataGaLocation":453},"docs",{"text":236,"config":627},{"href":238,"dataGaName":239,"dataGaLocation":453},{"text":231,"config":629},{"href":233,"dataGaName":234,"dataGaLocation":453},{"text":241,"config":631},{"href":243,"dataGaName":244,"dataGaLocation":453},{"text":249,"config":633},{"href":251,"dataGaName":252,"dataGaLocation":453},{"text":254,"config":635},{"href":256,"dataGaName":257,"dataGaLocation":453},{"text":259,"config":637},{"href":261,"dataGaName":262,"dataGaLocation":453},{"text":264,"config":639},{"href":266,"dataGaName":267,"dataGaLocation":453},{"text":269,"config":641},{"href":271,"dataGaName":272,"dataGaLocation":453},{"title":287,"links":643},[644,646,648,650,652,654,656,660,665,667,669,671],{"text":294,"config":645},{"href":296,"dataGaName":289,"dataGaLocation":453},{"text":299,"config":647},{"href":301,"dataGaName":302,"dataGaLocation":453},{"text":307,"config":649},{"href":309,"dataGaName":310,"dataGaLocation":453},{"text":312,"config":651},{"href":314,"dataGaName":315,"dataGaLocation":453},{"text":317,"config":653},{"href":319,"dataGaName":320,"dataGaLocation":453},{"text":322,"config":655},{"href":324,"dataGaName":325,"dataGaLocation":453},{"text":657,"config":658},"Sustainability",{"href":659,"dataGaName":657,"dataGaLocation":453},"/sustainability/",{"text":661,"config":662},"Diversity, inclusion and belonging (DIB)",{"href":663,"dataGaName":664,"dataGaLocation":453},"/diversity-inclusion-belonging/","Diversity, inclusion and belonging",{"text":327,"config":666},{"href":329,"dataGaName":330,"dataGaLocation":453},{"text":337,"config":668},{"href":339,"dataGaName":340,"dataGaLocation":453},{"text":342,"config":670},{"href":344,"dataGaName":345,"dataGaLocation":453},{"text":672,"config":673},"Modern Slavery Transparency Statement",{"href":674,"dataGaName":675,"dataGaLocation":453},"https://handbook.gitlab.com/handbook/legal/modern-slavery-act-transparency-statement/","modern slavery transparency statement",{"items":677},[678,681,684],{"text":679,"config":680},"Terms",{"href":505,"dataGaName":506,"dataGaLocation":453},{"text":682,"config":683},"Cookies",{"dataGaName":515,"dataGaLocation":453,"id":516,"isOneTrustButton":26},{"text":685,"config":686},"Privacy",{"href":510,"dataGaName":511,"dataGaLocation":453},[688],{"id":689,"title":18,"body":8,"config":690,"content":692,"description":8,"extension":24,"meta":696,"navigation":26,"path":697,"seo":698,"stem":699,"__hash__":700},"blogAuthors/en-us/blog/authors/james-ramsay.yml",{"template":691},"BlogAuthor",{"name":18,"config":693},{"headshot":694,"ctfId":695},"","jramsay",{},"/en-us/blog/authors/james-ramsay",{},"en-us/blog/authors/james-ramsay","iKU7kqEnGoklxsvYnqw2L7oAOICkVwJOVHAkOv_GdM4",[702,713,728],{"content":703,"config":711},{"title":704,"description":705,"authors":706,"heroImage":708,"date":709,"body":710,"category":9},"CEO Shadow Takeaways from Jacie","Recap of my experience in the CEO Shadow Program.",[707],"Jacie Bandur","https://res.cloudinary.com/about-gitlab-com/image/upload/v1749664102/Blog/Hero%20Images/gitlab-values-cover.png","2021-05-18","\n\n{::options parse_block_html=\"true\" /}\n\n\nHi! I’m Jacie Bandur. I completed GitLab’s CEO Shadow program from 2021-04-26 through 2021-05-07. It was a really enlightening experience. I generally work in Learning and Development and consider myself a lifelong learner. I can’t even explain how much I learned in such a short about of time. I learned a lot about the business. I learned a lot about the product. But learned even more about the importance of iteration in everything we do.\n\n### Qualifications to Participate\n\nI wanted to start this off with touching on qualifications to participate in the program.\n\nI am the type of person that has gone through most of my life thinking I’m not qualified for things. I’m not qualified for that job, that promotion, that program. The list goes on and on.\n\nWhen I saw the [CEO Shadow program](/blog/ceo-shadow-impressions-takeaways/) kick off in 2019, I really wanted to participate. I was a little intimidated. Who wouldn’t be, spending 2 weeks with the CEO of any company? But time passed and all the sudden it was 2021 and I had not taken any steps to participating in the program.\n\nIf you are sitting there waiting for someone to tell you that you are qualified to participate in this program, I’m not big on giving “pep talks,” but here’s me telling you - You are qualified for this program. There’s never going to be a good or perfect time to do it. Tell your manager you want to do the CEO Shadow program. Stop waiting. Sign up today.\n\nNote: Take a look at the [eligibility](https://handbook.gitlab.com/handbook/ceo/shadow/#eligibility) section of the CEO Shadow page for more information on signing up.\n\n### Pre-Program Tips\n\nThere are many things recommended for shadows to do pre-program outlined on the CEO Shadow handbook page. As I was going through the program there were things that I thought helped me (or would have helped me).\n\nHere are my top 6 recommendations:\n\n1. Make sure your team knows you will be unavailable for 2 weeks. This isn’t a program that can or should be done alongside your normal day to day work. I found catching up from the 2 weeks away kind of difficult because I was trying to keep up on what was going on and I had a bunch of half done things.\n1. Talk with people who have done the shadow program - schedule at least 3 coffee chats with CEO Shadow Alumni.\n1. Have food that is easy to eat quickly. Sid’s meetings are back to back most days, so you will have small amounts of time to eat throughout the day. Sid does eat during calls, which you are welcome to do, too, but if you are taking notes, it is difficult to eat. And this will make you realize why speedy meetings are so important!\n1. Listen to the [Executive Leadership LinkedIn Learning course](https://www.linkedin.com/learning/executive-leadership/).\n1. Be prepared to ask questions. When doing the program virtually, there isn’t a ton of time for asking questions, so when one would come up, I would add it to a note on my computer and ask if there was ever time with just the shadows and Sid.\n1. Take at least 1 day off after the program. Take even a couple of days off if you can! This is recommended on the handbook page, but I can’t stress this enough.\n\n\n### Takeaways\n\n**Group Conversations**\n\nI’ve been at GitLab for almost 4 years. When I joined, I made it a point to attend as many GC’s as I could. I had gotten out of the habit of attending Group Conversations. After attending them again for 2 weeks, I realized how important they are to understand better what is going on across the business. Everything in the organization is so intertwined. It’s helpful to understand what other teams are working on and succeeding in.\n\n**Feedback**\n\nWe should all be giving and receiving feedback often. We have a whole [handbook page on giving and receiving feedback](https://handbook.gitlab.com/handbook/people-group/guidance-on-feedback/). Read the handbook page and watch the videos, as well. Practice giving feedback. I recommend using the [1-1 agenda](https://handbook.gitlab.com/handbook/leadership/1-1/suggested-agenda-format/) Sid uses, because Feedback is an essential piece of that agenda, and it makes feedback more of a routine thing.\n\n**Biggest Takeaway**\n\nWe have an incredible team here at GitLab, from Engineering to Product to Sales to People and all the groups in between. There are so many great ideas. I observed the constant reinforcement by Sid to start with something small and build on it. You can ALWAYS make something more complex. It’s hard to go back to something more simple when you start with something complex.\n\nA couple of quotes that I heard from Sid during the program that reinforced this point:\n\n- “Every complex system evolves from a simple system that worked.”\n- “It’s very clear what is the simple solution. We can always make it more complicated as we go on.”\n\nI know they are very similar, but they happened in different meetings on different days, so the point was reinforced repeatedly.\n\nDuring the program, I reflected on the projects that I’am working on. How many of them am I trying to do too much on before releasing. Probably all of them. When I’m working on projects in the future, I will break them down into smaller, more doable chunks. Iteration is hard - it’s a skill to be practicing constantly.\n\n\n### Overall\n\nOverall, the program was really insightful and impactful. If you haven’t participated in it yet, I cannot encourage you enough to do so!\n",{"slug":712,"featured":12,"template":13},"ceo-shadow-recap",{"content":714,"config":726},{"title":715,"description":716,"authors":717,"heroImage":719,"date":720,"body":721,"category":9,"tags":722},"Why I love contributing to GitLab","Making small meaningful changes is what it's all about.",[718],"Austin Regnery","https://res.cloudinary.com/about-gitlab-com/image/upload/v1749679501/Blog/Hero%20Images/new-feature.png","2021-05-11","It was mid-morning on a Tuesday in February, and I had 10 minutes in between meetings. So I decided to try and solve a pain point of mine.\nYou see, I had to memorize this HTML snippet to create a collapsible section in GitLab Issue descriptions and comments, but I kept forgetting it. Was it `summary` or `section`? I could never remember.\n```html\n\u003Cdetails>\n\u003Csummary>Insert Title\u003C/summary>\nHidden content\n\u003C/details>\n```\nEven though it is not vanilla Markdown, GitLab knows how to interpret some HTML. I used this formatting trick fairly often since full-page screenshots can occupy a lot of screen space, which leads to excessive scrolling.\nSo I decided to poke around our codebase to see how the other Markdown shortcuts worked. To my surprise, it was pretty straightforward. Each shortcut had a simple text input that mapped to each button. This implementation was simple to replicate since I just needed to copy/paste and replace a few words.\n![Image of Vue and Haml files with editor shortcuts](https://about.gitlab.com/images/blogimages/why-i-love-contributing-to-gitlab/vue-haml.png){: .shadow}\nThe Vue and Haml files with the new shortcut\n\nI started a branch and began hacking away at the code. Now, I would never call myself a Software Engineer, but I like to try and make things from time to time. I was able to add a new shortcut to the toolbar to insert this code snippet for me in less than 10 minutes. No more memorizing! Making contributions like this is what makes working at GitLab so special.\nNow, it wasn't ready for production, but I at least had something that worked. I shared it with my UX colleagues in Slack, and it started to gain traction with several up-votes and few constructive comments on how to make it better.\nWith the functionality flushed out, a few other designers helped me get a better icon added to our SVG library. Using clear iconography is critical for communicating information more clearly.\n| Initial Icon | Final Icon |\n| - | - |\n| ![SVG of chevron right icon](https://about.gitlab.com/images/blogimages/why-i-love-contributing-to-gitlab/chevron-right.svg) | ![SVG of details block icon](https://about.gitlab.com/images/blogimages/why-i-love-contributing-to-gitlab/details-block.svg) |\n\nThe last thing to do was resolve my failing tests, and I had several teammates help me do that.\n![Gif of the shortcut being used](https://about.gitlab.com/images/blogimages/why-i-love-contributing-to-gitlab/demo.gif)\n\nToday [this change](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/54938) merged! Now I solved a pain point for me and others. It took a few months to go from idea to production, but the effort was super low. I'd say the return on my initial investment, 10 minutes, is super high.\n> Having a direct impact on a product was never an option for me before joining GitLab.\n\n![Image of participants in the Merge Request](https://about.gitlab.com/images/blogimages/why-i-love-contributing-to-gitlab/participants.png)\n\n\nThank you to everyone that helped me deploy this\n",[723,724,725],"UX","product","AWS",{"slug":727,"featured":12,"template":13},"why-i-love-contributing-to-gitlab",{"content":729,"config":741},{"title":730,"description":731,"authors":732,"heroImage":734,"date":720,"body":735,"category":9,"tags":736},"Placebo Lines on the Pipeline Graph","Have you noticed the connecting lines missing on your pipelines lately? Here's why",[733],"Sam Beckham","https://res.cloudinary.com/about-gitlab-com/image/upload/v1749679507/Blog/Hero%20Images/ci-cd.png","\n\n{::options parse_block_html=\"true\" /}\n\n\n\nHave you ever pressed the close door button on the elevator, in the hope that you'll save a few precious seconds?\nOr got frustrated at the person stood next to you at the cross-walk, neglecting to press the button?\nWell, maybe they know something you don't, or perhaps you know this already.\nMany buttons in our society lie to us.\n[David McRaney](https://youarenotsosmart.com/2010/02/10/placebo-buttons/) dubbed these, \"Placebo buttons\" and they're everywhere.\nThose elevator doors won't close any faster and the cross-walk button has no effect on the lights.\nThe only lights they control are the lights on the buttons themselves.\nThey give you the feedback you crave, but that's all they're doing.\n\nThese placebos aren't constrained to the physical world, they're prevalent in [UI design](/blog/the-evolution-of-ux-at-gitlab/) too.\nFrom literal placebo buttons like [YouTube's downvote](https://www.quora.com/Does-downvoting-a-comment-on-YouTube-even-do-anything), to more subtle effects like Instagram always [pretending to work](https://www.fastcompany.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed), or progress bars that have a [fixed animation](https://www.theatlantic.com/technology/archive/2017/02/why-some-apps-use-fake-progress-bars/517233/).\nThey're everywhere if you know where to look.\n\nAt GitLab, we created a placebo of our own in one of our core features; the pipeline graph.\n\nThose of you who have used our pipeline graph, will be familiar with its appearance.\nThere's a series of jobs, grouped by stages, connected by a series of lines depicting the relationships between the jobs.\nBut these lines might be lying to you.\nThese lines are indiscriminately drawn between each job in a stage, regardless of their relationship.\nThese lines are placebos.\n\n![The old pipeline rendering with lines connecting every job in a stage](https://about.gitlab.com/images/blogimages/placebo-lines_old-graph.png)\n\nThis wasn't a problem to begin with.\nA basic pipeline has several jobs across a handful of stages.\nJobs in each stage would run parallel to each other, but each stage would run sequentially.\nIn the image shown above, all the jobs in the test stage would trigger at the same time. Once those jobs had finished, all the jobs in the build stage would trigger.\nWe used rudimentary CSS to draw lines connecting each job in one stage to each job in the next.\nThese lines weren't calculated based on their connections, but still reflected the story they were telling.\n\nSince the introduction of `needs` relationships in [v12.2](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/47063), pipelines got a bit more complicated.\nNow you could configure a job in a later stage to trigger as soon as a job in an earlier stage completed.\nLooking at our old example, we could set the API deployment to run as soon as our spec tests passed.\nThis skips the remaining tests and the entire build stage, turning our lines into pretty little liars.\n\nWe had many internal discussions about these lines, and how to show the relationships between jobs.\nThere's the [`needs` visualization](https://docs.gitlab.com/ee/ci/directed_acyclic_graph/#needs-visualization), which does an excellent job of displaying these relationships, but the main pipeline graph was still inaccurate.\nFor the past few months, we've been [refactoring the pipeline graph](https://gitlab.com/gitlab-org/gitlab/-/issues/276949), giving it a new lease of life and fixing some of its issues along the way.\nOne of those issues were the faked lines.\nIn the new version, we can accurately draw lines between jobs.\nLines that actually depict the relationships jobs have with each other.\nNow the lines no-longer lie!\n\n![The newer pipeline graph showing the correct needs links between jobs](https://about.gitlab.com/images/blogimages/placebo-lines_new-graph.png)\n\nThe above image shows an unreleased version of the pipeline graph.\nYou can see the lines drawn between the jobs to show that the `deploy:API` job can start as soon as the `rspec` job is successful.\nSomething the old lines (shown earlier in this post) would have been unable to depict.\n\nOne unfortunate downside of this is that these lines can be quite expensive to calculate.\nThey're actual DOM nodes, drawn deliberately and placed precisely.\nOn smaller graphs this isn't a problem, but some of our initial tests have found pipelines with a potential 8000+ job connections.\nThat kind of calculation would grind the browser to a halt, and nobody wants that.\n\nAt GitLab, we believe in boring solutions.\nWe make the simple change that sets us on the path towards where we want to be.\nShip it, get feedback, and iterate.\nSo that's what we did.\nIn the first phase of this rollout, we shipped the new pipeline graph with no lines connecting the jobs.\nWe don't have to worry about the expensive calculations, and we still get to roll out the refactored pipeline graph.\n\n![The current (v13.11) pipeline graph showing no links between jobs](https://about.gitlab.com/images/blogimages/placebo-lines_current-graph.png)\n\nWe know some of you will miss them, but fear not.\nBoring solutions are just technical debt if you don't iterate on them.\nSo the [improved lines are coming](https://gitlab.com/groups/gitlab-org/-/epics/4509) in a future release, along with several other improvements to the pipeline graph.\nWe're already starting to roll out the new [Job Dependencies](https://gitlab.com/gitlab-org/gitlab/-/issues/298973) view which shows the jobs in a (much closer to) execution order.\nStay tuned for more updates, and watch [Sarah Groff Hennigh Palermo's talk](https://www.youtube.com/watch?v=R2EKqKjB7OQ) for the technical side of this effort and a deeper dive into some of the decisions we made.\n",[737,738,739,740],"CI","frontend","agile","design",{"slug":742,"featured":12,"template":13},"placebo-lines-on-the-pipeline-graph",{"promotions":744},[745,759,770],{"id":746,"categories":747,"header":749,"text":750,"button":751,"image":756},"ai-modernization",[748],"ai-ml","Is AI achieving its promise at scale?","Quiz will take 5 minutes or less",{"text":752,"config":753},"Get your AI maturity score",{"href":754,"dataGaName":755,"dataGaLocation":239},"/assessments/ai-modernization-assessment/","modernization assessment",{"config":757},{"src":758},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1772138786/qix0m7kwnd8x2fh1zq49.png",{"id":760,"categories":761,"header":762,"text":750,"button":763,"image":767},"devops-modernization",[724,555],"Are you just managing tools or shipping innovation?",{"text":764,"config":765},"Get your DevOps maturity score",{"href":766,"dataGaName":755,"dataGaLocation":239},"/assessments/devops-modernization-assessment/",{"config":768},{"src":769},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1772138785/eg818fmakweyuznttgid.png",{"id":771,"categories":772,"header":774,"text":750,"button":775,"image":779},"security-modernization",[773],"security","Are you trading speed for security?",{"text":776,"config":777},"Get your security maturity score",{"href":778,"dataGaName":755,"dataGaLocation":239},"/assessments/security-modernization-assessment/",{"config":780},{"src":781},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1772138786/p4pbqd9nnjejg5ds6mdk.png",{"header":783,"blurb":784,"button":785,"secondaryButton":790},"Start building faster today","See what your team can do with the intelligent orchestration platform for DevSecOps.\n",{"text":786,"config":787},"Get your free trial",{"href":788,"dataGaName":46,"dataGaLocation":789},"https://gitlab.com/-/trial_registrations/new?glm_content=default-saas-trial&glm_source=about.gitlab.com/","feature",{"text":491,"config":791},{"href":50,"dataGaName":51,"dataGaLocation":789},1772652080709]