Broadcast Documentation
NewSupport
Latest version
Latest version
  • About Broadcast
    • Broadcast theme documentation
    • Feature requests
  • Updates
    • What's new in Broadcast
      • Release Notes
      • About v6.2 release
      • About v6.1 release
      • About v6.0 release
      • About v5.8 release
      • About v5.7 release
      • About v5.6 release
      • About v5.5 release
      • About v5.4 release
      • About v5.3 release
      • About v5.2 release
      • About v5.1 release
      • About v5.0 release
      • About v4.0 release
  • Sections
    • Broadcast sections
      • Demo store sections
      • Accordion
        • Text column
        • Image column
        • Icon column
        • Custom code
        • Contact form
      • Accordion group
        • Heading
        • Question
      • Before and After
        • Heading
        • Subheading
        • Text
        • Button
      • Blog posts
      • Collection list
        • Collection
      • Collection list hover
        • Collection
      • Countdown timer
        • Subheading
        • Heading
        • Text
        • Buttons
      • Contact form
        • Email
        • Message
        • Text line
        • Text area
        • Telephone
        • Heading
        • Spacer
        • Single checkbox
        • Select dropdown
        • Radio buttons
      • Custom code
      • Custom content
        • Image
        • Text
        • Newsletter
        • Testimonial
        • Product
        • Video
        • Collection
        • Before and after
      • Divider
      • Featured blog posts
        • Featured post
      • Featured collection
      • Featured product
      • Highlights
        • Highlight
      • Image banner
        • Heading
        • Text
        • Single button
        • Side by side buttons
        • Custom code
      • Image with product
        • Heading
        • Text
        • Single button
        • Side by side buttons
        • Custom code
      • Image with scrolling text
        • Scrolling text
        • Heading
        • Text
        • Button
      • Image with text
        • Heading
        • Subheading
        • Text
        • Button
        • Divider
        • Accordion
        • Image
        • Video
        • Product
        • Collection
        • Custom code
      • Image with text slider
        • Text slide
      • Map
      • Multicolumn
        • Image
        • Icon
        • Text
        • Menu
        • Product
      • Newsletter
        • Image
        • Text
        • Newsletter
      • Press logos
        • Logo with header
        • Logo with text
      • Products with image
        • Products
        • Image
      • Recently viewed products
      • Rich text
        • Heading
        • Subheading
        • Text
        • Button
        • Image
        • Divider
      • Rich text with columns
        • Heading
        • Text
        • Buttons
      • Scrolling text
        • Heading
        • Text
        • Free shipping message
        • Custom code
        • Image
        • Collection
        • Advanced text
      • Shop the look
        • Product
      • Sidebar
        • Header
        • Accordion
        • Text
      • Slideshow
      • Tab collections
        • Collection
      • Testimonials
        • Testimonial
      • Text columns with icons
        • Icon
      • Text columns with images
        • Image
      • Text promo
        • Button
        • Heading
        • Text
      • Text with products
        • Collection
        • Product
        • Image
      • Timeline
        • Timeline
      • Video
  • Theme settings
    • Theme settings
      • Colors
      • Typography
      • Buttons
      • Layout
      • Search
      • Social media
      • Product grid
      • Product form
      • Swatches
      • Favicon
      • Cart
      • Currency format
  • Header
    • Announcement bar
      • Announcement bar section
      • Text announcement
      • Free shipping message
      • Custom code
      • Countdown timer
      • Target settings
    • Header
      • Demo store header settings
      • Section settings
        • Transparent header
        • Quantity indicators
        • Social icons
        • Navigation images
      • Header blocks
        • Image
        • Toolbar
    • Mobile menu
      • Section settings
      • Blocks
        • Menu
        • Menu columns
        • Image
        • Icon
        • Text
        • Button
        • Review
        • Language and currency
        • Social media
        • Collection
        • Product
        • Divider
        • Search bar
  • Footer
    • Footer sections
      • Logo
      • Supporting menu
    • Footer settings
    • Footer blocks
      • Link list
      • Newsletter
      • Social
      • Text
      • Page
      • Divider
  • Products
    • Product pages
      • Settings and layout
      • Final Sale
      • Out-of-stock notification
      • Pre-order using metafields
      • Pre-order products using tags
      • Sale items
      • Size charts
      • Swatches (Updated)
      • Swatch collection styles
  • Product Theme Blocks
    • Title
    • Price
    • Variant picker
    • Buy buttons
    • Siblings
    • Description
    • Tabs
    • Accordion
    • Upsell
    • Inventory countdown
    • Sharing
    • Local pickup
    • Text
    • Custom code
    • Icon
    • Divider
    • Line item property
    • Feature
    • Complementary products
    • Popup
    • Badges
    • SKU
    • Fit guide
    • Countdown timer
  • Product recommendations section
    • Related products
    • Recently viewed products
  • Collections
    • Collection pages
      • Collection products
        • Featured image
      • Subcollections
      • Swatch collection styles
      • Product badges
      • Product badges with metafields
      • Product filtering
      • Quick add
      • Cutline second line
  • Pages
    • Page templates
      • Demo store about page
      • Page section
      • Creating page templates
      • About page templates
  • Blogs
    • Blogs
      • About blogs and articles
      • Featured blog posts
        • Featured post
    • Blog posts
      • Article page
        • Navigation
        • Related products
        • Recent articles
        • Default image
      • Product links in blog posts
  • Overlay
    • Cart drawer
      • Title
      • Cart message
      • Free shipping message
      • Products
      • Upsell products
      • Order note
      • Gift note
      • Shipping estimate
      • Icon
      • Product list
      • Custom code
      • Payment icons
      • Checkout buttons
    • Newsletter
      • Popup
      • Mini popup
    • Text promotion
    • Additional settings
  • Promotions
    • Upselling
      • Upselling with metafields
      • Upselling with tags
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Siblings metafields
      • Siblings color
      • Siblings collection
      • Siblings product setup
      • Siblings block
      • Customizations
  • FAQ
    • Frequently asked questions
      • How to update Broadcast
      • Default theme content
      • Share preview link
      • Hiding prices
      • How to use sections
      • Section blocks
      • How to remove Powered by Shopify
      • Improving the speed of your site
      • How to prevent your images from getting cropped
      • Check your theme version
      • CSS customizations
      • Missing Cart Drawer after Updating
  • License
    • Theme license
  • Support
    • Theme support policy
    • Contacting support
    • Hire a Shopify Expert
Powered by GitBook
On this page
  • Understanding Image Aspect Ratio
  • How do I get the aspect ratio that the section requires me to use?
Export as PDF
  1. FAQ
  2. Frequently asked questions

How to prevent your images from getting cropped

PreviousImproving the speed of your siteNextCheck your theme version

Cropped images are a common issue when designing a website. Here is our answer to why your images are cropped and how to prevent cropping.

Understanding Image Aspect Ratio

The ratio between the width and height of your image forms its aspect ratio. Let's take, for example, 16:9. The first number (16) refers to the width, and the second (9) refers to the height. If you upload a 16:9 image to a 1:1 section, your image will be cropped due to the difference between the width and height of the section and your image. Cropping prevents your picture from being stretched and deformed.

However, if you upload an image with the same aspect ratio as the section, your image will not get cropped.

How do I get the aspect ratio that the section requires me to use?

You will need to crop the image placeholder of the section to get the image resolution.

You must turn on your snipping tool for Windows users to crop out the image section.

For Mac users, click Command + Shift + 4 to turn on the screen cropping tool.

Go to the section in which you would want to get the image aspect ratio:

Here is what your cropped image should look like. Be sure to be as precise as possible:

Save the image on your desktop, right-click, and click on properties or file info. From there, you must locate the image's dimensions to use them to calculate the aspect ratio.

Windows:

Mac:

In this situation, we will be working with 467x468 (Windows example). Use this aspect ratio calculator to identify the aspect ratio you must use: https://ww.digitalrebellion.com/webapps/aspectcalc.

After doing this, you now have the aspect ratio of the section, and you know what image resolution you need. Note: Your image resolution can be different and still have the same aspect ratio as shown in the example below:

Always select a low-mid resolution to make your images lighter and improve site speed.

Let's upload a 1000x1000 and 1920x1080 image into the section that we just worked with:

- 1000x1000 Dimensions / 1:1 Aspect Ratio

- 1920x1080 Dimensions / 16:9 Aspect Ratio

Since the 1000x1000 image has the same aspect ratio as the section, it does not get cropped as opposed to the 1920x1080 image.

How both images get displayed in the store: