Urs E. Gattiker

Professor Urs E. Gattiker - DrKPI is corporate Europe's leading social media metrics expert (see his books). He continues to work with start-ups. Urs is CEO of CyTRAP Labs GmbH.

8 thoughts on “Blog optimization guide: Image type and size

  • 22. June 2014 at 7:33
    Permalink

    Even though I find the information in your post helpful, I like the idea of the responsive sizing better. When you want
    your reach to be as big as possible while maintaining brand, it helps if
    whatever it is looks nice no matter who is looking at it… and what better cost-effective way to do that than using responsive sizing while creating a post?

    Reply
    • 22. June 2014 at 7:52
      Permalink

      Dear Biohelixx
      Thanks so much for commenting.

      You got a point there. But fortunately,we use a design for your blog as we do …. Twenty Eleven Theme. So things a slightly easier.

      What you have to do is just make sure that the size is correctly set (i.e. both width and height).
      Yes, smaller images help a great deail here.

      Depending upon the device you use, the theme then adjust this exactly specified image size (i.e. width and height). In turn, it will fit your device’s screen such as an Android or Apple OS-driven mobile phone. In turn, things should work.

      Maybe you can test drive ours and see, it works properly when using your preferred device… We sometimes check using an iPad or iPhone with the help of connecting to our WiFi system.

      Hope this is useful. And yes you can read up more about this on the Web like here:

      http://wordpress.org/support/topic/resizing-images-for-a-responsive-design
      http://wordpress.org/support/topic/theme-twenty-eleven-not-mobile-friendly

      Thanks for sharing.
      Urs
      @DrKPIcom:disqus

      Reply
  • 23. June 2014 at 9:19
    Permalink

    Ohm’ wie bitte? Screenshots soll man in PNG machen? Dann hast du ein file das etwa 5mal so gross ist wie ein web-optimiertes jpg Bild

    Reply
    • 23. June 2014 at 13:09
      Permalink

      Dear @annubis:disqus

      Thanks for sharing your thoughts on this blog, Eric
      Yes and no.
      Actually, if you use png I see several advantages:

      1. no license challenge since with jpg you should use one
      2. it is perfect for “graphic image files, like logos and infographics on a small scale”

      However, I agree with you for really nice, for instance, scenic pictures with many colors a jpg is better.

      Salue
      urs

      Reply
      • 25. June 2014 at 9:00
        Permalink

        actually your wrong

        yes jpg is under a special license terms but this license is for free using like on gif formate.

        but png is greate for logos and small pictures with a transparent background. than is the quality of this picture realy better and the file is smaller than with gif! this is in my opinion the better way for a image.

        well, it is really dangerous the say that the png format is always the better way to safe a picture !!

        Reply
        • 25. June 2014 at 14:50
          Permalink

          Dear Eric-Oliver Mächler

          Thanks so much for going to the trouble to reply to me once again here regarding png and jpb formats for picture.
          Maybe I did not communicate as well as I should have. For this I apologise. I wrote:

          “PNG is perfect for graphic image files, like logos and infographics on a small scale, making it a common choice for use on the Web. Plus, saving, restoring and re-saving a PNG image will not degrade its quality.”

          Hence I did not imply that for every case png is better. Again, if it is a picture with many colors such as a scenic photo, jpg is surely better. We agree on this one. But in most blogs we do not post scenic shots or as I wrote:

          Use the JPG format for photographic images, which generally have millions of colors.”

          I hope you agree with that 🙂
          Urs
          @DrKPIcom:twitter

          Reply
  • 20. July 2014 at 21:07
    Permalink

    Using some online tools to analyise your site, you can quickly gather information ranging from speed to SEO requirements.
    http://tools.pingdom.com/fpt/
    http://www.webpagetest.org/ -> nice feature allowing you to chose your BYOD and geo location
    There are many more out there, search for them.
    Its impossible to satisfy all their suggestions and to end up with 100% score. However they provide numerous insights into how to improve your site.

    A little more complicated is Google pagespeed
    http://code.google.com/p/modpagespeed/
    You might need your host/ISP to set this up for you on your site, it does speed up the delivery of your content to the browser it has some quirks, like capatcha images are cached so you need to turn pagespeed off on those images and if you are a developer you dont want it till you are ready to go into production, as its impossible to debug style sheets and javascripts when they are cached.

    For assistive technology (JAWS for blind people on Windows) these programs rely on H1 and H2 headings so along with your blog post and making the images good, you should also see that the heading or headings on your page are of type H1 and H2.

    What about mulitple images on the same page?
    For good SEO ranking and for JAWS all images should have (unique) alt tags and links should have titles. That can be tedious to caption each image so on one of the sites I built an array of phrases and looped over the array and generated unique’ish alt tags for each image still within the gambit of the page.
    You can see it here – hover over the images.
    http://robbietrippmotors.co.za/car/38

    Lastly, money buys the Whiskey and after hours of research and tweaking to get better page ranking at Google, take some cash and go buy some ads and see your page ranking climb.

    GIF is almost dead, replaced by PNG except for animated GIF.
    Both GIF nd PNG have a fixed palette of 256 colours and work good with:
    a) Spot colour images, logos, cartoons etc.
    b) Grey scale images – the human eye struggles to see more than 256 shades in one colour.
    Full colour needs more:
    RGB 3 palettes = 256x256x256 = 16million colours and this produces images (without banding) and here, thanks to the the Joint Photographer Experts Group (JPEG) is what you need.
    http://www.jpeg.org/

    Ciao

    Reply
    • 21. July 2014 at 10:01
      Permalink

      Dear Naude
      Thanks so much for your thoughtful feedback with these wonderful links. I particularly like your comment:

      What about mulitple images on the same page?
      For good SEO ranking and for JAWS all images should have (unique) alt tags and links should have titles. That can be tedious to caption each image so on one of the sites I built an array of phrases and looped over the array and generated unique’ish alt tags for each image still within the gambit of the page.
      You can see it here – hover over the images.
      http://robbietrippmotors.co.za/car/38

      Of course, the above is something we do with our images (e.g., see blog post right here).
      This you can move your mouse over them and you are given an explanation (i.e. important for blind people).
      We also have the tag with the same text as given for the blind. As important, the link is such that it includes keywords as well, such as:
      http://blog.strimgroup.com/…./2014/image/07/Analytics-for-experts.png

      UNFORTUNATELY, when you use the convenient way to upload with wordpress it does not always work properly … Hence, you have to watch out to make sure. Because of this we upload images to the clients’ domain on the server such as: http://blog.strimgroup.com/…./2014/image/07/Analytics-for-experts.png

      Also, I find your point very important that one has to check these things but be aware that one will not be able to get a 100% score 🙂
      Of course, that is life…. nobody is ever perfect. Nonetheless, checking things out, one can learn and improve a bit.

      Thanks so much, Naude, for sharing.
      Urs

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *