How to minimize the size of these 3 GIFs?

Store Design
, ,

Topic summary

Problem: Three 180×180 WEBP “GIFs” copied from another site appear oversized and low‑quality on a Shopify homepage. The poster also tried uploading smaller files (100 px), but Shopify seems to display them larger, reducing quality.

Root context: The images are placed in a Shopify Multicolumn section (a theme block that lays out items in columns), where responsive settings can scale images beyond their native size.

Proposed solutions:

  • Theme setting: Online Store > Themes > Customize > open the Multicolumn section and set Image width to “One‑third width of column” to reduce rendered size.
  • Custom CSS: In the section’s custom CSS, limit the image wrapper (.multicolumn-card__image-wrapper) with max-width (e.g., 150 px; adjust to 120–180 px as needed) to constrain display size regardless of uploaded asset.

Notes: The key is controlling front‑end display dimensions rather than re-uploading smaller files, since Shopify’s responsive theme may upscale images.

Status: No confirmation of a final fix. Action items are to adjust the Multicolumn image width setting or apply the CSS cap; outcome pending the original poster’s test and feedback.

Summarized with AI on January 14. AI used: gpt-5.
1

Hey guys, I copied these 3 GIFs from another website and they are in WEBP format and 180px by 180px.

On this website it looks good (scroll to bottom of home page): https://sasifyofficial.com/

wrldwide_1-1698983464639.png
wrldwide_1-1698983464639.png1496×370 39.3 KB

But on my website, it looks messed up because it’s too large and lower quality: http://wrldwidesupply.com/

Password: secret123456

wrldwide_0-1698983409291.png
wrldwide_0-1698983409291.png1210×588 88.4 KB

I’ve also tried using online tools to resize the GIFs to 100px but when I try to reupload it seems that Shopify is automatically resizing it to a larger size.

Any thoughts on how to minimize the size of the GIFs and fix this problem?

2

Go to your Online store > Themes > Customize > select on that Multicolumn section, change Image width setting to One-third width of column

![Screenshot 2023-11-03 at 11.21.12.png|1789x923](upload://xM4SHLMzj4j3dnr3b8pUpTLNI29.jpeg)
1 Like
3

You can go to where your section is in the theme customizer and, in the custom css area, you can add something like

.multicolumn-card__image-wrapper {
max-width: 150px; 
}

where it is 150px, you can change to whichever suits you, such as 120px, 180px, and so on

1 Like