Not logged in. · Lost password · Register
Forum: General Help and Support Syntax and Usage RSS
Images and high-resolution displays/browser zoom
Scale images in the browser only, not on the server
Avatar
T114874 #1
Member since Aug 2016 · 1 post
Group memberships: Members
Show profile · Link to this post
Subject: Images and high-resolution displays/browser zoom
Hi,

we are using DokuWiki to document our products. When we embed images, we use the following syntax to scale the images to a smaller size, e.g. 400 pixel in this case:

{{:myimage.png?nolink&400x200|My Image}}

Unfortunately, it seems instead of delivering the original image and having the browser resizing the image, Dokuwiki scales the image at the server side and sends the smaller image to the browser. This results in pixelized/bad looking images when the user has an high DPI display (like smartphone or Retina display) or zooms into the page, or printing the page, etc...

Is there a way to have Dokuwiki to deliver the original image, and then resize it in the browser by using a CSS style like "width: 400px; heigh: 200px;" etc.? This would greatly improve the appearance of images on high-resolution displays.

Thanks!
Avatar
Chrismcn #2
Member for a month · 2 posts
Group memberships: Members
Show profile · Link to this post
Subject: No retina support in 2017
I have the same problem here among with the Logo.

I don't find a way to properly embed high resolution / retina images. When the file name contains the scaling factor (@2x, @3x, @4x), you'll just get an errormessage ("logo@4x.png is not a valid filename"). When you leave it away, they will be always displayed as huge blurry images with 2-, 3- or 4-times size but in 72 dpi resolution. And when you use the dokuwiki scaling option, these will be scaled server side to blurry 72 dpi.  :-(

I tried SVG as workaround, but it seems Dokuwiki doesn't support SVG as Logo.


Any suggestions?
This post was edited 2 times, last on 2017-04-21, 14:33 by Chrismcn.
Avatar
SFITCS #3
User title: Scott Ferguson
Member since Dec 2014 · 412 posts · Location: Canberra, Australia
Group memberships: Members
Show profile · Link to this post
In reply to post #1
Quote by T114874 on 2016-08-31, 11:30:
<snipped> we use the following syntax to scale the images to a smaller size, e.g. 400 pixel in this case:
{{:myimage.png?nolink&400x200|My Image}}
Unfortunately, it seems instead of delivering the original image and having the browser resizing the image, Dokuwiki scales the image at the server side
DokuWiki does exactly what you asked. As does every other CMS I've worked with. i.e. you've created an image of a fixed size, which is no different to uploading an image you've resized to 400x200px and then wondering why that looks, um, less-than-optimal, on a screen larger than the one you used when you decided on that image size.
Note that for photo you'll want high resolution 24-bit png images unless you are suppling different images for different sized screens - see my reference to scrset further down.
Quote by T114874 on 2016-08-31, 11:30:
This results in pixelized/bad looking images when the user has an high DPI display (like smartphone or Retina display) or zooms into the page, or printing the page, etc...
You need to choose your images based on the largest size they will be displayed at (or use media types, CSS, and deliver different sized and resolution images for different sized displays). You have, fortunately, chosen the right image format to do so (JPEG or GIF would have been poor choices).
See scrset

As for problems with the printed results - I've mainly worked with the default DokuWiki template (which is designed by an expert), and I don't know what template you are using - but it's likely it uses a print media type CSS sheet. The print CSS is probably working with the same image you've explicitly resized - it can't magically add data back into the image.
Quote by T114874 on 2016-08-31, 11:30:
Is there a way to have Dokuwiki to deliver the original image, and then resize it in the browser by using a CSS style like "width: 400px; height: 200px;" etc.?
Aside from media queries and scrset?  Yes, and, no.
Try using % or em instead of px (and custom CSS classes if you want to treat specific images differently - see the WRAP plugin for that).

If you want to responsive images, build a responsive website with responsive pages. What you're doing is mixing responsive design with fixed measurements. If you want to use pixels are a measure you need to apply it to all elements of the web page/site - not just selectively.

If you want responsive pick either % or em as a measure and apply them to everything (or you'll find that larger screens will result in bizarre resizing of padding, borders, and fonts - not just images).

Here are some links to information you may find useful:-
     •  CSS Tricks
     •  Mozilla Developers Network
     •  W3C.org Responsive Image usecases
Avatar
SFITCS #4
User title: Scott Ferguson
Member since Dec 2014 · 412 posts · Location: Canberra, Australia
Group memberships: Members
Show profile · Link to this post
In reply to post #2
By default the DokuWiki templates I'm familiar with look for a file called logo.png - obviously that won't load logo.svg, so modify the code in lib/tpl/$YourTemplate/tpl_header.php so that it uses a SVG file instead of a PNG file and it will work fine.
sed -i 's/logo.png/logo.svg/g'

There are probably other ways to achieve the same outcome. Note that you'll need to add an entry for svg files into conf/mime.local.conf if you want to upload svg files with the Media Manager.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2017-05-26, 20:48:06 (UTC +02:00)