{"id":386,"date":"2017-05-20T00:45:54","date_gmt":"2017-05-19T22:45:54","guid":{"rendered":"http:\/\/themanual.local\/?p=386"},"modified":"2023-09-07T09:55:10","modified_gmt":"2023-09-07T07:55:10","slug":"images-and-optimisation","status":"publish","type":"post","link":"https:\/\/simonbarnett.co.za\/themanual\/images-and-optimisation\/","title":{"rendered":"Images and Optimisation"},"content":{"rendered":"\n

Overview<\/h2>\nThe reasons for optimising are at the end.
\nThe steps here cover the following:\n
    \n
  1. Correct file formats for the web.<\/li>\n
  2. Correct pixel dimensions for your website.<\/li>\n
  3. Smallest file size.<\/li>\n<\/ol>\n

    * There’s a tutorial here<\/a> for people with Macs who don’t have Photoshop.<\/p>\n

    \n

    The Tips<\/h2>\n

    Here are the main tips in brief. There are only two and a half tips, so we’re talking really brief.<\/p>\n\t

    File formats<\/h4>\n

    With little exception (gif, svg), the only file formats for web worth considering are jpg and png.<\/p>\n

    The general rule is: jpeg photos, png logos.<\/p>\n

    To expand on that slightly:<\/p>\n

    JPEG Photos<\/strong><\/h5>\n

    Pictures of people and things should be in jpg format.<\/p>\n

    \"\"<\/p>\n

    PNG Logos<\/strong><\/h5>\n

    \"\"Logos and other vector graphics – ie. images with hard-edged graphical elements – should be in png format.<\/p>\n

    In addition, logo and graphic vector-based images should be at twice their intended size in pixels (4x by area) to account for retina screens.<\/p>\n

    \n

    Exceptions<\/h4>\n

    Text over a Photo<\/h5>\nIf you want a photo with overlaid text it’s best to lay it out on the website by using a jpg pic as the background image to a row or column, then type the text into a module.
    \nIt’s best not to do your text as part of the image, but if you really have to, then png is the format to use for combined photos and text.\n
    Deep Etched Items<\/h5>\n

    For product shots and similarly singular and distinct photos of objects, free of their backgrounds, you’ll need a file format with transparency, and that’s png<\/strong>.<\/p>\n

    (There’s a new format from Google which handles photos, hard edges, and transparency, all at smaller file sizes – WebP<\/a> – but it’s not well-supported as yet).<\/p>\n\t

    Pixel Size: Imsanity<\/h4>\n

    I would normally advise an upper limit on image size, which would be a unique number based on the width of your specific website, but I’ve got you covered.<\/p>\n

    I always install a size-limiting plugin called Imsanity<\/a> (as in Image Insanity) on the websites I build.<\/p>\n

    This plugin automatically limits the maximum image size which I set based on your website requirements. This prevents overloading the website by uploading huge images.<\/p>\n

    However perhaps you have huuuge images which would take a long time to upload, and besides, resizing them first is advisable in any case, which I’ll explain in the next tip. In that case as a general rule, here’s the width that will cover most websites:<\/p>\n

    \n
    1366px<\/h5>\n<\/blockquote>\n\t

    File Size \/ Compression<\/h4>\n

    Both types of image should be compressed as much as possible without losing quality.<\/p>\n

    This tip is more of a rule, and you should always make this the last step in your workflow before uploading the image to WordPress:<\/p>\n