Как можно добавить анимацию в эту ситуацию?

Для добавления анимации плавного изменения фотографий в данном коде, можно использовать CSS transitions и JavaScript. 

Вот как можно это реализовать:

1. Добавьте CSS transition свойства для элемента .slider-image:
```css
.slider-image {
  /* Другие стили */
  
  transition: opacity 0.3s ease-out;
}
```

2. Создайте переменную currentImageIndex, которая будет отслеживать текущий индекс фотографии:
```javascript
var currentImageIndex = 0;
```

3. Создайте функцию changeImage, которая будет получать новый индекс фотографии и изменять стиль .slider-image, чтобы показать новую фотографию:
```javascript
function changeImage(newIndex) {
  var images = document.getElementsByClassName('slider-image');
  
  if (newIndex >= 0 && newIndex < images.length) {
    // Изменяем прозрачность текущей фотографии на 0
    images[currentImageIndex].style.opacity = 0;
    
    // Изменяем прозрачность новой фотографии на 1
    images[newIndex].style.opacity = 1;
    
    // Обновляем текущий индекс
    currentImageIndex = newIndex;
  }
}
```

4. Обновите события клика на стрелки влево и вправо, вызывая функцию changeImage соответственно:
```javascript
document.getElementById('prev').addEventListener('click', function() {
  changeImage(currentImageIndex - 1);
});

document.getElementById('next').addEventListener('click', function() {
  changeImage(currentImageIndex + 1);
});
```

Теперь, при клике на стрелки, фотографии будут плавно изменяться, переходя от полностью прозрачной до полностью непрозрачной.

Можливі шляхи оптимізації даного коду:
1. Використати зображення прогресу під час завантаження нового зображення, щоб користувач знав, що щось відбувається.
2. Уникнути спливаючої анімації прозорості і встановити нове зображення безпосередньо після закінчення попередньої.

Оптимізований код:
```css
.pic img {
  opacity: 1;
  transition: opacity 1s linear;  
}

.pic img.invisible {
  opacity: 0;
}

button {
  padding: 1em;
}

button.active {
  background: tomato;
}

.pictures-container {
  position: relative;
  width: 100%;
  height: auto;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.loading-overlay.visible {
  opacity: 1;
}

.loading-text {
  font-size: 1.5em;
  color: #333;
}

.hidden {
  display: none;
}
```

```javascript
const buttons = document.querySelectorAll('button');
const images = document.querySelectorAll('.pic img');
const loadingOverlay = document.querySelector('.loading-overlay');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const activeButton = document.querySelector('button.active');
    const activeImage = document.querySelector('.pic img:not(.invisible)');

    if (activeButton === button) return;

    activeButton.classList.remove('active');
    button.classList.add('active');

    loadingOverlay.classList.add('visible');

    activeImage.addEventListener('transitionend', () => {
      activeImage.addEventListener('load', () => {
        loadingOverlay.classList.remove('visible');
        activeImage.classList.remove('invisible');
      });

      activeImage.src = button.dataset.src;
      activeImage.classList.add('invisible');
    }, { once: true });
  });
});
```

HTML-розмітка:
```html

  

    
    
    
  
  

    
Завантаження...
  


1
2

```

Це оптимізований код, який включає показування елемента завантаження, який з'являється під час завантаження нового зображення. Крім того, тепер нове зображення встановлюється безпосередньо після закінчення анімації попереднього, щоб запобігти спливаючих ефектів.