Only new to this, so I’m sure I’m doing something wrong.
But no matter how high a quality, no matter what dimensions, every featured image in all my blog posts ends up looking like trash. Grainy, blurry, cropped. As an example, I tried widely promoted 1200*630 and it’s blurry on desktop, and cropped on my phone. Even if someone could link me to blog that ‘works’ so I can see what a good blog is meant to look like!
This sounds like an issue with your template. If you are using a template from the marketplace you may be able to contact that vendor for assistance if there is an issue. If this is a custom template you may need to investigate the code and update the template for your featured images. If you could share a sample post we could offer some advice for what you need to look at.
Ah, had not thought about it being a template thing. Here’s our latest blog post: Special Coordinator message for the Rural Fire Service
That image is crisp and clear when uploaded, but looks horrid once published.
That template and image are the issue. You have a skyscraper image (tall) that’s trying to fit into a landscape (wide) space. What is impacting this quality is the CSS in your template to set the image to Cover ( object-fit CSS property - CSS | MDN ).
What I would recommend is that you design your images to be landscape in dimensions to scale better. That should solve your issue. Otherwise you will need to adjust the CSS, but no matter what you do either the image of that size would be cut off or appear blurry.
Thanks Ben. The tall image in this instance is because that’s how blog images show up when viewed on my phone. I will go back to landscape, and deal with things still not being quite right. I think it’s mostly just coming from one system to another.
EDIT: Never played around with CSS or HTML etc too much, but I’m slowing learning.
Personally speaking, on mobile I feel the current skyscraper image is a bit much to scroll through to reach the content. I would also try to do something with the link color because the yellow on white is difficult to read. Changes like these can be done in the HTML/CSS of the templates. If you changed back to landscape and were still having issues I’d be open to taking a look at the template if you wanted me to and see if there are options you can explore.
Template is “Barricade”, a free / standard / default / whatever theme provided by HubSpot.
Changed back to landscape on that particular post. Fits on desktop, but blurry, certainly not the crisp image that was uploaded (which is white text on a red background, created in Inkscape and exported as a png - and looks fine when opened on my PC).
I’m working off an image size of 1200 x 630, which is the preferred image size for blog posts I’ve seen mentioned a number of places. Is there a better size?
Template I’m using is one of the free ones that came with our HubSpot subscription, “Barricade”.
I found this bit in the template’s HTML. I was able to successfully change the height to 630, but not sure how to apply something like “contain” ??
{% if content.featured_image %}
<div class="blog-post__image-wrapper">
<img class="blog-post__image" src="{{ content.featured_image }}" height="630" loading="eager" alt="{{ content.featured_image_alt_text }}">
</div>
{% endif %}
If I change the img class from blog-post__image, text no longer wraps around the image.
Hey there ! Sorry you’re having that problem. I typically use 1270 x 720 pixels with 300 dpi, and that works for me! I’ll link 2 of my company’s blog posts, 1 where I made the graphic and another where our agency made the graphic
2. Friction Welding for Tap and Cutting Tools
I hope this is somewhat helpful!
Thank you! Will give this a shot 
May I ask, what template are you using for your blog?
Works for me, thank you!
I now have 1270x720 on a note stuck to my monitor 
Thanks BB. Are you using a specific Theme for this page? Looks great in both desktop and mobile! Chris