Image and file handling in Ruby on Rails - Performance & Optimization

Performance: Image and file handling

HIGH IMPACT

This affects page load speed and interaction responsiveness by controlling how images and files are loaded and rendered on the page.

Serving images in a Rails app

Ruby on Rails

image_tag @user.avatar.variant(resize_to_limit: [300, 300]), loading: 'lazy', alt: 'User avatar'

Resizes image on server and defers loading until needed, reducing initial load and bandwidth.

📈 Performance GainImproves LCP by 30-50%, reduces bandwidth by 70%

Serving images in a Rails app

Ruby on Rails

image_tag @user.avatar.url, loading: 'eager'

Loads all images immediately, blocking page rendering and increasing load time.

📉 Performance CostBlocks rendering for 200-500ms depending on image size

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager loading full-size images	Minimal	1 per image	High due to large decode	[X] Bad
Lazy loading resized images	Minimal	1 per image	Low due to smaller decode	[OK] Good
Synchronous file processing on request	N/A	N/A	Blocks server response	[X] Bad
Asynchronous background file processing	N/A	N/A	Non-blocking	[OK] Good

Rendering Pipeline

Images and files are fetched, decoded, and painted by the browser. Large or unoptimized images delay style calculation and layout, increasing LCP.

→Network Fetch

→Decode

→Layout

→Paint

⚠️ BottleneckNetwork Fetch and Decode stages due to large file sizes

Core Web Vital Affected

LCP

This affects page load speed and interaction responsiveness by controlling how images and files are loaded and rendered on the page.

Optimization Tips

1Always resize and compress images on the server before sending to the client.

2Use lazy loading for images below the fold to improve initial load speed.

3Process large files asynchronously to avoid blocking server response.

Performance Quiz - 3 Questions

What is the main performance benefit of lazy loading images in Rails views?

A Images are always cached on the server

B Images are converted to text for faster loading

C Images load only when needed, reducing initial page load time

D Images are loaded in parallel with scripts

DevTools: Performance

How to check: Record a page load, then filter for 'Image Decode' and 'Network' events to see image load and decode times.

What to look for: Long image decode or network fetch times indicate unoptimized images affecting LCP.

Practice

1. Which method in Rails is used to associate a single file attachment with a model?

easy

A. has_many_attached

B. has_one_attached

C. attach_file

D. file_attachment

Solution

1. Step 1: Understand Rails Active Storage associations

   Rails uses has_one_attached to link a single file to a model and has_many_attached for multiple files.

2. Step 2: Identify the correct method for single file

   Since the question asks for a single file, has_one_attached is the correct method.

3. Final Answer:

   has_one_attached -> Option B

4. Quick Check:

   Single file attachment = has_one_attached [OK]

Hint: Single file uses has_one_attached, multiple files use has_many_attached [OK]

Common Mistakes:

• Confusing has_one_attached with has_many_attached
• Using non-existent methods like attach_file
• Thinking file_attachment is a Rails method

2. Which of the following is the correct syntax to attach a file to a model instance in a Rails controller?

easy

A. user.avatar.attach(params[:avatar])

B. user.attach_avatar(params[:avatar])

C. user.avatar = params[:avatar]

D. user.attach_file(:avatar, params[:avatar])

Solution

1. Step 1: Recall the Active Storage attach syntax

   To attach a file, you call attach on the attachment association, passing the file parameter.

2. Step 2: Match the syntax to the options

   user.avatar.attach(params[:avatar]) uses user.avatar.attach(params[:avatar]), which is the correct Rails syntax.

3. Final Answer:

   user.avatar.attach(params[:avatar]) -> Option A

4. Quick Check:

   Attach file with .attach method on association [OK]

Hint: Use .attach on the attachment association to add files [OK]

Common Mistakes:

• Using non-existent methods like attach_avatar
• Assigning file directly to association
• Trying to call attach_file which is not a Rails method

3. Given the following code in a Rails view:

<% if @user.avatar.attached? %>
  <%= image_tag @user.avatar %>
<% else %>
  <p>No avatar uploaded</p>
<% end %>

What will be displayed if the user has not uploaded an avatar?

medium

A. An error because avatar is nil

B. The image tag with a broken image

C. The text 'No avatar uploaded'

D. Nothing will be displayed

Solution

1. Step 1: Understand the attached? method

   The attached? method returns true if a file is attached, false otherwise.

2. Step 2: Analyze the conditional rendering

   If no avatar is attached, the else block runs, showing the text 'No avatar uploaded'.

3. Final Answer:

   The text 'No avatar uploaded' -> Option C

4. Quick Check:

   attached? false shows else text [OK]

Hint: Check attached? before showing file to avoid errors [OK]

Common Mistakes:

• Assuming image_tag works with nil attachment
• Expecting no output instead of else block
• Confusing attached? with presence of file path

4. Consider this controller code snippet:

def update
  @user = User.find(params[:id])
  @user.avatar.attach(params[:avatar])
  if @user.save
    redirect_to @user
  else
    render :edit
  end
end

What is the main issue with this code when attaching a file?

medium

A. Using attach before save causes an error

B. params[:avatar] should be inside a hash like avatar: params[:avatar]

C. attach should be called only after @user.save

D. attach does not save the file automatically

Solution

1. Step 1: Understand attach behavior

   The attach method links the file to the model but does not save the model automatically.

2. Step 2: Analyze the save call

   The code calls @user.save after attaching, which saves the model and the attachment together correctly.

3. Step 3: Identify the issue

   attach does not save the file automatically correctly states that attach alone does not save the file; save must be called to persist changes.

4. Final Answer:

   attach does not save the file automatically -> Option D

5. Quick Check:

   attach links file, save persists it [OK]

Hint: Remember to call save after attach to persist files [OK]

Common Mistakes:

• Thinking attach saves file immediately
• Calling attach after save instead of before
• Passing params incorrectly to attach

5. You want to allow users to upload multiple images for a product in Rails. Which combination of model and view code correctly supports this?

Model:

class Product < ApplicationRecord
  ?
end

View form snippet:

<%= form_with model: @product, local: true do |form| %>
  <%= form.file_field :images, multiple: true %>
  <%= form.submit %>
<% end %>

hard

A. Model: has_many_attached :images

B. Model: has_one_attached :images

C. Model: has_many :images

D. Model: has_one :images

Solution

1. Step 1: Identify multiple file attachment method

   For multiple files, Rails uses has_many_attached in the model.

2. Step 2: Match with form file_field multiple option

   The form uses multiple: true on file_field, which pairs with has_many_attached.

3. Final Answer:

   Model: has_many_attached :images -> Option A

4. Quick Check:

   Multiple files need has_many_attached [OK]

Hint: Use has_many_attached with multiple: true in file_field [OK]

Common Mistakes:

• Using has_one_attached for multiple files
• Confusing has_many association with Active Storage
• Not setting multiple: true in the form