# Interactions Gallery replace images?

**URL:** <https://forum.pinegrow.com/t/interactions-gallery-replace-images/4722>\
**Category:** Beginners\
**Created:** [November 26, 2020, 6:37pm UTC](https://forum.pinegrow.com/t/interactions-gallery-replace-images/4722 "2020-11-26T18:37:33Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [November 26, 2020, 6:37pm UTC](https://forum.pinegrow.com/t/interactions-gallery-replace-images/4722/1 "2020-11-26T18:37:33Z")

</div>

1. What are the best image sizes for for popup & inline galleries?

2. Is code below where I replace images and if so what beside data-title and data-description what do I need to keep?

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [November 26, 2020, 8:47pm UTC](https://forum.pinegrow.com/t/interactions-gallery-replace-images/4722/2 "2020-11-26T20:47:16Z")

</div>

1. My personal opinion. With internet speeds going up, there is not so much benefit in serving many different image sizes. Keep thumbnails at x 2 the displayed size to look good on retina. And large images not larger than 200KB - 300KB, again serving x 2 sizes.

2. Change SRCs, HREFs, data-title and data-descriptions. Keep the \<a …\> ![]() structure.

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [November 26, 2020, 9:49pm UTC](https://forum.pinegrow.com/t/interactions-gallery-replace-images/4722/3 "2020-11-26T21:49:31Z")

</div>

Don’t images require a certain proportion like square, 3x4 for landscape and portrait sizes? It looks like these all have a large amount of background color around the apple, pear, other fruit.

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [November 26, 2020, 11:30pm UTC](https://forum.pinegrow.com/t/interactions-gallery-replace-images/4722/4 "2020-11-26T23:30:52Z")

</div>

The shape doesn’t matter, they are displayed with object-fit. Of course, you can use CSS to change sizes, shapes any way you want. Style is there just as a starting point.

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [November 27, 2020, 8:37am UTC](https://forum.pinegrow.com/t/interactions-gallery-replace-images/4722/5 "2020-11-27T08:37:17Z")

</div>

> [@matjaz](#):
>
> My personal opinion. With internet speeds going up, there is not so much benefit in serving many different image sizes. Keep thumbnails at x 2 the displayed size to look good on retina. And large images not larger than 200KB - 300KB, again serving x 2 sizes.

I don’t agree with your personal opinion! And Google doesn’t as well! Using multiple images with different “Art Directions” sizes and file extensions offers a lot of advantages compare to using just one image. The only disadvantage is that it cost you a lot more time. But when you use a cloud service it’s all done automatically. And plugins like Farkas Lazy Sizes make it easy too.[https://github.com/aFarkas/lazysizes](https://github.com/aFarkas/lazysizes)

- I prefer to see good quality images on my 5k iMac screen and no 2x images that look blurry!

- The fact that the internet is faster doesn’t mean that there aren’t locations with slow internet.

- By only serving the proper image size and extension jpg and webp (that works on every browser now with the last update of Big Sur) you have faster loading times on mobile no matter if the internet is faster/slower.

- Creating images with art directions means much more creativity with designing the website.

- SEO advantage, Google measures your website speed and according to the results gives you a ranking: [https://developers.google.com/web/updates/2018/07/search-ads-speed](https://developers.google.com/web/updates/2018/07/search-ads-speed)

- By optimizing your website and using good responsive images practices you save energy and bandwidth on your server.

- And most important it’s fun to do!

---

<div class="post-metadata">

**Author:** ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)\
**Post date:** [November 30, 2020, 10:17pm UTC](https://forum.pinegrow.com/t/interactions-gallery-replace-images/4722/6 "2020-11-30T22:17:12Z")

</div>

Replacing href= with img src in top line is wrong. What should I do?

`<a <img src="img_design/DocDesign764x900.jpg"> data-title="Orange" data-description="Want some orange juice?"><img src="img_design/DocDesign764x900.jpg"></a> data-title="Orange" data-description="Want some orange juice?"> <img src="img_design/DocDesign764x900.jpg">`

`<a href="https://images.unsplash.com/photo-1528825871115-3581a5387919?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&fit=max&ixid=eyJhcHBfaWQiOjIwOTIyfQ" data-title="Banana" data-description="Peel a banana for a quick snack."><img src="img_design/TuxCatRedChair764x900.jpg"></a>`

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [December 1, 2020, 2:55am UTC](https://forum.pinegrow.com/t/interactions-gallery-replace-images/4722/7 "2020-12-01T02:55:41Z")

</div>

@AllMediaLab that’s why I said it’s my personal opinion 🙂 Responsive images are great when you can get them with low effort - for example by postprocessing on some hosting services or with a CMS like WP.

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [December 1, 2020, 2:59am UTC](https://forum.pinegrow.com/t/interactions-gallery-replace-images/4722/8 "2020-12-01T02:59:26Z")

</div>

Hi @kat,

the HTML code should be:

```
<a href="img_design/DocDesign764x900.jpg" data-title="Orange" data-description="Want some orange juice?">
    <img src="img_design/DocDesign[THUMBNAIL SIZE].jpg">
</a>

```

The a href should be the URL of the full size image and the img src should be the URL of its thumbnail.