T114874:1472635807 wrote
<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}}
[/color]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.
T114874:1472635807 wrote
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.
T114874:1472635807 wrote
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