8 tips for adding photos to your website or blog

Photos and graphics are extremely important for any website or blog - they support your brand, help communicate your message and create the look and feel you want from your website.

Once you have a professional website developed you still need to be able to add images correctly to your site or blog not only to support the look but also to help with SEO and avoid loosing ranking from a few steps that you were not aware of.

Here are a few tips and must dos for adding new images to your website. These tips are general and apply to any platform but in this blog post I’m using Squarespace & Shopify as my examples.


  1. Naming your image - It is extremely important to name you image with a short descriptive name and not use the default system generated file name. In many platform if an ‘alt’ tag is not added this will default to the tag. For best standards use low case and no space but hyphens instead.

  1. Re-Size your image - before you upload any image to your website make sure your image is web optimised. This means a low file size to help with your site speed / upload. A website ‘heavy’ with images will be slow and will upset your customers and google.

    You can save for web with tools such as Photoshop.

  2. Image layout - before you upload your image make sure it is the correct layout. For example all your blog thumbnails might be landscape and if you upload a portrait image it will look out of place. Or if you are replacing an image make sure it is the same orientation / ratio to fit within the space allocated in your design.

  3. Image Editing - any image editing is best done before upload - but in some cases there will be an automated overlay in your site style sheet - make sure you understand the CCS implications and know how your new images will work within the design.

  4. Add alt text to help with SEO & accessibility - make sure this is descriptive and includes your main key words.

  5. Remove text from image - if you image is graphic that includes text it might not show as you want it to on different browser widths. Make sure you remove text and use ‘live’ text as much as possible for best user experience across all devises.

  6. File types - to help with site speed and page load upload as JPG where possible.

Previous
Previous

How to add links to Instagram profile - a dedicated links page

Next
Next

Website Meta Title Tag & Meta Description Tag explained