How large should photos on my blog be?












5















I sometimes post photos on my blog, like when I'm blogging about food. I've been shrinking the huge pictures my phone takes down to a size that fits more reasonably in a browser window -- my browser window, so far -- because I don't want my posts to require a huge window. Recently I've noticed that the platform I use (Dreamwidth) now has some degree of responsiveness; if I make a Chrome window smaller it scales the photos too, and my posts even look fine on a phone. This was not always the case, and is still not the case in Firefox for some reason. (I haven't tested additional browsers.)



That some sites and/or browsers do scaling suggests I could use higher-resolution pictures, but some browsers don't scale so I don't want things to be too huge. In addition, bandwidth might still be a concern; not everybody has fiber or a beefy data plan, after all. And on the proverbial third hand, there are now high-DPI displays on which the photos I'm using might be tiny (I don't have direct knowledge).



Putting all this together, what are current good practices for photo sizes on blog posts? Should I keep doing what I'm doing, which is to scale down the width to under 1000px (generally ~800px)? How do I trade off large high-res displays on the one hand and smaller displays with browsers that don't auto-scale on the other?



Note that I'm not talking about special photos where I might especially want high-res (like that gorgeous sunset photo taken on vacation or the like). In that case I'd make a higher-res version available behind a click, so it's opt-in. Nor am I asking about print publications where higher-res is important for production values. I'm asking about "ordinary" photos included in blog posts.










share|improve this question

























  • I was wondering when you were going to "enter" the contest. In quotes because, as you say, you're running the thing so it's not a real entry.

    – Cyn
    3 hours ago






  • 1





    @Cyn yes, I was holding off to let the real entrants build up some steam first.

    – Monica Cellio
    3 hours ago
















5















I sometimes post photos on my blog, like when I'm blogging about food. I've been shrinking the huge pictures my phone takes down to a size that fits more reasonably in a browser window -- my browser window, so far -- because I don't want my posts to require a huge window. Recently I've noticed that the platform I use (Dreamwidth) now has some degree of responsiveness; if I make a Chrome window smaller it scales the photos too, and my posts even look fine on a phone. This was not always the case, and is still not the case in Firefox for some reason. (I haven't tested additional browsers.)



That some sites and/or browsers do scaling suggests I could use higher-resolution pictures, but some browsers don't scale so I don't want things to be too huge. In addition, bandwidth might still be a concern; not everybody has fiber or a beefy data plan, after all. And on the proverbial third hand, there are now high-DPI displays on which the photos I'm using might be tiny (I don't have direct knowledge).



Putting all this together, what are current good practices for photo sizes on blog posts? Should I keep doing what I'm doing, which is to scale down the width to under 1000px (generally ~800px)? How do I trade off large high-res displays on the one hand and smaller displays with browsers that don't auto-scale on the other?



Note that I'm not talking about special photos where I might especially want high-res (like that gorgeous sunset photo taken on vacation or the like). In that case I'd make a higher-res version available behind a click, so it's opt-in. Nor am I asking about print publications where higher-res is important for production values. I'm asking about "ordinary" photos included in blog posts.










share|improve this question

























  • I was wondering when you were going to "enter" the contest. In quotes because, as you say, you're running the thing so it's not a real entry.

    – Cyn
    3 hours ago






  • 1





    @Cyn yes, I was holding off to let the real entrants build up some steam first.

    – Monica Cellio
    3 hours ago














5












5








5








I sometimes post photos on my blog, like when I'm blogging about food. I've been shrinking the huge pictures my phone takes down to a size that fits more reasonably in a browser window -- my browser window, so far -- because I don't want my posts to require a huge window. Recently I've noticed that the platform I use (Dreamwidth) now has some degree of responsiveness; if I make a Chrome window smaller it scales the photos too, and my posts even look fine on a phone. This was not always the case, and is still not the case in Firefox for some reason. (I haven't tested additional browsers.)



That some sites and/or browsers do scaling suggests I could use higher-resolution pictures, but some browsers don't scale so I don't want things to be too huge. In addition, bandwidth might still be a concern; not everybody has fiber or a beefy data plan, after all. And on the proverbial third hand, there are now high-DPI displays on which the photos I'm using might be tiny (I don't have direct knowledge).



Putting all this together, what are current good practices for photo sizes on blog posts? Should I keep doing what I'm doing, which is to scale down the width to under 1000px (generally ~800px)? How do I trade off large high-res displays on the one hand and smaller displays with browsers that don't auto-scale on the other?



Note that I'm not talking about special photos where I might especially want high-res (like that gorgeous sunset photo taken on vacation or the like). In that case I'd make a higher-res version available behind a click, so it's opt-in. Nor am I asking about print publications where higher-res is important for production values. I'm asking about "ordinary" photos included in blog posts.










share|improve this question
















I sometimes post photos on my blog, like when I'm blogging about food. I've been shrinking the huge pictures my phone takes down to a size that fits more reasonably in a browser window -- my browser window, so far -- because I don't want my posts to require a huge window. Recently I've noticed that the platform I use (Dreamwidth) now has some degree of responsiveness; if I make a Chrome window smaller it scales the photos too, and my posts even look fine on a phone. This was not always the case, and is still not the case in Firefox for some reason. (I haven't tested additional browsers.)



That some sites and/or browsers do scaling suggests I could use higher-resolution pictures, but some browsers don't scale so I don't want things to be too huge. In addition, bandwidth might still be a concern; not everybody has fiber or a beefy data plan, after all. And on the proverbial third hand, there are now high-DPI displays on which the photos I'm using might be tiny (I don't have direct knowledge).



Putting all this together, what are current good practices for photo sizes on blog posts? Should I keep doing what I'm doing, which is to scale down the width to under 1000px (generally ~800px)? How do I trade off large high-res displays on the one hand and smaller displays with browsers that don't auto-scale on the other?



Note that I'm not talking about special photos where I might especially want high-res (like that gorgeous sunset photo taken on vacation or the like). In that case I'd make a higher-res version available behind a click, so it's opt-in. Nor am I asking about print publications where higher-res is important for production values. I'm asking about "ordinary" photos included in blog posts.







blog artwork






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 5 hours ago







Monica Cellio

















asked 6 hours ago









Monica CellioMonica Cellio

15.7k23584




15.7k23584













  • I was wondering when you were going to "enter" the contest. In quotes because, as you say, you're running the thing so it's not a real entry.

    – Cyn
    3 hours ago






  • 1





    @Cyn yes, I was holding off to let the real entrants build up some steam first.

    – Monica Cellio
    3 hours ago



















  • I was wondering when you were going to "enter" the contest. In quotes because, as you say, you're running the thing so it's not a real entry.

    – Cyn
    3 hours ago






  • 1





    @Cyn yes, I was holding off to let the real entrants build up some steam first.

    – Monica Cellio
    3 hours ago

















I was wondering when you were going to "enter" the contest. In quotes because, as you say, you're running the thing so it's not a real entry.

– Cyn
3 hours ago





I was wondering when you were going to "enter" the contest. In quotes because, as you say, you're running the thing so it's not a real entry.

– Cyn
3 hours ago




1




1





@Cyn yes, I was holding off to let the real entrants build up some steam first.

– Monica Cellio
3 hours ago





@Cyn yes, I was holding off to let the real entrants build up some steam first.

– Monica Cellio
3 hours ago










2 Answers
2






active

oldest

votes


















1














Any online image can be scaled to 100% of the width of the webpage, that means it will always fill the available width, regardless of the actual pixel size.



The internet is increasingly skewing to mobile devices, although engagement (the time spent on the website) is still slightly higher on desktop. See this breakdown of mobile screen size usage by country. 2 sizes are most popular: 750*1334, 1080*1920 (screens are oriented for portrait). At a distant 3rd place are "budget" screens at 720x1280 and the "retina"-like high-density screens that double that (1440*2560, 1440*2960). The high-density screens aren't for images, but to make text appear sharper.



The breakdown by country is interesting. Emerging economies skew strongly to the budget screens, while "tech" economies skew strongly to 1080*1920 and larger. I have also read that many emerging economies are almost entirely mobile, having missed the desktop boom. Japan is an odd outlier as a tech economy with overwhelmingly smaller screens.



Somewhat more important than pixel size is compression. TinyPNG, pngquant, ImageOptim, and other online services can drastically reduce the file size of a large image by selectively removing the possible colors, typically reducing it to ~25% of the original download. Depending on the image, this compression can look almost "lossless", much cleaner than the chunky squares of JPG. These tools will allow your online images to be much higher in resolution while having a lower memory footprint and faster download time.






share|improve this answer



















  • 1





    Oh, so instead of trying to scale the image itself, use scaling in the img tag? I hadn't thought of that. (Also didn't know you could use percentages and not just pixels.)

    – Monica Cellio
    5 hours ago











  • OK but you're wasting a lot of download bandwidth by sending a 10MP image and telling the browser to downsize it to 2MP or even less. The image should still be appropriately sized before being uploaded to the blog.

    – David Richerby
    2 hours ago





















1














I use the "medium" size in Wordpress, which is 500 px width and height proportional as required by the image. This fits across my entire column (depending on the monitor/window size/browser of course). That's a center column of content with menu columns on either side.



It's a bit bigger than many other sites use, but it works for me. I may change it if I change my Wordpress theme. What's best for the size of the picture depends on the theme or website layout.



As you've pointed out, another important issue is platform. Wordpress automatically scales graphics. I just checked my blog from my phone and the graphics are the appropriate size (though some get blurry when enlarged...even if they're still smaller than the crisp photos on my large desktop monitor).



In general it's better to use relative sizes and not absolute ones. This is true for font size as well. What's gorgeous and perfect on your setup is impossible to read on someone else's.






share|improve this answer























    Your Answer








    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "166"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: false,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: null,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    noCode: true, onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwriting.stackexchange.com%2fquestions%2f42923%2fhow-large-should-photos-on-my-blog-be%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    Any online image can be scaled to 100% of the width of the webpage, that means it will always fill the available width, regardless of the actual pixel size.



    The internet is increasingly skewing to mobile devices, although engagement (the time spent on the website) is still slightly higher on desktop. See this breakdown of mobile screen size usage by country. 2 sizes are most popular: 750*1334, 1080*1920 (screens are oriented for portrait). At a distant 3rd place are "budget" screens at 720x1280 and the "retina"-like high-density screens that double that (1440*2560, 1440*2960). The high-density screens aren't for images, but to make text appear sharper.



    The breakdown by country is interesting. Emerging economies skew strongly to the budget screens, while "tech" economies skew strongly to 1080*1920 and larger. I have also read that many emerging economies are almost entirely mobile, having missed the desktop boom. Japan is an odd outlier as a tech economy with overwhelmingly smaller screens.



    Somewhat more important than pixel size is compression. TinyPNG, pngquant, ImageOptim, and other online services can drastically reduce the file size of a large image by selectively removing the possible colors, typically reducing it to ~25% of the original download. Depending on the image, this compression can look almost "lossless", much cleaner than the chunky squares of JPG. These tools will allow your online images to be much higher in resolution while having a lower memory footprint and faster download time.






    share|improve this answer



















    • 1





      Oh, so instead of trying to scale the image itself, use scaling in the img tag? I hadn't thought of that. (Also didn't know you could use percentages and not just pixels.)

      – Monica Cellio
      5 hours ago











    • OK but you're wasting a lot of download bandwidth by sending a 10MP image and telling the browser to downsize it to 2MP or even less. The image should still be appropriately sized before being uploaded to the blog.

      – David Richerby
      2 hours ago


















    1














    Any online image can be scaled to 100% of the width of the webpage, that means it will always fill the available width, regardless of the actual pixel size.



    The internet is increasingly skewing to mobile devices, although engagement (the time spent on the website) is still slightly higher on desktop. See this breakdown of mobile screen size usage by country. 2 sizes are most popular: 750*1334, 1080*1920 (screens are oriented for portrait). At a distant 3rd place are "budget" screens at 720x1280 and the "retina"-like high-density screens that double that (1440*2560, 1440*2960). The high-density screens aren't for images, but to make text appear sharper.



    The breakdown by country is interesting. Emerging economies skew strongly to the budget screens, while "tech" economies skew strongly to 1080*1920 and larger. I have also read that many emerging economies are almost entirely mobile, having missed the desktop boom. Japan is an odd outlier as a tech economy with overwhelmingly smaller screens.



    Somewhat more important than pixel size is compression. TinyPNG, pngquant, ImageOptim, and other online services can drastically reduce the file size of a large image by selectively removing the possible colors, typically reducing it to ~25% of the original download. Depending on the image, this compression can look almost "lossless", much cleaner than the chunky squares of JPG. These tools will allow your online images to be much higher in resolution while having a lower memory footprint and faster download time.






    share|improve this answer



















    • 1





      Oh, so instead of trying to scale the image itself, use scaling in the img tag? I hadn't thought of that. (Also didn't know you could use percentages and not just pixels.)

      – Monica Cellio
      5 hours ago











    • OK but you're wasting a lot of download bandwidth by sending a 10MP image and telling the browser to downsize it to 2MP or even less. The image should still be appropriately sized before being uploaded to the blog.

      – David Richerby
      2 hours ago
















    1












    1








    1







    Any online image can be scaled to 100% of the width of the webpage, that means it will always fill the available width, regardless of the actual pixel size.



    The internet is increasingly skewing to mobile devices, although engagement (the time spent on the website) is still slightly higher on desktop. See this breakdown of mobile screen size usage by country. 2 sizes are most popular: 750*1334, 1080*1920 (screens are oriented for portrait). At a distant 3rd place are "budget" screens at 720x1280 and the "retina"-like high-density screens that double that (1440*2560, 1440*2960). The high-density screens aren't for images, but to make text appear sharper.



    The breakdown by country is interesting. Emerging economies skew strongly to the budget screens, while "tech" economies skew strongly to 1080*1920 and larger. I have also read that many emerging economies are almost entirely mobile, having missed the desktop boom. Japan is an odd outlier as a tech economy with overwhelmingly smaller screens.



    Somewhat more important than pixel size is compression. TinyPNG, pngquant, ImageOptim, and other online services can drastically reduce the file size of a large image by selectively removing the possible colors, typically reducing it to ~25% of the original download. Depending on the image, this compression can look almost "lossless", much cleaner than the chunky squares of JPG. These tools will allow your online images to be much higher in resolution while having a lower memory footprint and faster download time.






    share|improve this answer













    Any online image can be scaled to 100% of the width of the webpage, that means it will always fill the available width, regardless of the actual pixel size.



    The internet is increasingly skewing to mobile devices, although engagement (the time spent on the website) is still slightly higher on desktop. See this breakdown of mobile screen size usage by country. 2 sizes are most popular: 750*1334, 1080*1920 (screens are oriented for portrait). At a distant 3rd place are "budget" screens at 720x1280 and the "retina"-like high-density screens that double that (1440*2560, 1440*2960). The high-density screens aren't for images, but to make text appear sharper.



    The breakdown by country is interesting. Emerging economies skew strongly to the budget screens, while "tech" economies skew strongly to 1080*1920 and larger. I have also read that many emerging economies are almost entirely mobile, having missed the desktop boom. Japan is an odd outlier as a tech economy with overwhelmingly smaller screens.



    Somewhat more important than pixel size is compression. TinyPNG, pngquant, ImageOptim, and other online services can drastically reduce the file size of a large image by selectively removing the possible colors, typically reducing it to ~25% of the original download. Depending on the image, this compression can look almost "lossless", much cleaner than the chunky squares of JPG. These tools will allow your online images to be much higher in resolution while having a lower memory footprint and faster download time.







    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered 5 hours ago









    wetcircuitwetcircuit

    11.8k22256




    11.8k22256








    • 1





      Oh, so instead of trying to scale the image itself, use scaling in the img tag? I hadn't thought of that. (Also didn't know you could use percentages and not just pixels.)

      – Monica Cellio
      5 hours ago











    • OK but you're wasting a lot of download bandwidth by sending a 10MP image and telling the browser to downsize it to 2MP or even less. The image should still be appropriately sized before being uploaded to the blog.

      – David Richerby
      2 hours ago
















    • 1





      Oh, so instead of trying to scale the image itself, use scaling in the img tag? I hadn't thought of that. (Also didn't know you could use percentages and not just pixels.)

      – Monica Cellio
      5 hours ago











    • OK but you're wasting a lot of download bandwidth by sending a 10MP image and telling the browser to downsize it to 2MP or even less. The image should still be appropriately sized before being uploaded to the blog.

      – David Richerby
      2 hours ago










    1




    1





    Oh, so instead of trying to scale the image itself, use scaling in the img tag? I hadn't thought of that. (Also didn't know you could use percentages and not just pixels.)

    – Monica Cellio
    5 hours ago





    Oh, so instead of trying to scale the image itself, use scaling in the img tag? I hadn't thought of that. (Also didn't know you could use percentages and not just pixels.)

    – Monica Cellio
    5 hours ago













    OK but you're wasting a lot of download bandwidth by sending a 10MP image and telling the browser to downsize it to 2MP or even less. The image should still be appropriately sized before being uploaded to the blog.

    – David Richerby
    2 hours ago







    OK but you're wasting a lot of download bandwidth by sending a 10MP image and telling the browser to downsize it to 2MP or even less. The image should still be appropriately sized before being uploaded to the blog.

    – David Richerby
    2 hours ago













    1














    I use the "medium" size in Wordpress, which is 500 px width and height proportional as required by the image. This fits across my entire column (depending on the monitor/window size/browser of course). That's a center column of content with menu columns on either side.



    It's a bit bigger than many other sites use, but it works for me. I may change it if I change my Wordpress theme. What's best for the size of the picture depends on the theme or website layout.



    As you've pointed out, another important issue is platform. Wordpress automatically scales graphics. I just checked my blog from my phone and the graphics are the appropriate size (though some get blurry when enlarged...even if they're still smaller than the crisp photos on my large desktop monitor).



    In general it's better to use relative sizes and not absolute ones. This is true for font size as well. What's gorgeous and perfect on your setup is impossible to read on someone else's.






    share|improve this answer




























      1














      I use the "medium" size in Wordpress, which is 500 px width and height proportional as required by the image. This fits across my entire column (depending on the monitor/window size/browser of course). That's a center column of content with menu columns on either side.



      It's a bit bigger than many other sites use, but it works for me. I may change it if I change my Wordpress theme. What's best for the size of the picture depends on the theme or website layout.



      As you've pointed out, another important issue is platform. Wordpress automatically scales graphics. I just checked my blog from my phone and the graphics are the appropriate size (though some get blurry when enlarged...even if they're still smaller than the crisp photos on my large desktop monitor).



      In general it's better to use relative sizes and not absolute ones. This is true for font size as well. What's gorgeous and perfect on your setup is impossible to read on someone else's.






      share|improve this answer


























        1












        1








        1







        I use the "medium" size in Wordpress, which is 500 px width and height proportional as required by the image. This fits across my entire column (depending on the monitor/window size/browser of course). That's a center column of content with menu columns on either side.



        It's a bit bigger than many other sites use, but it works for me. I may change it if I change my Wordpress theme. What's best for the size of the picture depends on the theme or website layout.



        As you've pointed out, another important issue is platform. Wordpress automatically scales graphics. I just checked my blog from my phone and the graphics are the appropriate size (though some get blurry when enlarged...even if they're still smaller than the crisp photos on my large desktop monitor).



        In general it's better to use relative sizes and not absolute ones. This is true for font size as well. What's gorgeous and perfect on your setup is impossible to read on someone else's.






        share|improve this answer













        I use the "medium" size in Wordpress, which is 500 px width and height proportional as required by the image. This fits across my entire column (depending on the monitor/window size/browser of course). That's a center column of content with menu columns on either side.



        It's a bit bigger than many other sites use, but it works for me. I may change it if I change my Wordpress theme. What's best for the size of the picture depends on the theme or website layout.



        As you've pointed out, another important issue is platform. Wordpress automatically scales graphics. I just checked my blog from my phone and the graphics are the appropriate size (though some get blurry when enlarged...even if they're still smaller than the crisp photos on my large desktop monitor).



        In general it's better to use relative sizes and not absolute ones. This is true for font size as well. What's gorgeous and perfect on your setup is impossible to read on someone else's.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered 3 hours ago









        CynCyn

        12.6k12763




        12.6k12763






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Writing Stack Exchange!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwriting.stackexchange.com%2fquestions%2f42923%2fhow-large-should-photos-on-my-blog-be%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            How to label and detect the document text images

            Vallis Paradisi

            Tabula Rosettana