diff --git a/media/js/base.js b/media/js/base.js
index 55c648503b..a50337da6c 100644
--- a/media/js/base.js
+++ b/media/js/base.js
@@ -657,3 +657,12 @@ function quotaSizeFormat(bytes, precision) {
         return bytes + ' B';
     }
 }
+
+function encodePath(path) {
+    var path_arr = path.split('/'),
+        path_arr_ = [];
+    for (var i = 0, len = path_arr.length; i < len; i++) {
+        path_arr_.push(encodeURIComponent(path_arr[i]));
+    }
+    return path_arr_.join('/');
+}
diff --git a/seahub/base/context_processors.py b/seahub/base/context_processors.py
index 3df80bced6..8d73390263 100644
--- a/seahub/base/context_processors.py
+++ b/seahub/base/context_processors.py
@@ -16,7 +16,7 @@ from constance import config
 from seahub.settings import SEAFILE_VERSION, SITE_TITLE, SITE_NAME, \
     MAX_FILE_NAME, BRANDING_CSS, LOGO_PATH, LOGO_WIDTH, LOGO_HEIGHT,\
     SHOW_REPO_DOWNLOAD_BUTTON, SITE_ROOT, ENABLE_GUEST_INVITATION, \
-    FAVICON_PATH
+    FAVICON_PATH, ENABLE_THUMBNAIL
 
 try:
     from seahub.settings import SEACLOUD_MODE
@@ -86,6 +86,7 @@ def base(request):
         'SITE_ROOT': SITE_ROOT,
         'constance_enabled': dj_settings.CONSTANCE_ENABLED,
         'FILE_SERVER_ROOT': file_server_root,
+        'enable_thumbnail': ENABLE_THUMBNAIL,
         'enable_guest_invitation': ENABLE_GUEST_INVITATION,
         'enable_terms_and_conditions': dj_settings.ENABLE_TERMS_AND_CONDITIONS,
         'is_pro': True if is_pro_version() else False,
diff --git a/seahub/templates/shared_file_view.html b/seahub/templates/shared_file_view.html
index 6f3514d700..b7b1b1602b 100644
--- a/seahub/templates/shared_file_view.html
+++ b/seahub/templates/shared_file_view.html
@@ -122,5 +122,18 @@ $('#file-save-form').submit(function() {
 });
 {% endif %}
 {% include "snippets/file_content_js.html" %}
+
+{% if filetype == 'Image' and not err %}
+    {% if enable_thumbnail %}
+        {% if from_shared_dir %}
+        var encoded_path = encodePath('{{ path|escapejs }}'); // path: '/Portrait_8.jpg'
+        $('#image-view').attr('src', '{{ SITE_ROOT }}thumbnail/{{ shared_token }}/1024' + encoded_path);
+        {% else %}
+        $('#image-view').attr('src', '{{ SITE_ROOT }}thumbnail/{{ shared_token }}/1024/' + encodeURIComponent('{{file_name|escapejs}}'));
+        {% endif %}
+    {% else %}
+        $('#image-view').attr('src', '{{ raw_path|escapejs }}');
+    {% endif %}
+{% endif %}
 </script>
 {% endblock %}
diff --git a/seahub/templates/snippets/file_content_html.html b/seahub/templates/snippets/file_content_html.html
index e323792f7f..66d58ee66a 100644
--- a/seahub/templates/snippets/file_content_html.html
+++ b/seahub/templates/snippets/file_content_html.html
@@ -20,7 +20,7 @@ For details please refer to 'snippets/file_content_js.html'.
         {% endif %}
 
         {% if filetype == 'Image' %}
-            <img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" />
+            <img src="" alt="{{ file_name }}" id="image-view" />
         {% endif %}
         
         {% if filetype == 'Document' or filetype == 'PDF' and not use_pdfjs %} 
diff --git a/seahub/templates/snippets/file_content_js.html b/seahub/templates/snippets/file_content_js.html
index 80df860b22..76b70c4ae0 100644
--- a/seahub/templates/snippets/file_content_js.html
+++ b/seahub/templates/snippets/file_content_js.html
@@ -17,11 +17,7 @@
 {% endif %}
 
 {% if filetype == 'Image' %}
-function setFileViewAreaHeight() {
-    var $fileView = $('#file-view');
-    $fileView.outerHeight($(window).height() - $fileView.offset().top);
-}
-$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
+{% include 'snippets/image_file_view_js.html' %}
 {% endif %}
 
 {% if filetype == 'SVG' %}
diff --git a/seahub/templates/snippets/image_file_view_js.html b/seahub/templates/snippets/image_file_view_js.html
new file mode 100644
index 0000000000..599a619051
--- /dev/null
+++ b/seahub/templates/snippets/image_file_view_js.html
@@ -0,0 +1,5 @@
+function setFileViewAreaHeight() {
+    var $fileView = $('#file-view');
+    $fileView.outerHeight($(window).height() - $fileView.offset().top);
+}
+$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
diff --git a/seahub/templates/view_file_image.html b/seahub/templates/view_file_image.html
index 1c8c757369..da069f334f 100644
--- a/seahub/templates/view_file_image.html
+++ b/seahub/templates/view_file_image.html
@@ -17,12 +17,21 @@ body { overflow:hidden; }
     <a href="{% url 'view_lib_file' repo.id img_next %}" id="img-next" title="{% trans 'you can also press → ' %}"><span class="icon-chevron-right"></span></a>
   {% endif %}
 
-<img src="{{ raw_path }}" alt="{{ u_filename}}" id="image-view" />
+<img src="" alt="{{ filename }}" id="image-view" />
 {% endblock %}
 
 {% block extra_script %}{{ block.super }}
 
 <script type="text/javascript">
+{% if enable_thumbnail and not repo.encrypted %}
+    var encoded_path = encodePath('{{ path|escapejs }}'); // path: '/Portrait_8.jpg'
+    $('#image-view').attr('src', '{{ SITE_ROOT }}thumbnail/{{ repo.id }}/1024' + encoded_path);
+{% else %}
+    $('#image-view').attr('src', '{{ raw_path|escapejs }}');
+{% endif %}
+
+{% include 'snippets/image_file_view_js.html' %}
+
 {% if img_prev or img_next %}
 var input_focus = false;
 $('input, textarea').focus(function() {
@@ -45,11 +54,5 @@ $('body').bind('keydown', function(e) {
     }
 })
 {% endif %}
-
-function setFileViewAreaHeight() {
-    var $fileView = $('#file-view');
-    $fileView.outerHeight($(window).height() - $fileView.offset().top);
-}
-$(window).load(setFileViewAreaHeight).resize(setFileViewAreaHeight);
 </script>
 {% endblock %}
diff --git a/seahub/templates/view_history_file.html b/seahub/templates/view_history_file.html
index 4b15d03213..e43e3b3b67 100644
--- a/seahub/templates/view_history_file.html
+++ b/seahub/templates/view_history_file.html
@@ -36,6 +36,7 @@ $(function() {
 
 {% if filetype == 'PDF' and use_pdfjs and not err %}
 {% elif filetype == 'Image' and not err %}
+    $('#image-view').attr('src', '{{ raw_path|escapejs }}');
 {% else %}
 function setFileViewAreaHeight() {
     $('body').css({'overflow':'auto'});
diff --git a/seahub/templates/view_shared_dir.html b/seahub/templates/view_shared_dir.html
index 15880a6ff6..549abd6d37 100644
--- a/seahub/templates/view_shared_dir.html
+++ b/seahub/templates/view_shared_dir.html
@@ -162,6 +162,10 @@
 {% block extra_script %}
 <script type="text/javascript" src="{% static "scripts/lib/jquery.magnific-popup.js" %}"></script>
 <script type="text/javascript">
+var cur_path = '{{path|escapejs}}';
+var share_link_token = '{{token}}';
+var file_server_root = '{{FILE_SERVER_ROOT}}';
+
 var magnificOptions = {
     type: 'image',
     tClose: "{% trans "Close (Esc)" %}", // Alt text on close button
@@ -182,13 +186,17 @@ var magnificOptions = {
         tError: '{% trans '<a href="%url%" target="_blank">The image</a> could not be loaded.' %}' // Error message when image could not be loaded
     }
 };
+
+{% if not repo.encrypted and ENABLE_THUMBNAIL %}
+$('[data-mfp-src]').each(function(index, item) {
+    var $item = $(item);
+    var file_name = $item.closest('.file-item').attr('data-name');
+    $item.attr('data-mfp-src', '{{ SITE_ROOT }}thumbnail/{{ token }}/1024' + encodePath(cur_path + file_name));
+});
+{% endif %}
 $('.img-name-link').magnificPopup(magnificOptions);
 $('.img-img-link').magnificPopup(magnificOptions);
 
-var cur_path = '{{path|escapejs}}';
-var share_link_token = '{{token}}';
-var file_server_root = '{{FILE_SERVER_ROOT}}';
-
 $('.shared-dir-zip, .download-dir').click(function (e) {
     var cur_download_dir_path;
     var interval,
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index 13e2ee71b4..bfd6bd6181 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -222,13 +222,34 @@ define([
             updateMagnificPopupOptions: function(options) {
                 var repo_id = this.dir.repo_id,
                     path = this.dir.path;
+
+                var use_thumbnail = true;
+                if (!app.pageOptions.enable_thumbnail || this.dir.encrypted) {
+                    use_thumbnail = false;
+                }
                 var genItem = function(model) {
                     var name = model.get('obj_name');
                     var dirent_path = Common.pathJoin([path, name]);
+                    var url_options = {
+                        'repo_id': repo_id,
+                        'path': Common.encodePath(dirent_path)
+                    };
+                    var item_src;
+                    if (use_thumbnail) {
+                        item_src = Common.getUrl($.extend(url_options, {
+                            'name': 'thumbnail_get',
+                            'size': 1024
+                        }));
+                    } else {
+                        item_src = Common.getUrl($.extend(url_options, {
+                            'name': 'view_raw_file'
+                        }));
+                    }
+
                     var item = {
                         'name': name,
                         'url': model.getWebUrl(),
-                        'src': app.config.siteRoot + 'repo/' + repo_id + '/raw' + Common.encodePath(dirent_path)
+                        'src': item_src
                     };
                     return item;
                 };
diff --git a/static/scripts/app/views/starred-file-item.js b/static/scripts/app/views/starred-file-item.js
index 42aa36c240..fd235c2641 100644
--- a/static/scripts/app/views/starred-file-item.js
+++ b/static/scripts/app/views/starred-file-item.js
@@ -32,6 +32,16 @@ define([
 
             var tmpl = $(window).width() >= 768 ? this.template : this.mobileTemplate;
             this.$el.html(tmpl(data));
+
+            if (app.pageOptions.enable_thumbnail) {
+                this.$('.img-name-link').attr('data-mfp-src', Common.getUrl({
+                    'name': 'thumbnail_get',
+                    'repo_id': data.repo_id,
+                    'size': 1024,
+                    'path': data.encoded_path
+                }));
+            }
+
             return this;
         },
 
diff --git a/static/scripts/app/views/starred-file.js b/static/scripts/app/views/starred-file.js
index fc5cea7577..e10b9084c9 100644
--- a/static/scripts/app/views/starred-file.js
+++ b/static/scripts/app/views/starred-file.js
@@ -94,7 +94,6 @@ define([
 
         render: function() {
             this.$el.html(this.template());
-            $("#right-panel").html(this.$el);
 
             this.$table = this.$('table');
             this.$tableBody = this.$('tbody');
diff --git a/static/scripts/common.js b/static/scripts/common.js
index 3a32fe1c5e..72cdc1def1 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -144,10 +144,14 @@ define([
                 case 'group_discussions': return siteRoot + 'api2/groups/' + options.group_id + '/discussions/';
                 case 'group_discussion': return siteRoot + 'api2/groups/' + options.group_id + '/discussions/' + options.discussion_id + '/';
 
-                // Misc
+                // thumbnail
                 case 'thumbnail_create': return siteRoot + 'thumbnail/' + options.repo_id + '/create/';
-                case 'get_popup_notices': return siteRoot + 'ajax/get_popup_notices/';
+                case 'thumbnail_get': return siteRoot + 'thumbnail/' + options.repo_id + '/' + options.size + options.path;
 
+                // Misc
+                case 'view_raw_file': return siteRoot + 'repo/' + options.repo_id + '/raw' + options.path;
+
+                case 'get_popup_notices': return siteRoot + 'ajax/get_popup_notices/';
                 case 'notifications': return siteRoot + 'api/v2.1/notifications/';
                 case 'notification': return siteRoot + 'api/v2.1/notification/';
                 case 'user_enabled_modules': return siteRoot + 'api/v2.1/user-enabled-modules/';