diff --git a/core/modules/image/src/Form/ImageStyleEditForm.php b/core/modules/image/src/Form/ImageStyleEditForm.php
index 574d9145a8..748159cdb0 100644
--- a/core/modules/image/src/Form/ImageStyleEditForm.php
+++ b/core/modules/image/src/Form/ImageStyleEditForm.php
@@ -2,6 +2,7 @@
 
 namespace Drupal\image\Form;
 
+use Drupal\Component\Utility\Unicode;
 use Drupal\Core\Entity\EntityStorageInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Url;
@@ -143,7 +144,7 @@ public function form(array $form, FormStateInterface $form_state) {
     $new_effect_options = [];
     $effects = $this->imageEffectManager->getDefinitions();
     uasort($effects, function ($a, $b) {
-      return strcasecmp($a['id'], $b['id']);
+      return Unicode::strcasecmp((string) $a['label'], (string) $b['label']);
     });
     foreach ($effects as $effect => $definition) {
       $new_effect_options[$effect] = $definition['label'];
diff --git a/core/modules/image/src/Tests/ImageAdminStylesTest.php b/core/modules/image/src/Tests/ImageAdminStylesTest.php
index 5313b7fdbb..38fd984876 100644
--- a/core/modules/image/src/Tests/ImageAdminStylesTest.php
+++ b/core/modules/image/src/Tests/ImageAdminStylesTest.php
@@ -203,6 +203,10 @@ public function testStyle() {
     $this->assertTitle(t('Edit style @name | Drupal', ['@name' => $style_label]));
     $this->assertResponse(200, format_string('Image style %original renamed to %new', ['%original' => $style->id(), '%new' => $style_name]));
 
+    // Check that the available image effects are properly sorted.
+    $option = $this->xpath('//select[@id=:id]//option', [':id' => 'edit-new--2']);
+    $this->assertTrue($option[1] == 'Ajax test', '"Ajax test" is the first selectable effect.');
+
     // Check that the image was flushed after updating the style.
     // This is especially important when renaming the style. Make sure that
     // the old image directory has been deleted.