In Your Web Department clients upload and insert images on their own, and sometimes they may not fit within the page layout. Also as more people are creating a mobile-optimized version of their website we wanted to make their lives easier by taking care of any sizing issues for them.

Limiting the size of images while uploading

People often don’t realize their photos can be too big for their website. Even if they manually resize them in our Word Processor, they cause the page to be slow. Also, Windows browsers do a bad job of resizing images on the fly.

So when images are being uploaded to YWD's Assets Manager they're automatically resized to a maximum of 1200 pixels (either width or height) while keeping the same proportions, and only then added.

However, sometimes you may need to upload a larger image – e.g. a big textured background. You can change the 1200px default in YWD Designer / Layout / Page / Images, special – Auto-resize images when uploading.

Shrinking content images so they fit

Limiting the size will still let people insert an image that’s kosher to upload, yet too wide to fit within the page layout. For instance, you could upload a 900px wide photo and then insert it on a page whose main column is just 700 pixels wide. Or  it may fit on computers, but not on mobile, with its 320px viewport.

So YWD provides an additional setting in YWD Designer / Page / Images, special - Shrink content images so they fit?:

• Mobile devices only
  The default and adequate in most cases. If an image is too wide for the mobile's viewport it shrinks to fit, while keeping the aspect ratio.
• Yes for all devices
  Same as above but it'll shrink on computers and tablets as well.
• No shrinking on computers; limit the width on mobile devices
  Computers and tablets are not affected; on mobile the width shrinks but the height remains the same (may cause distortions).

Keep in mind that if you choose either one of the first two options, manually resizing an image in the Word Processor will have no effect.

That's because YWD uses CSS (if you're familiar with it we're setting both the width and height to 100% of the image's container) which will override any manual resizing done in the Word Processor.

A mobile example

Check out this blog post on both your computer and mobile and you’ll see the latter images on the fly so they fit the viewport. We use responsive design techniques to apply the “shrinking approach” only to the specified device.

In addition, YWD makes avatar pictures smaller on mobile. You can choose to display avatar images or not (YWD uses Gravatar, the most popular and free avatar service) in blog post headers in YWD Designer / Tools / Blog Headers.

Don't have a Your Web Department website? Get yours at www.yourwebdepartment.com