Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

This is the image shown in the post gallery (3x3 blocks) seen on the homepage. Due to the fact that the homepage/landing-page needs to be very fast, we need to optimise this photo as much as we can so it's not a burden for it.

Characteristics:

  • resolutionshape: square - crop a part of your image if you don't have a square image
  • max-sizeresolution: 448x448 pixels - more than this can't be used, but will increase picture size
  • max size: 100KB - let's try to keep picture under this size

How to resize using an online tool (http://picresize.com)

  1. Pick a photo to resize:
    Image Added

  2. Crop a square photo - the resolution doesn't matter at this step, try to catch as much real-estate as you want to display:
    Image Added
    Image Added

  3. Configure resizing:
    Image Added

  4. Get results + save photo (300% reduction in this example):
    Image Added

  5. You can get even greater results for regular pictures:
    Image Added


Animated resources

For animated resources (gif/etc) I didn't find yet an easy tool that can resize the images, but I found one that easily optimises + compresses them: https://compressor.io/compress

It's fairly easy to use, so I won't do screenshots on it. 


DO NOTs (smile)

  1. DO NOT paste blog post content from Word or copying from other richtext sources(HTML/e-mail/etc). If you need to paste content, strip it's styling with a tool like http://www.striphtml.com. You should only paste plain text and format it with the editor from Wordpress
  2. DO NOT link images from other websites, they might disappear at some point. DO download them and then upload them to our Wordpress and link them.


Attachments (images/etc)

...