diff --git a/sigal/gallery.py b/sigal/gallery.py
index 58ccec4..e3da1e5 100644
--- a/sigal/gallery.py
+++ b/sigal/gallery.py
@@ -69,7 +69,7 @@ class Media:
     type = ''
 
     def __init__(self, filename, path, settings):
-        self.src_filename = self.filename = self.url = filename
+        self.src_filename = self.filename = filename
         self.path = path
         self.settings = settings
         self.ext = os.path.splitext(filename)[1].lower()
@@ -90,6 +90,11 @@ class Media:
     def __str__(self):
         return join(self.path, self.filename)
 
+    @property
+    def url(self):
+        """URL of the media."""
+        return url_from_path(self.filename)
+
     @property
     def big(self):
         """Path to the original image, if ``keep_orig`` is set (relative to the
@@ -137,7 +142,8 @@ class Media:
         """ Get image metadata from filename.md: title, description, meta."""
         self.description = ''
         self.meta = {}
-        self.title = ''
+        # default: title is the filename
+        self.title = self.filename
 
         descfile = splitext(self.src_path)[0] + '.md'
         if isfile(descfile):
@@ -219,7 +225,7 @@ class Video(Media):
         if not settings['use_orig'] or not is_valid_html5_video(ext):
             video_format = settings['video_format']
             ext = '.' + video_format
-            self.filename = self.url = base + ext
+            self.filename = base + ext
             self.mime = get_mime(ext)
             self.dst_path = join(settings['destination'], path, base + ext)
         else:
@@ -409,16 +415,16 @@ class Album:
 
         if self._thumbnail:
             # stop if it is already set
-            return url_from_path(self._thumbnail)
+            return self._thumbnail
 
         # Test the thumbnail from the Markdown file.
         thumbnail = self.meta.get('thumbnail', [''])[0]
 
         if thumbnail and isfile(join(self.src_path, thumbnail)):
-            self._thumbnail = join(self.name, get_thumb(self.settings,
-                                                        thumbnail))
+            self._thumbnail = url_from_path(join(
+                self.name, get_thumb(self.settings, thumbnail)))
             self.logger.debug("Thumbnail for %r : %s", self, self._thumbnail)
-            return url_from_path(self._thumbnail)
+            return self._thumbnail
         else:
             # find and return the first landscape image
             for f in self.medias:
@@ -431,17 +437,17 @@ class Album:
                         size = get_size(f.src_path)
 
                     if size['width'] > size['height']:
-                        self._thumbnail = join(self.name, f.thumbnail)
+                        self._thumbnail = self.name + '/' + f.thumbnail
                         self.logger.debug(
-                            "Use 1st landscape image as thumbnail for %r :"
-                            " %s", self, self._thumbnail)
-                        return url_from_path(self._thumbnail)
+                            "Use 1st landscape image as thumbnail for %r : %s",
+                            self, self._thumbnail)
+                        return self._thumbnail
 
             # else simply return the 1st media file
             if not self._thumbnail and self.medias:
                 for media in self.medias:
                     if media.thumbnail is not None:
-                        self._thumbnail = join(self.name, media.thumbnail)
+                        self._thumbnail = self.name + '/' + media.thumbnail
                         break
                 else:
                     self.logger.warning("No thumbnail found for %r", self)
@@ -449,17 +455,17 @@ class Album:
 
                 self.logger.debug("Use the 1st image as thumbnail for %r : %s",
                                   self, self._thumbnail)
-                return url_from_path(self._thumbnail)
+                return self._thumbnail
 
             # use the thumbnail of their sub-directories
             if not self._thumbnail:
                 for path, album in self.gallery.get_albums(self.path):
                     if album.thumbnail:
-                        self._thumbnail = join(self.name, album.thumbnail)
+                        self._thumbnail = self.name + '/' + album.thumbnail
                         self.logger.debug(
                             "Using thumbnail from sub-directory for %r : %s",
                             self, self._thumbnail)
-                        return url_from_path(self._thumbnail)
+                        return self._thumbnail
 
         self.logger.error('Thumbnail not found for %r', self)
         return None
diff --git a/sigal/themes/colorbox/templates/album_list.html b/sigal/themes/colorbox/templates/album_list.html
index 2ac5872..c408a47 100644
--- a/sigal/themes/colorbox/templates/album_list.html
+++ b/sigal/themes/colorbox/templates/album_list.html
@@ -48,20 +48,18 @@
       {% if loop.index % nb_columns == 1 %}
       <div id="albums" class="row">
       {% endif%}
-      {% set media_title = media.title if media.title else media.filename %}
       {% if media.type == "image" %}
       <div class="{{ column_size_t }} columns thumbnail">
         {% if 'sigal.plugins.media_page' in settings.plugins %}
         <a href="{{ media.filename}}.html" class="gallery"
-          title="{{ media_title }}"
+          title="{{ media.title }}"
           data-href="{{ media.filename }}" {{ img_description(media) }}>
         {% else %}
-        <a href="{{ media.filename }}" class="gallery"
-          title="{{ media_title }}"
+        <a href="{{ media.url }}" class="gallery" title="{{ media.title }}"
           {{ img_description(media) }}>
         {% endif %}
           <img src="{{ media.thumbnail }}" alt="{{ media.filename }}"
-              title="{{ media_title }}" /></a>
+              title="{{ media.title }}" /></a>
       </div>
       {% endif %}
       {% if media.type == "video" %}
@@ -74,13 +72,13 @@
           {% endif %}
             {% if media.big %} data-big="{{ media.big }}"{% endif %}>
             <img src="{{ media.thumbnail }}" alt="{{ media.filename }}"
-                title="{{ media_title }}" /></a>
+                title="{{ media.title }}" /></a>
         </div>
         <!-- This contains the hidden content for the video -->
         <div style='display:none'>
           <div id="{{ mhash }}">
             <video controls>
-            <source src='{{ media.filename }}' type='{{ media.mime }}' />
+            <source src='{{ media.url }}' type='{{ media.mime }}' />
             </video>
           </div>
         </div>
diff --git a/sigal/themes/colorbox/templates/media.html b/sigal/themes/colorbox/templates/media.html
index 5fb4a46..21a8bb5 100644
--- a/sigal/themes/colorbox/templates/media.html
+++ b/sigal/themes/colorbox/templates/media.html
@@ -1,13 +1,12 @@
 {% extends "base.html" %}
 {% block content %}
-  {% set media_title = media.title if media.title else media.filename %}
   <header>
     {% if album.breadcrumb %}
     <h2>
       {% for url, title in album.breadcrumb %}
       <a href="{{ url }}">{{ title }}</a> »
       {% endfor -%}
-      <a href="#">{{ media_title }}</a>
+      <a href="#">{{ media.title }}</a>
     </h2>
     <hr>
     {% endif %}
@@ -16,7 +15,7 @@
   {% if media %}
   <div class="thumbnail">
     {% if media.type == "image" %}
-      <img src="{{ media.filename }}" alt="{{ media_title }}" title="{{ media_title }}" />
+      <img src="{{ media.filename }}" alt="{{ media.title }}" title="{{ media.title }}" />
     {% endif %}
     {% if media.type == "video" %}
       <video controls>
diff --git a/sigal/themes/photoswipe/templates/album_list.html b/sigal/themes/photoswipe/templates/album_list.html
index d2bfc23..7872406 100644
--- a/sigal/themes/photoswipe/templates/album_list.html
+++ b/sigal/themes/photoswipe/templates/album_list.html
@@ -67,21 +67,20 @@
 		{% if album.medias %}
 			<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
 				{% for media in album.medias %}
-				  {% set media_title = media.title if media.title else media.filename %}
 					    {% if media.type == "image" %}
 						  	{% if loop.first %}
 						  		<figure class="gallery__img--main thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-									<a href="{{ media.filename }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
+									<a href="{{ media.url }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
 									<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.filename }}" alt="{{ media.filename }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
 									</a>
-									<figcaption itemprop="caption description">{{ media_title }} - {{ media.exif.datetime }}</figcaption>
+									<figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
 							    </figure>
 						  	{% else %}
 							    <figure class="gallery__img--secondary thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-									<a href="{{ media.filename }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
+									<a href="{{ media.url }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
 									<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.thumbnail }}" alt="{{ media.filename }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
 									</a>
-									<figcaption itemprop="caption description">{{ media_title }} - {{ media.exif.datetime }}</figcaption>
+									<figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
 							    </figure>
 						    {% endif %}
 					    {% endif %}
diff --git a/sigal/utils.py b/sigal/utils.py
index eb129b6..05cad01 100644
--- a/sigal/utils.py
+++ b/sigal/utils.py
@@ -23,6 +23,8 @@ import shutil
 from markdown import Markdown
 from markupsafe import Markup
 
+from urllib.parse import quote
+
 VIDEO_MIMES = {'.mp4': 'video/mp4',
                '.webm': 'video/webm',
                '.ogv': 'video/ogg'}
@@ -58,10 +60,9 @@ def check_or_create_dir(path):
 def url_from_path(path):
     """Transform path to url, converting backslashes to slashes if needed."""
 
-    if os.sep == '/':
-        return path
-    else:
-        return '/'.join(path.split(os.sep))
+    if os.sep != '/':
+        path = '/'.join(path.split(os.sep))
+    return quote(path)
 
 
 def read_markdown(filename):
diff --git a/tests/sample/pictures/accentué/test?<special> chars#.jpg b/tests/sample/pictures/accentué/test?<special> chars#.jpg
new file mode 100644
index 0000000..e2bd3d3
Binary files /dev/null and b/tests/sample/pictures/accentué/test?<special> chars#.jpg differ
diff --git a/tests/test_gallery.py b/tests/test_gallery.py
index d61f51a..e580ac7 100644
--- a/tests/test_gallery.py
+++ b/tests/test_gallery.py
@@ -4,6 +4,7 @@ import pytest
 import datetime
 
 from os.path import join
+from urllib.parse import quote
 from sigal.gallery import Album, Media, Image, Video, Gallery
 from sigal.video import SubprocessException
 
@@ -53,7 +54,7 @@ REF = {
     'accentué': {
         'title': 'accentué',
         'name': 'accentué',
-        'thumbnail': 'accentué/thumbnails/hélicoïde.tn.jpg',
+        'thumbnail': 'accentué/thumbnails/h%C3%A9lico%C3%AFde.tn.jpg',
         'subdirs': [],
         'medias': ['hélicoïde.jpg', '11.jpg'],
     },