Periodically, sharp-eyed Weebly users report that some of their uploaded images just don't present as sharply as they'd really like. Now, for the vast majority of us, image size re-scaling on the website (the resizing of an image to fit into a particular page container) doesn't produce a material degradation in the quality of uploaded images. However, for those who deal with photographic portfolios or those with graphic image logos that have particularly fine detail (in particular, text within the image), it can be useful to know how to improve the quality of an image with just a few lines of additional css.

Rather than taking the painstaking approach of different sized images for different viewports, you can add a few lines of css code to target particular images and sharpen them up to something much closer to what you originally uploaded. Let's say that we'd like to target the site logo. In the Weebly Site Editor, click on Settings then SEO in the left-hand sidebar then scroll down to the Header Code input box and add the following code:

<style>
.wsite-logo a img {
image-rendering: -o-crisp-edges;  /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome, Edge */
/* image-rendering: crisp-edges; Universal - disabled due to poor Firefox result */
-ms-interpolation-mode: nearest-neighbor;  /* IE */
}
</style>

The improvement is subtle but, if you compare the image on the website to what you uploaded, you'll see that the website image will be much closer in rendered sharpness to the image you uploaded. Below is an example. The uploaded logo image on the left is how things look by default. Not bad but very slightly blurred with a small loss of contrast and text shadowing not as pronounced as the originally uploaded image. After adding the code above, you see that the contrast is improved, text lettering is a bit sharper, and the fine double line outline is sharper. This is much closer to the originally uploaded image quality. Again, you likely won't need to apply this to all images across your site (the improvement is unlikely to be material on regular photos at larger sizes). For highly-scaled, smaller, detailed images like logos, however, the improvement can be worth the minimal extra effort.

Uploaded image - no code improvementUploaded image - with code improvement

Testing notes: I tested the image-rendering css on Chrome, Edge, Safari, Opera, and Firefox. Firefox's scaling algorithm is smart enough that it doesn't need any help from the image-rendering css. Images look great by default. The other browsers saw the improvement shown in the example above.