WebP-a-GO Docs edition (superfly#654)

* Fixing jpegs * Fixing more images * Fixing pngs?
montasaurus · Apr 3, 2023 · 9789478 · 9789478
1 parent 359407e
commit 9789478
Show file tree

Hide file tree

Showing 26 changed files with 57 additions and 57 deletions.
diff --git a/about/open-source.html.md.erb b/about/open-source.html.md.erb
@@ -5,7 +5,7 @@ nav: firecracker
 ---
 
 <figure>
-  <img src="/static/images/harbor-spot.jpg" srcset="/static/images/harbor-spot@2x.jpg 2x" alt="">
+  <img src="/static/images/harbor-spot.webp" srcset="/static/images/harbor-spot@2x.webp 2x" alt="">
 </figure>
 
 Fly builds on the work of a tremendous open source infrastructure community. We want open source authors to benefit from their work because we think a healthy, thriving open source ecosystem will help us build better products.

diff --git a/about/pricing.html.md.erb b/about/pricing.html.md.erb
@@ -5,7 +5,7 @@ sitemap: true
 nav: firecracker
 ---
 
-<img src="/static/images/app-pricing.jpg" srcset="/static/images/app-pricing@2x.jpg 2x" alt="A landscape painting with hot air balloons flying over a mountain range.">
+<img src="/static/images/app-pricing.webp" srcset="/static/images/app-pricing@2x.webp 2x" alt="A landscape painting with hot air balloons flying over a mountain range.">
 
 ## How it works
 

diff --git a/about/support.html.md b/about/support.html.md
@@ -5,7 +5,7 @@ nav: firecracker
 toc: false
 ---
 
-<img src="/static/images/support.jpg" srcset="/static/images/support@2x.jpg 2x" alt="An open laptop with a Fly.io sticker on it, sitting on the ground next to a coffee mug and a cute turtle.">
+<img src="/static/images/support.webp" srcset="/static/images/support@2x.webp 2x" alt="An open laptop with a Fly.io sticker on it, sitting on the ground next to a coffee mug and a cute turtle.">
 
 Need support? We can help! Here's where to look.
 

diff --git a/app-guides/continuous-deployment-with-github-actions.html.md b/app-guides/continuous-deployment-with-github-actions.html.md
@@ -11,7 +11,7 @@ priority: 10
 date: 2020-06-20
 ---
 
-<img src="/static/images/continuous-deployment.jpg" alt="A man writing code on a vintage desktop computer" class="rounded-xl">
+<img src="/static/images/continuous-deployment.webp" alt="A man writing code on a vintage desktop computer" class="rounded-xl">
 
 So you want your application continuously deployed to Fly.io from its GitHub repository. Let's work through setting up an application for just that.
 

diff --git a/app-guides/graphql-edge-caching-apollo.html.erb b/app-guides/graphql-edge-caching-apollo.html.erb
@@ -10,7 +10,7 @@ categories:
   - apigw
   - cache
   - performance
-image: https://fly.io/ui/images/continuous-deployment.jpg
+image: https://fly.io/ui/images/continuous-deployment.webp
 date: 2020-06-21
 ---
 <%= partial "/docs/partials/obsolete_doc" %>

diff --git a/app-guides/planetscale.html.md b/app-guides/planetscale.html.md
@@ -22,27 +22,27 @@ The sample app assumes a database already exists. You'll need to create that dat
 
 Click on the black 'New database' button and pick 'Create new database'. Give it a name and choose its region. This is your **primary** database (we'll refer to it in multiple places later on). Choose the closest region to where you will deploy your app for the best performance:
 
-![Screenshot](docs/images/planetscale_new_database_dialog.png)
+![Screenshot](docs/images/planetscale_new_database_dialog.webp)
 
 PlanetScale uses branches for schemas. An initial `main` branch will be automatically created. It will take a few seconds to initialise so wait until that notification disappears. You should see a page similar to this:
 
-![Screenshot](docs/images/planetscale_database_created.png)
+![Screenshot](docs/images/planetscale_database_created.webp)
 
 Click on the _Connect_ button (or on the blue _"connect to your database"_ link). A dialog will open showing your username and password. Handily PlanetScale makes connection strings for various clients. For this app we'll choose the one listed to connect with Node.js. When we mention using the connection string for your primary database below, _this_ is the one we mean. Make a temporary note of this as it will only show you it once:
 
-![Screenshot](docs/images/planetscale_connect_nodejs.png)
+![Screenshot](docs/images/planetscale_connect_nodejs.webp)
 
 There are many SQL clients you could use to manage your database. We'll use [ArcType](https://arctype.com/). That comes with a PlanetScale integration. However to use its PlanetScale integration you need to create an Arctype account. For now we won't. So instead we'll use the standard _MySQL_ option. Click the appropriate option in your SQL client to create a new connection:
 
-![Screenshot](docs/images/planetscale_arctype_connections.png)
+![Screenshot](docs/images/planetscale_arctype_connections.webp)
 
 To save typing in all the details (a username, a password, and so on) we'll use that connection string noted above. Copy the entire value (starting from _"mysql://"_) into this box and then click the "Test connection" button. After a moment you should see a message to say it successfully connected. Click the blue "Save" button to proceed:
 
-![Screenshot](docs/images/planetscale_arctype_connection_url.png)
+![Screenshot](docs/images/planetscale_arctype_connection_url.webp)
 
 Click the blue "New Query" button in the top-right ready to run some basic SQL. Again, your editor will look slightly different:
 
-![Screenshot](docs/images/planetscale_arctype_new_query.png)
+![Screenshot](docs/images/planetscale_arctype_new_query.webp)
 
 We'll use the names of some fruits as some sample data. So paste this into your query editor and click the "Run" (or equivalent) button:
 
@@ -55,7 +55,7 @@ CREATE TABLE `fruits` (
 
 You should see it succeeded:
 
-![Screenshot](docs/images/planetscale_arctype_create_table_succeeded.png)
+![Screenshot](docs/images/planetscale_arctype_create_table_succeeded.webp)
 
 Add a few rows to that table:
 
@@ -67,19 +67,19 @@ INSERT INTO `fruits` (id, name) VALUES  (3, 'strawberry');
 
 Promote the main branch to production. The production branch is protected, highly available and is automatically backed up. You can promote a branch within the PlanetScale UI by simply clicking this button:
 
-![Screenshot](docs/images/planetscale_promote.png)
+![Screenshot](docs/images/planetscale_promote.webp)
 
 Assuming you have a _Scaler_, _Team_, or _Enterprise_ account, you will be able to add additional read-only regions. They can greatly improve the performance of your application, reducing the latency of reads from regions close to them. Click on the _main_ branch (the production one). You should see the option to _Add region_:
 
-![Screenshot](docs/images/planetscale_add_region.png)
+![Screenshot](docs/images/planetscale_add_region.webp)
 
 Choose the region you would like to create it in:
 
-![Screenshot](docs/images/planetscale_add_region_dialog.png)
+![Screenshot](docs/images/planetscale_add_region_dialog.webp)
 
 After a few moments those additional read-only regions should be ready. They may take slightly longer if there is a large amount of data to be replicated. Each region has its own, unique credentials. So click the "..." and then on _Connect_. It will show you a username, password and host. Make a connection string for each region that will look like this: "mysql://**username**:**password**@**host**/**database-name**?ssl={"rejectUnauthorized":true}":
 
-![Screenshot](docs/images/planetscale_add_region_connect.png)
+![Screenshot](docs/images/planetscale_add_region_connect.webp)
 
 Your database is now ready to be queried by our sample app!
 
@@ -296,7 +296,7 @@ If you try deploying the app to Fly and that fails, the most _likely_ reason is
 
 - Make sure to keep an eye on usage. If you exceed your included monthly allowance you are billed an additional fee:
 
-![Screenshot](docs/images/planetscale_misc_statistics.png)
+![Screenshot](docs/images/planetscale_misc_statistics.webp)
 
 - Since the usage is based on rows read (not rows fetched) make sure all of your queries are optimised. If they don't use an index, they could result in a table scan which will increase your costs.
 
@@ -337,4 +337,4 @@ To avoid charges you might want to delete the app and the PlanetScale database:
 - To delete the sample Fly app (this is irreversible), run `fly destroy the-app-name-here`
 - To delete the PlanetScale database, click the red delete button within the database's _Settings_ tab:
 
-![Screenshot](docs/images/planetscale_misc_delete.png)
+![Screenshot](docs/images/planetscale_misc_delete.webp)
diff --git a/app-guides/run-a-global-image-service.html.md.erb b/app-guides/run-a-global-image-service.html.md.erb
@@ -9,12 +9,12 @@ categories:
   - performance
   - proxy
   - cdn
-image: https://fly.io/ui/images/image-service.jpg
+image: https://fly.io/ui/images/image-service.webp
 date: 2020-05-10
 ---
 
 <figure class="flex ai:center jc:center w:full r:lg overflow:off mb:4">
-  <img src="/static/images/image-service.jpg" alt="A hand holding scissors and cutting out paper for a scrapbook" class="w:full h:full fit:cover">
+  <img src="/static/images/image-service.webp" alt="A hand holding scissors and cutting out paper for a scrapbook" class="w:full h:full fit:cover">
 </figure>
 
 <%= partial "/docs/partials/obsolete_doc" %>
@@ -85,10 +85,10 @@ To test our local image, let's process a file. In this case, we're going to crop
 In another terminal session, run:
 
 ```cmd
-curl -O "http://localhost:8080/crop?width=500&height=400&url=https://raw.githubusercontent.com/h2non/imaginary/master/testdata/large.jpg"
+curl -O "http://localhost:8080/crop?width=500&height=400&url=https://raw.githubusercontent.com/h2non/imaginary/master/testdata/large.webp"
 ```
 
-This will ask Imaginary to crop, to 100x100, an image stored in the Imaginary GitHub repository. This should result in a file, `large.jpg` being written to disc which you can display using your preferred image viewer. MacOS users can simply `open large.jpg` at the command line.
+This will ask Imaginary to crop, to 100x100, an image stored in the Imaginary GitHub repository. This should result in a file, `large.webp` being written to disc which you can display using your preferred image viewer. MacOS users can simply `open large.webp` at the command line.
 
 Open the cropped image. Take a moment to play with the width and height values in the URL we're querying and you will get different sized cropped images. Once you are happy the local build is working, you can return to the session where you started the docker image and ctrl-C to stop it.
 
@@ -261,13 +261,13 @@ IP Addresses
 This tells you all you need to know about your currently deployed application. If you take the `Hostname` you can use that in a URL request to the Fly deployment:
 
 ```cmd
-curl -O "http://flyimaginary.fly.dev/crop?width=500&height=400&url=https://raw.githubusercontent.com/h2non/imaginary/master/testdata/large.jpg"
+curl -O "http://flyimaginary.fly.dev/crop?width=500&height=400&url=https://raw.githubusercontent.com/h2non/imaginary/master/testdata/large.webp"
 ```
 
 Notice that we didn't need to specifiy port 8080 as we did with the local docker build. That's because port 80 on the host routes to port 8080. As an added bonus, we also got HTTPS support as port 443 also routes to port 8080, with Fly managing the TLS termination and the Let's Encrypt certificates. We can do the same query, over a secured connection, with:
 
 ```cmd
-curl -O "https://flyimaginary.fly.dev/crop?width=500&height=400&url=https://raw.githubusercontent.com/h2non/imaginary/master/testdata/large.jpg"
+curl -O "https://flyimaginary.fly.dev/crop?width=500&height=400&url=https://raw.githubusercontent.com/h2non/imaginary/master/testdata/large.webp"
 ```
 
 ## _Summary_

diff --git a/app-guides/speed-up-a-heroku-app.html.md.erb b/app-guides/speed-up-a-heroku-app.html.md.erb
@@ -7,14 +7,14 @@ author: dj
 categories:
   - app
   - heroku
-image: https://fly.io/ui/images/turbo.jpg
+image: https://fly.io/ui/images/turbo.webp
 date: 2020-03-10
 ---
 
 <%= partial "/docs/partials/obsolete_doc" %>
 
 <figure class="flex ai:center jc:center w:full r:lg overflow:off mb:4">
-  <img src="/static/images/turbo.jpg" alt="A smartphone flying through the air with an app on its screen" class="w:full h:full fit:cover">
+  <img src="/static/images/turbo.webp" alt="A smartphone flying through the air with an app on its screen" class="w:full h:full fit:cover">
 </figure>
 
 Heroku is a pioneering platform for applications as a service and has enabled many to bring their applications to market. There are, though, some things that Heroku doesn't do well.

diff --git a/elixir/advanced-guides/connect-livebook-to-your-app.html.md b/elixir/advanced-guides/connect-livebook-to-your-app.html.md
@@ -16,7 +16,7 @@ Livebook ends up being very flexible and powerful. Because Elixir nodes can easi
 
 Visualizing the setup:
 
-![WireGuard livebook connection](/docs/images/elixir-livebook-to-server-fly-overview.png?2/3&centered)
+![WireGuard livebook connection](/docs/images/elixir-livebook-to-server-fly-overview.webp?2/3&centered)
 
 ## Requirements
 
@@ -93,19 +93,19 @@ Create a new notebook titled, "Remote Connect Test" and add a Section.
 
 On the left side, click the "Runtime settings" as pictured below:
 
-![Runtime settings location on sidebar](/docs/images/livebook-data-analysis-runtime-click-step1.png?centered&card)
+![Runtime settings location on sidebar](/docs/images/livebook-data-analysis-runtime-click-step1.webp?centered&card)
 
 Before we can run any Elixir code, we need to connect to the remote server. To connect to the remote server, we will "Configure" the server we want to connect to.
 
-![Runtime settings configure connection](/docs/images/livebook-data-analysis-runtime-click-step2.png?centered&card)
+![Runtime settings configure connection](/docs/images/livebook-data-analysis-runtime-click-step2.webp?centered&card)
 
 Now we use "Attached Node" to connect to an existing Elixir node.
 
-![Runtime settings configure connection](/docs/images/livebook-data-analysis-runtime-click-step3.png?centered&card)
+![Runtime settings configure connection](/docs/images/livebook-data-analysis-runtime-click-step3.webp?centered&card)
 
 With the "Attached Node" mode selected, we need to provide 2 additional pieces of information before we can connect.
 
-![Attach steps](/docs/images/livebook-runtime-attach-steps.png?centered&card)
+![Attach steps](/docs/images/livebook-runtime-attach-steps.webp?centered&card)
 
 1. **Name** - Our node's name
 2. **Cookie** - The cookie value used by the deployed server

diff --git a/elixir/advanced-guides/connect-observer-to-your-app.html.md b/elixir/advanced-guides/connect-observer-to-your-app.html.md
@@ -14,7 +14,7 @@ Elixir, Erlang, and really just the BEAM has a slick feature called "[Observer](
 
 This shows a process tree for the application. Using this I can inspect individual processes or even kill them!
 
-![Observer screen shot](/docs/images/observer-tictac-local-application-pane.png?card&2/3&centered)
+![Observer screen shot](/docs/images/observer-tictac-local-application-pane.webp?card&2/3&centered)
 
 One very cool way to run Observer is to run it on your local machine (which has the ability to display the UI) and connect to a production server (with no windowing UI available) and "observe" it from a distance. So yeah... have a problem in production? Not sure what's going on? You can literally tunnel in, crack the lid and poke, prod, and peek around to see what's going on.
 
@@ -26,7 +26,7 @@ Fly.io natively supports [WireGuard](https://www.wireguard.com/), Jason Donenfel
 
 This is what we're going to do.
 
-![WireGuard observer connection](/docs/images/elixir-wireguard-observer-tunnel.png?2/3&centered)
+![WireGuard observer connection](/docs/images/elixir-wireguard-observer-tunnel.webp?2/3&centered)
 
 We will bring up a secure WireGuard tunnel that links to your servers on Fly. In this graphic, there are two `my_app` Elixir nodes clustered together running on Fly.
 
@@ -115,17 +115,17 @@ Interactive Elixir (1.12.1) - press Ctrl+C to exit (type h() ENTER for help)
 
 When observer first opens, it might looks something like this:
 
-![Observer connected to local node](/docs/images/observer-local-node.png?centered)
+![Observer connected to local node](/docs/images/observer-local-node.webp?centered)
 
 Notice that the window title shows `my_remote@...`? This means it's showing the stats of my local IEx node that isn't actually running any of my code. So this data isn't very interesting yet.
 
 If everything worked and it's connected, under the Nodes menu you should see the connected remote node.
 
-![Observer connected to local node](/docs/images/observer-local-node-menu.png?card&2/3&centered)
+![Observer connected to local node](/docs/images/observer-local-node-menu.webp?card&2/3&centered)
 
 When the remote node is selected, then all the stats and information changes to reflect what's going on in the selected node.
 
-![Observer connected to local node](/docs/images/observer-local-node-connected.png?scentered)
+![Observer connected to local node](/docs/images/observer-local-node-connected.webp?scentered)
 
 It worked! I'm seeing the information for the production node!
 

diff --git a/elixir/advanced-guides/interesting-things-with-livebook.html.md b/elixir/advanced-guides/interesting-things-with-livebook.html.md
@@ -76,7 +76,7 @@ Save the notebook with your project. I suggest creating a "notebook" folder to h
 
 At this point, we haven't connected to your project yet so you can't access your code. Let's do that now. Click the "Runtime settings" button.
 
-![Livebook runtime connection](/docs/images/livebook-data-analysis-runtime-click.png?card&centered)
+![Livebook runtime connection](/docs/images/livebook-data-analysis-runtime-click.webp?card&centered)
 
 Choose "Mix standalone" and click "Connect". If you started Livebook from your project's directory, it should already be in the right location for the mix project. Assuming your application compiles, it starts a runtime with your project's code available!
 
@@ -143,7 +143,7 @@ Vl.new()
 
 The `Vl` is the VegaLite alias. Here's the result:
 
-![Pie chart visualization](/docs/images/livebook-personality-pie-visualization.png?card&centered)
+![Pie chart visualization](/docs/images/livebook-personality-pie-visualization.webp?card&centered)
 
 Nice! I get a better sense for the personality type distribution in the question data.
 
@@ -172,13 +172,13 @@ Vl.new(width: 300, height: 300)
 
 Here's the result:
 
-![Bar chart visualization](/docs/images/livebook-personality-bar-visualization.png?card&centered)
+![Bar chart visualization](/docs/images/livebook-personality-bar-visualization.webp?card&centered)
 
 ### Getting Started with VegaLite
 
 If the VegaLite code looks scary, don't worry! I'm actually a total VegaLite noob! Livebook includes some built-in notebooks you should check out for code examples on how to structure data and configure VegaLite for the visualization you want.
 
-![VegaLite examples](/docs/images/livebook-vegalite-examples.png?card&2/3&centered)
+![VegaLite examples](/docs/images/livebook-vegalite-examples.webp?card&2/3&centered)
 
 Then I customized a little using the [VegaLite docs](https://vega.github.io/vega-lite/docs/) and [examples](https://vega.github.io/vega-lite/examples/).
 

diff --git a/getting-started/index.html.md b/getting-started/index.html.md
@@ -6,7 +6,7 @@ nav: firecracker
 ---
 
 <figure>
-  <img src="/static/images/docs-guide.jpg" srcset="/static/images/docs-guide@2x.jpg 2x" alt="Illustration by Annie Ruygt of a chair and a small table holding a hot drink, on a rooftop, with a city skyline and hot-air balloons in the background">
+  <img src="/static/images/docs-guide.webp" srcset="/static/images/docs-guide@2x.webp 2x" alt="Illustration by Annie Ruygt of a chair and a small table holding a hot drink, on a rooftop, with a city skyline and hot-air balloons in the background">
 </figure>
 
 This section of the Fly.io docs is all about getting you up and running quickly.

diff --git a/getting-started/multi-region-databases.html.md b/getting-started/multi-region-databases.html.md
@@ -14,7 +14,7 @@ Most read-heavy, PostgreSQL-backed applications work natively across regions on
 
 With regional read replicas configured, the `fly-replay` header lets you specify exactly which requests need to be serviced by the primary, writable database. When we detect this header, we will replay the entire request to the region you specify. It looks something like this:
 
-<img src="/static/images/fly-global-postgres.png"  alt="Diagram of app + global postgres on Fly.io">
+<img src="/static/images/fly-global-postgres.webp"  alt="Diagram of app + global postgres on Fly.io">
 
 In most runtimes, it's straightforward to catch a read-only database error in a replica region and serve a response with the appropriate replay header.
 

diff --git a/hands-on/index.html.md.erb b/hands-on/index.html.md.erb
@@ -9,7 +9,7 @@ redirect_from:
 ---
 
 <figure>
-  <img src="/static/images/hands-on.jpg" srcset="/static/images/hands-on@2x.jpg 2x" alt="">
+  <img src="/static/images/hands-on.webp" srcset="/static/images/hands-on@2x.webp 2x" alt="">
 </figure>
 
 In this work-through we're going to deploy an application to Fly.io. In this example, the application will come from a Docker image, but first, we want to install all the tools you need to work with Fly.io. Which is one tool: flyctl.

diff --git a/hands-on/open-app.html.md.erb b/hands-on/open-app.html.md.erb
@@ -16,7 +16,7 @@ fly open /fred
 Opening http://hellofly.fly.dev/fred
 ```
 
-<img src="/docs/hands-on/images/helloflyandfred.png" alt="Hello from Fly Screenshot" class="rounded-xl shadow-lg">
+<img src="/docs/hands-on/images/helloflyandfred.webp" alt="Hello from Fly Screenshot" class="rounded-xl shadow-lg">
 
 You have successfully deployed and visited your first Fly App.