diff --git a/app/views/shared/_banner.html.erb b/app/views/shared/_banner.html.erb
index 16c84fae670..fc8e61568c4 100644
--- a/app/views/shared/_banner.html.erb
+++ b/app/views/shared/_banner.html.erb
@@ -29,6 +29,7 @@
<%= image_tag(
asset_url('icon-dot-gov.svg'),
+ size: 40,
alt: 'Dot gov',
class: 'usa-banner__icon usa-media-block__img',
) %>
@@ -42,6 +43,7 @@
<%= image_tag(
asset_url('icon-https.svg'),
+ size: 40,
alt: 'Https',
class: 'usa-banner__icon usa-media-block__img',
) %>
diff --git a/app/views/shared/_footer_lite.html.erb b/app/views/shared/_footer_lite.html.erb
index 1e925e21424..9ebe3b4caf9 100644
--- a/app/views/shared/_footer_lite.html.erb
+++ b/app/views/shared/_footer_lite.html.erb
@@ -7,7 +7,7 @@
<%= new_window_link_to 'https://gsa.gov', { class: 'text-no-underline h6 margin-right-2 tablet:display-none',
'aria-label': t('shared.footer_lite.gsa') } do %>
<%= image_tag asset_url('sp-logos/square-gsa-dark.svg'),
- width: 20, alt: '' %>
+ size: 20, alt: '' %>
<% end %>
@@ -15,7 +15,7 @@
<%= new_window_link_to 'https://gsa.gov', { class: 'text-no-underline h6 margin-right-2',
'aria-label': t('shared.footer_lite.gsa') } do %>
<%= image_tag asset_url('sp-logos/square-gsa.svg'),
- width: 20, class: 'float-left margin-right-1', alt: '' %>
+ size: 20, class: 'float-left margin-right-1', alt: '' %>
<%= t('shared.footer_lite.gsa') %>
diff --git a/app/views/users/phone_setup/index.html.erb b/app/views/users/phone_setup/index.html.erb
index 07dd7570202..df9b03f6b5a 100644
--- a/app/views/users/phone_setup/index.html.erb
+++ b/app/views/users/phone_setup/index.html.erb
@@ -2,7 +2,7 @@
<%= render(VendorOutageAlertComponent.new(vendors: [:sms, :voice])) %>
-<%= image_tag asset_url('2FA-voice.svg'), alt: '', width: 200, class: 'margin-bottom-2' %>
+<%= image_tag asset_url('2FA-voice.svg'), alt: '', width: 200, height: 113, class: 'margin-bottom-2' %>
<%= render PageHeadingComponent.new.with_content(t('titles.phone_setup')) %>
diff --git a/app/views/users/piv_cac_setup_from_sign_in/success.html.erb b/app/views/users/piv_cac_setup_from_sign_in/success.html.erb
index 80bce59cfce..ea8b3bc741b 100644
--- a/app/views/users/piv_cac_setup_from_sign_in/success.html.erb
+++ b/app/views/users/piv_cac_setup_from_sign_in/success.html.erb
@@ -1,6 +1,6 @@
<% title t('headings.piv_cac_login.success') %>
-<%= image_tag asset_url('alert/success.svg'), width: 90, class: 'margin-bottom-2' %>
+<%= image_tag asset_url('alert/success.svg'), size: 90, class: 'margin-bottom-2' %>
<%= render PageHeadingComponent.new.with_content(t('headings.piv_cac_login.success')) %>
diff --git a/app/views/users/totp_setup/new.html.erb b/app/views/users/totp_setup/new.html.erb
index 6a0c46fb1e7..7876b436f7e 100644
--- a/app/views/users/totp_setup/new.html.erb
+++ b/app/views/users/totp_setup/new.html.erb
@@ -28,7 +28,7 @@
<%= c.item(heading: t('forms.totp_setup.totp_step_2')) %>
<%= c.item(heading: t('forms.totp_setup.totp_step_3')) do %>
- <%= image_tag @qrcode, skip_pipeline: true, alt: t('image_description.totp_qrcode') %>
+ <%= image_tag @qrcode, size: 240, skip_pipeline: true, alt: t('image_description.totp_qrcode') %>
<%= t('instructions.mfa.authenticator.manual_entry') %>
diff --git a/lib/linters/image_size_linter.rb b/lib/linters/image_size_linter.rb
new file mode 100644
index 00000000000..7a23a49b8e1
--- /dev/null
+++ b/lib/linters/image_size_linter.rb
@@ -0,0 +1,37 @@
+module RuboCop
+ module Cop
+ module IdentityIdp
+ # This lint ensures that images rendered with Rails tag helpers include a size attribute
+ # (`width` and `height`, or `size`), which is a best practice to avoid layout shifts.
+ #
+ # @see https://web.dev/optimize-cls/#images-without-dimensions
+ #
+ # @example
+ # # bad
+ # image_tag 'example.svg'
+ #
+ # # good
+ # image_tag 'example.svg', width: 10, height: 20
+ #
+ class ImageSizeLinter < RuboCop::Cop::Cop
+ MSG = 'Assign width and height to images'.freeze
+
+ RESTRICT_ON_SEND = [:image_tag]
+
+ def on_send(node)
+ add_offense(node, location: :expression) if !valid?(node)
+ end
+
+ private
+
+ def valid?(node)
+ options = node.arguments.last
+ return false if options.type != :hash
+ return true if options.child_nodes.any? { |child_node| child_node.type == :kwsplat }
+ key_names = options.keys.map { |key| key.value }
+ key_names.include?(:size) || (key_names.include?(:width) && key_names.include?(:height))
+ end
+ end
+ end
+ end
+end
diff --git a/spec/lib/linters/image_size_linter_spec.rb b/spec/lib/linters/image_size_linter_spec.rb
new file mode 100644
index 00000000000..b01bbfd134c
--- /dev/null
+++ b/spec/lib/linters/image_size_linter_spec.rb
@@ -0,0 +1,43 @@
+require 'rubocop'
+require 'rubocop/rspec/support'
+require_relative '../../../lib/linters/image_size_linter'
+
+describe RuboCop::Cop::IdentityIdp::ImageSizeLinter do
+ include CopHelper
+ include RuboCop::RSpec::ExpectOffense
+
+ let(:config) { RuboCop::Config.new }
+ let(:cop) { RuboCop::Cop::IdentityIdp::ImageSizeLinter.new(config) }
+
+ it 'registers offense when calling image_tag without any size attributes' do
+ expect_offense(<<~RUBY)
+ image_tag 'example.svg'
+ ^^^^^^^^^^^^^^^^^^^^^^^ Assign width and height to images
+ RUBY
+ end
+
+ it 'registers offense when calling image_tag with only one of width or height' do
+ expect_offense(<<~RUBY)
+ image_tag 'example.svg', width: 10
+ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Assign width and height to images
+ RUBY
+ end
+
+ it 'registers no offense if there is ambiguous hash splatting' do
+ expect_no_offenses(<<~RUBY)
+ image_tag 'example.svg', **size_attributes
+ RUBY
+ end
+
+ it 'registers no offense when calling image_tag with size' do
+ expect_no_offenses(<<~RUBY)
+ image_tag 'example.svg', size: 10
+ RUBY
+ end
+
+ it 'registers no offense when calling image_tag with width and height' do
+ expect_no_offenses(<<~RUBY)
+ image_tag 'example.svg', width: 10, height: 20
+ RUBY
+ end
+end