IIIu6ko

Есть такое решение - открываем палитру узоров и наводим курсор на желаемый. Нам всплывет подсказка с базовыми размерами узора. Вооружившись данной информацией создаем новый документ такого размера и делаем заливку нашим узором. В итоге получаем желаемую картинку.
Источник

dimox.name/jquery-form-styler
хороший плугин, рекомендую
работает как на мобилках так и на ie7

Ну на скорую руку я бы все картинки запихнул в css и в итоге это полотно сократилось бы примерно до такого кода:

<div class="faq__question custom-woomen" data-tgl="custom-woomen">Женщине</div>
<div class="faq__answer">....</div>

$(".faq__question").on("click", function(){
  $(this).toggleClass($(this).data("tgl")+" open-class");
});

Или же скорее всего потом подумав снес js код, css оставил и получилось бы такое:

<details>
    <summary>Женщине</summary>
    <p>Избавление от ненужных  стереотипов и комплексов, обретение уверенности в себе, раскрепощение и повышение уровня сексуальности.</p>
</details>

и в css типа такого:

details > summary{
   background: url('кастомная-тетка-дядька.png') left center no-repeat;
}

details[open] > summary{
   background: url('иконка-плюсик-а-ля-open.png') left center no-repeat;
}

Мой ответ будет содержать две части - в первой я поясню как оптимизировать конкретно ваш код, а во второй покажу как такое надо делать правильно.

Часть первая.

Первым делом сохраним элемент, к которому вы обращаетесь больше всего, в отдельную переменную:

$('.faq__question').click(function() {
  $(this).siblings('.faq__answer').slideToggle();
  const icon = $(this).find('.faq__icon');
  const iconSrc = icon.attr('src');

  if (iconSrc == 'imgs/dropdown/dropdown__women.png') {
    iconwomen = iconSrc;
    icon.attr('src', 'imgs/dropdown/dropdown__open.png');
  } else if(iconSrc == 'imgs/dropdown/dropdown__man.png') {
    iconman = iconSrc;
    icon.attr('src', 'imgs/dropdown/dropdown__open.png');
  } else if(iconSrc == 'imgs/dropdown/dropdown__manwomen.png') {
    iconmanwomen = iconSrc;
    icon.attr('src', 'imgs/dropdown/dropdown__open.png');
  } else {
    if (icon.attr('class') == 'faq__icon faq__icon--women') {
      icon.attr('src', iconwomen);
    } else if (icon.attr('class') == 'faq__icon faq__icon--man') {
      icon.attr('src', iconman);
    } else if (icon.attr('class') == 'faq__icon faq__icon--manwomen') {
      icon.attr('src', iconmanwomen);
    }
  }
});

Далее надо разобраться с условиями, они у вас не оптимальны. Выходит, что если иконка не подходит по критерию, вы опять же перебором ставите ссылку назад. Вот здесь чуть яснее, когда именно какое действие надо делать:

var iconman, iconwomen, iconmanwomen;
var icons = ['imgs/dropdown/dropdown__women.png', 'imgs/dropdown/dropdown__man.png', 'imgs/dropdown/dropdown__manwomen.png'];

$('.faq__question').click(function() {
  $(this).siblings('.faq__answer').slideToggle();
  const icon = $(this).find('.faq__icon');
  const iconSrc = icon.attr('src');

  if (icons.includes(iconSrc)) {
    if (iconSrc == 'imgs/dropdown/dropdown__women.png') {
      iconwomen = iconSrc;
      icon.attr('src', 'imgs/dropdown/dropdown__open.png');
    } else if(iconSrc == 'imgs/dropdown/dropdown__man.png') {
      iconman = iconSrc;
      icon.attr('src', 'imgs/dropdown/dropdown__open.png');
    } else if(iconSrc == 'imgs/dropdown/dropdown__manwomen.png') {
      iconmanwomen = iconSrc;
      icon.attr('src', 'imgs/dropdown/dropdown__open.png');
    }
  } else {
    if (icon.attr('class') == 'faq__icon faq__icon--women') {
      icon.attr('src', iconwomen);
    } else if (icon.attr('class') == 'faq__icon faq__icon--man') {
      icon.attr('src', iconman);
    } else if (icon.attr('class') == 'faq__icon faq__icon--manwomen') {
      icon.attr('src', iconmanwomen);
    }
  }
});

Теперь можно вынести повторяемый код:

var iconman, iconwomen, iconmanwomen;
var icons = ['imgs/dropdown/dropdown__women.png', 'imgs/dropdown/dropdown__man.png', 'imgs/dropdown/dropdown__manwomen.png'];

$('.faq__question').click(function() {
  $(this).siblings('.faq__answer').slideToggle();
  const icon = $(this).find('.faq__icon');
  const iconSrc = icon.attr('src');

  if (icons.includes(iconSrc)) {
    if (iconSrc == 'imgs/dropdown/dropdown__women.png') {
      iconwomen = iconSrc;
    } else if(iconSrc == 'imgs/dropdown/dropdown__man.png') {
      iconman = iconSrc;
    } else if(iconSrc == 'imgs/dropdown/dropdown__manwomen.png') {
      iconmanwomen = iconSrc;
    }
    icon.attr('src', 'imgs/dropdown/dropdown__open.png');
  } else {
    let iconOldSrc;
    if (icon.attr('class') == 'faq__icon faq__icon--women') {
      iconOldSrc = iconwomen;
    } else if (icon.attr('class') == 'faq__icon faq__icon--man') {
      iconOldSrc = iconman;
    } else if (icon.attr('class') == 'faq__icon faq__icon--manwomen') {
      iconOldSrc = iconmanwomen);
    }
    icon.attr('src', iconOldSrc);
  }
});

Теперь код стал чище и, за счёт работы с переменными, будет проще находить проблемы. Но всё-равно этот код неоптимален с точки зрения логики. Намного проще хранить состояние в самом объекте:

$('.faq__question').click(function() {
  $(this).siblings('.faq__answer').slideToggle();
  const icon = $(this).find('.faq__icon');
  const iconSrc = icon.attr('src');
  const dataIconSrc = icon.attr('data-src');

  if (!dataIconSrc) {
    icon.attr('data-src', iconSrc);
    icon.attr('src', 'imgs/dropdown/dropdown__open.png');
  } else {
    icon.attr('src', dataIconSrc);
    icon.attr('data-src', null);
  }
});

Теперь если аттрибут `data-src` имеет значение, значит таб открыт.

Часть вторая.

А вообще такие задачи решаются с помощью CSS. Иконку лучше делать блоком с фоновым изображением:

.icon.man {
  background-image: "imgs/dropdown/dropdown__man.png";
}
.icon.woman {
  background-image: "imgs/dropdown/dropdown__woman.png";
}
.icon.manwoman {
  background-image: "imgs/dropdown/dropdown__manwoman.png";
}
.icon.open {
  background-image: "imgs/dropdown/dropdown__open.png";
}

И тогда скрипт будет выглядеть как-то так (я подозреваю, я просто именно с jQuery не люблю работать):

$('.faq__question').click(function() {
  $(this).siblings('.faq__answer').slideToggle();

  $(this).find('.faq__icon').toggleClass("open");
});

как вариант можно так попробовать
https://jsfiddle.net/s7z50fjc/2/

Вам будет гораздо легче решать большую часть стоящих перед вами задач (а другим гораздо легче вам в этом помогать), как только вы перестанете описывать их общими фразами (типа "максимально эффективно", "полноценный дев", "хорошим специалистом" и т.п.).

Будьте конкретны:
- "Моя цель на ближайшие 6 месяцев - вырасти до позиции XXX в текущей компании". И далее:
- "Что мне нужно сделать для того, чтобы в течение 6 месяцев в моей компании вырасти до XXX ?"

С этим уже можно обратиться к людям, обладающим достаточной компетенцией в помощи вам с ответом на этот вопрос: "Для того, чтобы в нашей компании стать XXX, нужно знать ЭТО и уметь ТО".

- "Что мне нужно для того, чтобы узнать ЭТО и научиться делать ТО ?". Cоставляете план действий (разбиваете необходимые шаги на месяцы, недели, дни) с дежурными сроками (для проверки запланированного и достигнутого, внесения в связи с этим необходимых корректировок и т.п.) - и вперед.

Но все начинается с конкретики:
- "...хочется максимально эффективно развивать себя...". Что конкретно значит (для вас) "максимально эффективно"? По каким критериям вы будете определять, эффективно вы развиваетесь или нет? Количество прочитанных книг? Сложность решаемых задач? Что конкретно?
- "...чтобы стать не только полноценным девом...". Что конкретно значит (для вас) "полноценный дев"? Как вы поймете, что стали "полноценным девом"? Вы добьетесь определенной должности? Будете зарабатывать определенную сумму денег? Что конкретно?

Успехов.

Воть

Animated Map Path for Interactive Storytelling

Лучше поздно, чем никогда))
Используйте конструкцию imagemin([plugins], [options]), а опции прописывайте конкретно для каждого плагина.
Например:

gulp.task('images', function() {
    return gulp.src(src.images)
        .pipe(imageMin([
            pngquant(),
            mozjpeg({
                 progressive: true
            })
        ],{
            verbose: true
        }))
        .pipe(gulp.dest(outputDir + 'img'))
        .pipe(connect.reload())
});

Тыц

Маленький банальный пример. От вас - улучшить его

не стоит заморачиваться, мне кажется. сделать таск clean, очищающий всё, который запускать перед сборкой продакшн билда.

Но если приспичило, посмотрите в скринкасте Ильи Кантора. В одной из частей он рассказывает, как можно сделать синхронное удаление файлов в dist и src

очень удобно верстать в единицах rem. Одним мановением руки весь дизайн удобно масштабируется.
для мелких иконок чаще удобнее использовать пиксели
проценты и вьюпорты в основном для общей раскладки и тому подобное.
ну и главное - думать головой, где что использовать.

Хороший материал Em vs Rem
Для примера взять: https://getbootstrap.com/examples/jumbotron/
В шапке размер текста и особенно отступы сверху, снизу обычно делаю в rem
Ширину блоков внутри контейнеров в %
Скругление углов и всё что касается картинок обычно в пикселях
vh чаше для первого экрана, если он эффектный, красивый и надо что бы он точно убрался в первый экран
Как-то так.

Зависит от целей и задумок дизайнера.

Например, если отступ должен быть всегда одинаковый - это px, а если в ширину двух букв, то em, а если % от ширины, то соответственно % или vw. И т.д.