The quality of images gets important usually if we have text implemented on a rostered image, and we want it to be readable when the image shrinks. Or when we use images as icons, but they are too blurry when resizing (downscaling).
When ever you create a project from scratch, you need to make some design decision which will support various screen resolutions and sizes. And even then you can notice when working with rostered images that if they scale from upper to lower size they get blurry!
You really should provide a quite broad numbers of images for each design but even then you still need to sharp them up with CSS like in the example below:
img {
image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
image-rendering: crisp-edges
gives us solid 94% of browser coverage.
If you need 100% support, you need to change the tactic and use multiple version of same image without scaling or using cropping instead (if your design and image content allow you for such thing).
<picture>
<source media="(min-width: 900px)" srcset="BigImage.png">
<source media="(min-width: 480px)" srcset="MediumImage.png">
<img src="OtherImage.png" alt="IfItDoesntMatchAnyMedia">
</picture>
If you use an image as background, you could use media query to swap files based on screen size. Just remember that you need to use images as 100% width and height of their original size to keep them crispy sharp without using the css: image-rendering: crisp-edges;
The example query below:
#main-img {
width: 250px;
height: 250px;
background-image: url(https://mywebsite.com/something/myimg-W250xH250.png);
}
@media screen and (max-width: 767px) {
#main-img{
width: 250px;
height: 250px;
background-image: url(https://mywebsite.com/something/myimg-W250xH250.png);
}
}
@media screen and (min-width: 768px) {
#main-img{
width: 500px;
height: 500px;
background-image: url(https://mywebsite.com/something/myimg-W500xH500.png);
}
}
@media (min-width: 992px) {
#main-img{
width: 700px;
height: 700px;
background-image: url(https://mywebsite.com/something/myimg-W700xH700.png);
}
}
@media (min-width: 1200px) {
#main-img{
width: 1200px;
height: 1200px;
background-image: url(https://mywebsite.com/something//myimg-W1200xH1200.png);
}
}
The quality of images gets important usually if we have text implemented on a rostered image, and we want it to be readable when the image shrinks. Or when we use images as icons, but they are too blurred when downscaling resolution.
Fix blurry icons by implementing SVG
By default, WordPress does not accept SVG file format in its media library. You, can however change this by adding a script to your function.php file.
// functions.php
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
And also:
function fix_svg_thumb_display() {
echo '
td.media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail {
width: 100% !important;
height: auto !important;
}
';
}
add_action('admin_head', 'fix_svg_thumb_display');
see also alternative script at: https://wpengine.com/resources/enable-svg-wordpress/
If you are using icons instead of images, it might be a good idea to use SVG format instead of traditional rostered images. If you’re happy with image-rendering: crisp-edges fix, you might just skip the fallowing. SVG however gives you additional possibilities of editing and animating your image with CSS and JavaScript. And most important, it always sharps.
Figma – Online design APP for SVG export
You can use FIGMA software for free. It’s a great tool to design and export your SVG files from a vector graphics. See the example below:
On the image above, in the right bottom corner of a screen, you can find export options. Set file as SVG and include label name as ID from the checkbox menu. Then click export button. You can now play with your logo with CSS! And it will be crispy sharp at any time.
The SVG Export output will look as fallow:
<svg width="192" height="138" viewBox="0 0 192 138" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="svglogo">
<path id="logo-text" d="M11.0378 98.736H0.28575V92.4H29.5658V98.736H18.8138V126H11.0378V98.736ZM39.8111 103.584C40.7071 102.336 41.9071 101.392 43.4111 100.752C44.9471 100.112 46.7071 99.792 48.6911 99.792V106.704C47.8591 106.64 47.2991 106.608 47.0111 106.608C44.8671 106.608 43.1871 107.216 41.9711 108.432C40.7551 109.616 40.1471 111.408 40.1471 113.808V126H32.6591V100.176H39.8111V103.584ZM79.347 100.176V126H72.243V122.928C71.251 124.048 70.067 124.912 68.691 125.52C67.315 126.096 65.827 126.384 64.227 126.384C60.835 126.384 58.147 125.408 56.163 123.456C54.179 121.504 53.187 118.608 53.187 114.768V100.176H60.675V113.664C60.675 117.824 62.419 119.904 65.907 119.904C67.699 119.904 69.139 119.328 70.227 118.176C71.315 116.992 71.859 115.248 71.859 112.944V100.176H79.347ZM94.9721 126.384C92.8281 126.384 90.7321 126.128 88.6841 125.616C86.6361 125.072 85.0041 124.4 83.7881 123.6L86.2841 118.224C87.4361 118.96 88.8281 119.568 90.4601 120.048C92.0921 120.496 93.6921 120.72 95.2601 120.72C98.4281 120.72 100.012 119.936 100.012 118.368C100.012 117.632 99.5801 117.104 98.7161 116.784C97.8521 116.464 96.5241 116.192 94.7321 115.968C92.6201 115.648 90.8761 115.28 89.5001 114.864C88.1241 114.448 86.9241 113.712 85.9001 112.656C84.9081 111.6 84.4121 110.096 84.4121 108.144C84.4121 106.512 84.8761 105.072 85.8041 103.824C86.7641 102.544 88.1401 101.552 89.9321 100.848C91.7561 100.144 93.9001 99.792 96.3641 99.792C98.1881 99.792 99.9961 100 101.788 100.416C103.612 100.8 105.116 101.344 106.3 102.048L103.804 107.376C101.532 106.096 99.0521 105.456 96.3641 105.456C94.7641 105.456 93.5641 105.68 92.7641 106.128C91.9641 106.576 91.5641 107.152 91.5641 107.856C91.5641 108.656 91.9961 109.216 92.8601 109.536C93.7241 109.856 95.1001 110.16 96.9881 110.448C99.1001 110.8 100.828 111.184 102.172 111.6C103.516 111.984 104.684 112.704 105.676 113.76C106.668 114.816 107.164 116.288 107.164 118.176C107.164 119.776 106.684 121.2 105.724 122.448C104.764 123.696 103.356 124.672 101.5 125.376C99.6761 126.048 97.5001 126.384 94.9721 126.384ZM128.44 124.752C127.704 125.296 126.792 125.712 125.704 126C124.648 126.256 123.528 126.384 122.344 126.384C119.272 126.384 116.888 125.6 115.192 124.032C113.528 122.464 112.696 120.16 112.696 117.12V106.512H108.712V100.752H112.696V94.464H120.184V100.752H126.616V106.512H120.184V117.024C120.184 118.112 120.456 118.96 121 119.568C121.576 120.144 122.376 120.432 123.4 120.432C124.584 120.432 125.592 120.112 126.424 119.472L128.44 124.752ZM157.143 113.184C157.143 113.28 157.095 113.952 156.999 115.2H137.463C137.815 116.8 138.647 118.064 139.959 118.992C141.271 119.92 142.903 120.384 144.855 120.384C146.199 120.384 147.383 120.192 148.407 119.808C149.463 119.392 150.439 118.752 151.335 117.888L155.319 122.208C152.887 124.992 149.335 126.384 144.663 126.384C141.751 126.384 139.175 125.824 136.935 124.704C134.695 123.552 132.967 121.968 131.751 119.952C130.535 117.936 129.927 115.648 129.927 113.088C129.927 110.56 130.519 108.288 131.703 106.272C132.919 104.224 134.567 102.64 136.647 101.52C138.759 100.368 141.111 99.792 143.703 99.792C146.231 99.792 148.519 100.336 150.567 101.424C152.615 102.512 154.215 104.08 155.367 106.128C156.551 108.144 157.143 110.496 157.143 113.184ZM143.751 105.456C142.055 105.456 140.631 105.936 139.479 106.896C138.327 107.856 137.623 109.168 137.367 110.832H150.087C149.831 109.2 149.127 107.904 147.975 106.944C146.823 105.952 145.415 105.456 143.751 105.456ZM188.432 90.384V126H181.28V123.024C179.424 125.264 176.736 126.384 173.216 126.384C170.784 126.384 168.576 125.84 166.592 124.752C164.64 123.664 163.104 122.112 161.984 120.096C160.864 118.08 160.304 115.744 160.304 113.088C160.304 110.432 160.864 108.096 161.984 106.08C163.104 104.064 164.64 102.512 166.592 101.424C168.576 100.336 170.784 99.792 173.216 99.792C176.512 99.792 179.088 100.832 180.944 102.912V90.384H188.432ZM174.512 120.24C176.4 120.24 177.968 119.6 179.216 118.32C180.464 117.008 181.088 115.264 181.088 113.088C181.088 110.912 180.464 109.184 179.216 107.904C177.968 106.592 176.4 105.936 174.512 105.936C172.592 105.936 171.008 106.592 169.76 107.904C168.512 109.184 167.888 110.912 167.888 113.088C167.888 115.264 168.512 117.008 169.76 118.32C171.008 119.6 172.592 120.24 174.512 120.24Z" fill="#818181"/>
<path id="star-right" d="M125.049 39.1184C125.757 34.6138 132.243 34.6138 132.951 39.1183L134.455 48.6751C134.799 50.8606 136.851 52.352 139.036 52.0036L148.59 50.4802C153.093 49.7621 155.097 55.9303 151.032 57.9962L142.407 62.3792C140.435 63.3816 139.651 65.7946 140.657 67.7648L145.058 76.3801C147.133 80.4408 141.886 84.2529 138.665 81.0252L131.831 74.1773C130.269 72.6113 127.731 72.6113 126.169 74.1773L119.335 81.0252C116.114 84.2529 110.867 80.4408 112.942 76.3801L117.343 67.7648C118.349 65.7946 117.565 63.3816 115.593 62.3792L106.968 57.9962C102.903 55.9303 104.907 49.7621 109.41 50.4802L118.964 52.0036C121.149 52.352 123.201 50.8606 123.545 48.6751L125.049 39.1184Z" fill="#818181"/>
<path id="star-left" d="M59.0486 39.1184C59.7572 34.6138 66.2428 34.6138 66.9514 39.1183L68.4548 48.6751C68.7986 50.8606 70.8513 52.352 73.0361 52.0036L82.5897 50.4802C87.0927 49.7621 89.0969 55.9303 85.0318 57.9962L76.4073 62.3792C74.435 63.3816 73.651 65.7946 74.6574 67.7648L79.0585 76.3801C81.1329 80.4408 75.8859 84.2529 72.665 81.0252L65.8314 74.1773C64.2686 72.6113 61.7314 72.6113 60.1686 74.1773L53.335 81.0252C50.1141 84.2529 44.8671 80.4408 46.9415 76.3801L51.3426 67.7648C52.349 65.7946 51.565 63.3816 49.5927 62.3792L40.9683 57.9962C36.9032 55.9303 38.9073 49.7621 43.4104 50.4802L52.9639 52.0036C55.1487 52.352 57.2014 50.8606 57.5452 48.6751L59.0486 39.1184Z" fill="#818181"/>
<path id="star-middle" d="M102.937 34.442L101.433 24.8852C100.459 18.6915 91.5412 18.6915 90.5668 24.8853L89.0634 34.442C88.8485 35.8079 87.5656 36.74 86.2001 36.5223L76.6466 34.9989C70.4549 34.0116 67.6992 42.4928 73.2887 45.3334L81.9131 49.7164C83.1458 50.3429 83.6358 51.8511 83.0068 53.0824L78.6057 61.6977C75.7534 67.2812 82.968 72.5229 87.3968 68.0848L94.2304 61.2369C95.2071 60.2581 96.7929 60.2581 97.7696 61.2369L104.603 68.0848C109.032 72.5229 116.247 67.2812 113.394 61.6977L108.993 53.0824C108.364 51.8511 108.854 50.3429 110.087 49.7164L118.711 45.3334C124.301 42.4928 121.545 34.0116 115.353 34.9989L105.8 36.5223C104.434 36.74 103.151 35.8079 102.937 34.442Z" fill="#FAFF00" stroke="#818181" stroke-width="3"/>
</g>
</svg>
https://stackoverflow.com/questions/30460681/changing-image-src-depending-on-screen-size