Полупрозрачные края картинок (можно ли сделать?)

[Fesali]

Здравствуйте .
Очень просто можно сделать в фотошопе картинку с полупрозрачными краями, сохранить в PNG и всё хорошо. Только вот файл такой с альфаканалом весить будет ну очень много (как следствие того- сайт потом долго грузится).
Вопрос, как зделать средствами JS эффект полупрозрачных краёв картинки(jpg,png)? Можно ли? Подскажите пожалуйтса.

Из такого


сделать вот так

[warren buffet]

Ты с какой мухосрани выходишь в сеть, чтобы пинг в даже мегабайт грузился долго?

Не надо тебе этого хотеть. Можно сделать на канвасе или в SVG. Но не надо. Просто поменяй провайдера.

[рони]

Fesali,
https://habrahabr.ru/post/190246/

[Fesali]

Не надо тебе этого хотеть. Можно сделать на канвасе или в SVG. Но не надо. Просто поменяй провайдера.

У меня с провайдером все нормально. А вот когда заходиш на сайт с планшета или 3G, вот тогда долго грузится, видны все кракозябры и прочее. Пример- Картинка с альфаканалом допустим весит 470кб, лучше втулить вместо неё jpg 130кб (если получится сделать такой эффект) - страница бытрее будет грузится, и трафи не зас..ется. Вот незнаю, как сделать?

[рони]

Fesali,
http://www.netzgesta.de/edge/

[рони]

Fesali,
http://codepo8.github.io/canvas-masking/

[Fesali]

рони , спасибо, похоже это именно оно! Пойду юзать, учится.

[Dilettante_Pro]

Или как-то так

<style>
.container {
   position:relative;
   display: inline-block;
}
.mask {
   position:absolute;
   top: 0px;
   left: 0px;
   width:100%;
   height:100%;
   background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0) 40%, rgba(255,255,255,1));
     background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0) 40%, rgba(255,255,255,1));
  background-image: -o-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0) 40%, rgba(255,255,255,1));
  background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0) 40%, rgba(255,255,255,1));
   z-index: 100;
}
</style>
<div class="container">
   <image src= "http://www.imageup.ru/img133/2542020/preload.png"/>
   <div class="mask">
   </div>
</div>

[Fesali]

Dilettante_Pro Это Вы наложили градиент который уходит в белый цвет. Нужно чтоб картинка уходила в прозрачность, чтоб края картинки были прозрачными!

[Fesali]

рони ваш пример что-то не работает.