Photo Gallery Forums

I'm creating a landing page at the moment and inserted a single image at the top. I used Markdown. 

What is the best way to display the image smaller? Do I have to upload another variant of that image in the right solution or is there a better way? Should I use HTML instead of Markdown?

Landing page: https://www.ulfklose.wedding/g/

There would be many ways to go about solving something trivial like that. First of all, when you say "display the image smaller", that means you want the image smaller than the width of the text? Won't that look strange? As it is right now, it seems to display almost perfectly. Optionally, you could create a two-columns layout (like here).

As for the actual physical image size, as it is now, it's quite large and will look nice on all displays. If you are conserned about file size, you could easily scale the image down to 1600 px and add higher compression (when images are scaled down on screen, you can easily allow higher compression without visual loss of quality). You could easily get that image below 300k. If you wanted to be perfectionist, you could also use responsive image techniques and offering different size sources to different screen sizes ... In my opinion, not necessary.

X3 has it's own resizer. Replace /content/ with /render/w800/ (width 800):
https://www.ulfklose.wedding/render/w80 ... nd-Ulf.jpg

The resizer is awesome, great idea and implementation.

In my opinion the image is too big. I'm not a webdesigner so if you say that the way it displays is great, I'll leave it as it is. Thank you for your feedback.

ulfklose wrote:In my opinion the image is too big. I'm not a webdesigner so if you say that the way it displays is great, I'll leave it as it is. Thank you for your feedback.

Looked fine to me, and the columns layout now in /ueber-uns/ looks fine also (although I perhaps preferred the larger one).

The only thing I would remark, is that if you will display it as small as now (around 290 px), then it's overkill to load a full 1.3 MB image at 2560 px. Resize it down to perhaps 640 px (twice the display size, so it looks nice on retina screens also). You can either upload a new image resized, or use the X3 resizer:
/render/w640/ueber-uns/Salma-und-Ulf.jpg

Done. Looks great and gets a perfect rating from GTmetrix :-).