1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>PNG vs JPG: which one is better for your site development | Pngset.com</title> 7 <meta name="description" content='Anytime you need to develop a website, you need to consider what kind of pictures you would be using on your site. If you choose the wrong image type, you can end up having a website that loads slowly. Likewise, you can eventually own a ...'> 8 9 <link rel="preload" href="https://pngset.com/assets/icons/fonts/icomoon.woff?oadavu" as="font" type="font/woff" crossorigin> 10 11 <link rel="icon" type="image/png" sizes="32x32" href="https://pngset.com/favicon-32x32.png"> 12 <link rel="icon" type="image/png" sizes="48x48" href="https://pngset.com/favicon-48x48.png"> 13 <link rel="icon" type="image/png" sizes="120x120" href="https://pngset.com/favicon-120x120.png"> 14 <link rel="icon" type="image/png" sizes="128x128" href="https://pngset.com/favicon-128x128.png"> 15 <link rel="icon" type="image/png" sizes="180x180" href="https://pngset.com/favicon-180x180.png">
16 <link rel="icon" type="image/png" sizes="192x192" href="https://pngset.com/favicon-192x192.png"> 17 <link rel="icon" type="image/png" sizes="256x256" href="https://pngset.com/favicon-256x256.png"> 18 <link rel="icon" type="image/png" sizes="512x512" href="https://pngset.com/favicon-512x512.png"> 19 <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="https://pngset.com/apple-touch-icon.png"> 20 <link rel="apple-touch-icon" type="image/png" sizes="120x120" href="https://pngset.com/favicon-120x120.png"> 21 <link rel="manifest" href="https://pngset.com/manifest.json"> 22
22<script>document.addEventListener("touchstart", function() {}, true);</script>
22 23 24 <!--Start of Bootstrap Css--> 25 <style> 26@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-font-sans-serif);font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}b,strong{font-weight:bolder}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
26[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}iframe{border:0}[hidden]{display:none!important}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-right:calc(var(--bs-gutter-x)/ -2);margin-left:calc(var(--bs-gutter-x)/ -2)}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x)/ 2);padding-left:calc(var(--bs-gutter-x)/ 2);margin-top:var(--bs-gutter-y)}.border-0{border:0!important}.border-0{border-width:0!important}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.m-0{margin:0!important}.mx-0{margin-right:0!important;margin-left:0!important}.modal-backdrop.fade{opacity:0}.fw-bolder{font-weight:bolder!important}.dropdown-menu.show{display:block}.modal.show .modal-dialog{transform:none}.collapse:not(.show){display:none}.tooltip.show{opacity:.9}.mt-5{margin-top:3rem!important}.mt-4{margin-top:1.5rem!important}.mb-5{margin-bottom:3rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.mb-3{margin-bottom:1rem!important}.me-3{margin-right:1rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.mb-0{margin-bottom:0!important}.mt-0{margin-top:0!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.pt-0{padding-top:0!important}.mb-4{margin-bottom:1.5rem!important}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal-title{margin-bottom:0;line-height:1.5}.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.modal-header .btn-close{padding:.5rem .5rem;margin:-.5rem -.5rem -.5rem auto}.modal-body{position:relative;flex:1 1 auto;padding:1rem}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.bg-light{background-color:#f8f9fa!important}.bg-dark{background-color:#212529!important}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}.navbar-brand{padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;text-decoration:none;white-space:nowrap}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}@media (min-width:576px){.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-dialog{max-width:500px;margin:1.75rem auto}.me-sm-3{margin-right:1rem!important}}.ms-5{margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.me-2{margin-right:.5rem!important}.mt-3{margin-top:1rem!important}.mt-2{margin-top:.5rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.p-2{padding:.5rem!important}.me-1{margin-right:.25rem!important}.ms-2{margin-left:.5rem!important}.p-0{padding:0!important}.pt-3{padding-top:1rem!important}.mb-2{margin-bottom:.5rem!important}.pt-4{padding-top:1.5rem!important}.pb-5{padding-bottom:3rem!important}.pt-2{padding-top:.5rem!important}.ps-3{padding-left:1rem!important}
26.g-4,.gy-4{--bs-gutter-y:1.5rem}.position-relative{position:relative!important}.clearfix::after{display:block;clear:both;content:""}.align-middle{vertical-align:middle!important}.w-100{width:100%!important}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-input{width:1em;height:1em;margin-top:.25em;vertical-align:top;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid rgba(0,0,0,.25);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{opacity:.5}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{height:1.5em}.form-control::-webkit-input-placeholder{color:#6c757d;opacity:1}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#dde0e3}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#dde0e3}.input-group>.form-control,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-select:focus{z-index:3}.col-6{flex:0 0 auto;width:50%}.d-none{display:none!important}.d-flex{display:flex!important}.d-block{display:block!important}.float-start{float:left!important}.float-end{float:right!important}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:1rem 1rem}.card-title{margin-bottom:.5rem}
26.card-text:last-child{margin-bottom:0}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.rounded-pill{border-radius:50rem!important}.btn-outline-danger{color:#dc3545;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529}.btn.disabled,.btn:disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.text-center{text-align:center!important}.text-danger,.text-danger p{color:#dc3545!important}.text-success{color:#198754!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:576px){.d-sm-block{display:block!important}.d-sm-none{display:none!important}.col-sm-8{flex:0 0 auto;width:66.6666666667%}.col-sm-4{flex:0 0 auto;width:33.3333333333%}.col-sm-12{flex:0 0 auto;width:100%}.col-sm-6{flex:0 0 auto;width:50%}}@media (min-width:768px){.d-md-block{display:block!important}.d-md-none{display:none!important}.col-md-6{flex:0 0 auto;width:50%}.col-md-11{flex:0 0 auto;width:91.6666666667%}.col-md-4{flex:0 0 auto;width:33.3333333333%}.col-md-5{flex: 0 0 auto;width: 41.6666666667%}.col-md-7{flex: 0 0 auto;width: 58.3333333333%}}@media (min-width:992px){.col-lg-10{flex:0 0 auto;width:83.3333333333%}.col-lg-3{flex:0 0 auto;width:25%}}@media (min-width:1200px){.col-xl-9{flex:0 0 auto;width:75%}.col-xl-2{flex:0 0 auto;width:16.6666666667%}} 27 </style> 28 <!--End of Bootstrap Css--> 29 30 <!--Start of Custom Css--> 31 <style> 32@font-face{font-family:icomoon;src:url('https://pngset.com/assets/icons/fonts/icomoon.woff?oadavu') format('woff');font-weight:400;font-style:normal;font-display:block}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.hideondesktop{display:none;}.icon-search:before{content:"\f002"}.icon-envelope-o:before{content:"\f003"}.icon-sort-desc:before{content: "\f0dd"}.icon-sort-asc:before{content: "\f0de"}.icon-heart:before{content:"\f004"}.icon-trash-o:before{content:"\f014"}.icon-download:before{content:"\f019"}.icon-pencil-square-o:before{content:"\f044"}.icon-share:before{content:"\f064"}.icon-eye:before{content:"\f06e"}.icon-twitter-square:before{content:"\f081"}.icon-facebook-square:before{content:"\f082"}.icon-heart-o:before{content:"\f08a"}.icon-link:before{content:"\f0c1"}.icon-pinterest-square:before{content:"\f0d3"}.icon-sort:before{content:"\f0dc"}.card img{background:linear-gradient(45deg,#e0e0e0 25%,transparent 25%,transparent 75%,#e0e0e0 75%,#e0e0e0),linear-gradient(45deg,#e0e0e0 25%,transparent 25%,transparent 75%,#e0e0e0 75%,#e0e0e0);background-position:0 0,5px 5px;background-color:#fff;background-size:10px 10px}#article-body{width:100%;background-color:#fff;padding:20px 50px;border:1px solid rgba(0,0,0,.125)}#articlepage h1{font-size:2rem}#articlepage img{max-width:100%}#searchimgwr .cardimagewr:hover{text-decoration:underline;color:#1d579d}#searchimgwr{--bs-gutter-x:.9rem;--bs-gutter-y:.9rem;width:calc(100% - 320px);float:left;min-height:650px}.btn,.card,.card-img,.card-img-top,.form-check-input[type=checkbox],.form-control{border-radius:0}.card-img-top{height:auto}#load_data_message img{width:48px}.btn-custom{background-color:#ff1e74;border:none;color:#fff}.btn-custom:hover{background-color:#ff7bad;color:#fff}.form-group{margin-bottom:1rem}#theform .form-control2{width:calc(100% - 30px);margin-left:10px;float:left}#theform label{margin-bottom:.5rem}#theform .formnum{width:20px;float:left;line-height:2.2rem;margin-top:1rem}#morecurrentwebsites,#moreownwebsites{margin-top:-1.5rem}#morecurrentwebsites input,#moreownwebsites input{margin-top:1rem}#morecurrentwebsites input:last-child,#moreownwebsites input:last-child{margin-bottom:1.7em}#morecurrentwebsitelink,#moreownwebsitelink{margin-bottom:1rem;display:block;margin-top:.5rem}#theform .form-group:nth-child(2){margin-bottom:0}#theform .form-group:nth-child(2) .formnum{margin-top:0}.redcolor{color:#ff1818!important}.isDisabled{cursor:not-allowed}.blackgray,.hasMargin strong,h1,h2,h3,h5,p{color:#222}#sortClear{color:#a4a4a4;text-decoration:none}#sortClear:hover{text-decoration:underline}.sortactive{background-color:#e6e6e6;padding:2px 10px 4px 10px;cursor:default!important;text-decoration:none!important}
32#news-pagination{width:calc(100% - 10px);clear:both;line-height:2em;float:left;font-weight:700}#news-pagination a,#news-pagination strong{background-color:#fff;padding:10px 20px;text-decoration:none;color:#222;font-size:15px;border:1px solid #999}#news-pagination a:hover,#news-pagination strong{background-color:#999;color:#fff}h1{font-size:1.1rem}#searchpage h1{font-weight:600}#searchpage{min-height:1000px}h2{font-size:1.45rem}h3{font-size:1.3rem}h4{font-size:1.15rem}h1 span{font-weight:400}.navbar-brand{background-image:url('https://pngset.com/assets/image/logo.png');background-size:contain;height:64px;width:225px;background-repeat:no-repeat}.header-nav form{width:calc(100% - 200px)}.btn:active:focus,.btn:focus,.form-control:focus{box-shadow:none}.container-xxl{min-height:1000px}footer{color:#fff;clear:both}footer .col-sm-8{text-align:left}footer a{color:#fff !important;text-decoration:none;width:100%;display:block}footer a,footer span{line-height:40px;vertical-align:middle}.card-title{font-weight:400;border-bottom:1px solid #ccc;margin-bottom:0;text-align:center;font-size:.8rem;padding:0 .25rem .5rem}.card-body{padding:.5rem}.card-text{font-size:.8rem}#homeform .btn{line-height:16px;width:70px}.width50{width:142px;margin-top:1rem;background:rgba(68,68,68,.71);color:#fff;position:relative;z-index:1;border:none;font-size:.9rem}.colorfulbg{background:linear-gradient(45deg,#164678 0,#2f82ff 100%);color:#fff;border:none;position:relative;z-index:1;font-size:.9rem}.colorfulbg .icon-search{font-size:1rem}.colorfulbg:hover::before,.width50:hover::before{opacity:1}.colorfulbg::before,.width50::before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#103256 0,#2466ca 100%);z-index:-1;transition:opacity .2s linear;opacity:0}.colorfulbg:hover,.width50:hover{color:#fff;text-decoration:none}#homeform input::-webkit-search-cancel-button{-webkit-appearance:none}#mini-search{width:25px;height:25px;position:absolute;top:11px;right:13px;color:#1d579d;cursor:pointer}#mini-search .icon-search{font-size:1.8rem}#homeform{display:none}.content-wr{width:calc(100% - 330px);background-color:#fff;margin-right:30px;padding-top:13px;padding-bottom:13px;border:1px solid rgba(0,0,0,.125)}.content-wr img{margin:0 auto;display:block;z-index:2;position:relative;width:840px;max-width:100%;height:auto}.right-wr{width:300px;padding:0}.downloadbtn{width:100%;height:50px}#tags{margin-left:29px;color:#777}#tags .btn{margin-bottom:5px;line-height:1rem;font-size:.9rem;border:1px solid #cecece;color:#777}#post-relatedtags h2,#tagsheading{font-size:23px;margin-left:2px;font-weight:400}#homeform .btn,#homeform .form-control,.header-nav a.btn{padding-top:.6rem;padding-bottom:.6rem}#homeform .form-control{border-top-right-radius:0;border-bottom-right-radius:0}#homeform .form-control::-webkit-input-placeholder{color:#ccc}#homeform .form-control:-moz-placeholder{color:#ccc;opacity:1}#homeform .form-control::-moz-placeholder{color:#ccc;opacity:1}#homeform .form-control:-ms-input-placeholder{color:#ccc}#homeform .form-control::-ms-input-placeholder{color:#ccc}#homeform .form-control::placeholder{color:#ccc}#homeform .btn{border-top-left-radius:0;border-bottom-left-radius:0}#tagreadmore{font-style:italic;cursor:pointer;font-size:.9em;text-decoration:underline;margin-left:7px}#postinfo2{font-size:.8em;margin:18px 12px 20px;background-color:#fff;border:1px solid rgba(0,0,0,.125);padding:12px;width:calc(100% - 24px)}#postinfo2 span{cursor:pointer}#postinfo2 .icon-sort,#postinfo2 .icon-sort-asc,#postinfo2 .icon-sort-desc{font-size:.7rem}#postinfo2 .icon-sort-asc{vertical-align:bottom}.photocount{font-size:.75em;border-bottom:2px solid #1d579d;display:inline-block;padding:0 0 5px!important;margin-bottom:0}.card-overlay{opacity:0;transition:opacity .2s;-webkit-transition:opacity .2s;position:absolute;top:.5rem;left:.5rem;right:.5rem;bottom:35px;z-index:999;background-color:rgba(0,0,0,.5);cursor:pointer;color:#fff;padding:5px 20px}.card-body a{color:#222;text-decoration:none}.card a{margin-bottom:0;color:#222;text-decoration:none;display:block;padding:.5rem}#popbox p{line-height:18px;margin-bottom:.5rem;float:left;clear:both;width:calc(100% - 25px)}.hasMargin{margin-left:25px}
32header .header-nav{border-bottom:1px solid #f0f0f0;outline:1px solid rgba(0,0,0,.1)}#homepage header{background-image:url('https://pngset.com/assets/image/bg.jpg');background-color:#90e789;background-repeat:no-repeat;background-size:cover;padding-bottom:30px;height:415px;overflow:hidden}#homepage header a.home-brand img{width:200px;margin-top:29px}#homepage header a.btn{margin-top:32px}#hometext{clear:both;width:70%;text-align:center;margin:55px auto 0}#homeh1{max-width:600px;margin:0 auto 1rem;font-size:33px;line-height:36px}.graycolor{color:#777}#homepage #homeform .form-control{height:60px}#tagcloud a{margin:0 10px;text-decoration:none}.tag-5,.tag-5:hover{font-size:.7rem;color:#79df96}.tag-4,.tag-4:hover{font-size:.75rem;color:#ddf2e1}.tag-3,.tag-3:hover{font-size:.85rem;color:#c8e7fd}.tag-2,.tag-2:hover{font-size:1rem;color:#b8f573}.tag-1,.tag-1:hover{font-size:1.4rem;color:#06acc4}.bg-dark{background-color:#38434e!important}.h1-wr:before{content:"";background-color:#5e5e5e;height:1px;position:absolute;top:50%;width:100%;left:0}.h1-wr p{background-color:#38434e;-moz-box-sizing:border-box;padding:8px 20px 0;line-height:27px;display:inline-block;position:relative;letter-spacing:3px;font-size:1.6rem;color:#9d9d9d;font-weight:400;margin-top:0;margin-bottom:.5rem}.h1-wr span{background-color:#f5f5f5;-moz-box-sizing:border-box;padding:0 20px;text-transform:uppercase;line-height:30px;display:inline-block;position:relative;letter-spacing:3px;font-size:1.5rem}.h1-wr span{font-size:15px;line-height:15px;padding:25px 10px 20px;text-transform:lowercase;color:#727272}.h1-wr{position:relative}.h1-wr-span{color:#727272}.h1-wr-span:before{top:57%;background-color:#727272}#image-bottom-text{max-width:840px;margin:15px auto 0;line-height:25px}#image-bottom-text .icon-heart{color:#ff1818}.socials span{font-size:40px;cursor:pointer}.socials .icon-facebook-square{color:#1877f2}.socials .icon-pinterest-square{color:#bd081c}.socials .icon-twitter-square{color:#55acee}.socials span:hover{opacity:.9}#home-articles p.card-text{height:59px;margin-top:5px;overflow:hidden}#home-articles .card-title{height:38px;overflow:hidden;line-height:18px}#home-articles .card img{background:initial}#post-relatedtags .img-wr{text-align:center;height:240px;background-image:url('https://pngset.com/assets/image/onerowchess.png');background-size:100% auto}#homepage #post-relatedtags .img-wr{height:330px}#post-relatedtags img{height:auto;width:auto;margin:auto;max-height:100%;max-width:100%;background:initial}@media (min-width:576px){#sortdownloads:hover,#sortlikerating:hover,#sortsumsize:hover{text-decoration:underline}#tags .btn:hover{background-color:#fff;color:#1d579d;border:1px solid #1d579d}#tagcloud a:hover{text-decoration:underline}footer a{width:unset;display:unset}footer a:hover{color:#fff;text-decoration:underline}footer .col-sm-8{text-align:right}#homeform{display:flex;max-width:850px;margin-right:auto}#homepage #homeform{max-width:unset;margin-left:auto}#homeform .btn{width:90px}}@media (min-width:768px){.card-likewr,.card-sizes{z-index:1000;position:absolute;top:14px;cursor:pointer;color:#fff;background:rgba(33,37,41,.7);
32height:27px;font-size:.9em;text-align:center;padding-left:9px;padding-right:9px;padding-top:1px}.card-like,.card-sizes{font-size:.89em;vertical-align:middle;z-index:999999}.card-like:hover{zoom:120%;color:#ff1818}.card-sizes{left:10px}.card-likewr{right:10px;width:68px}.cardimagewr:hover .card-overlay{opacity:1}.card-likewr, .card-sizes{transform: scale(0);transition: transform .5s;}.cardimagewr:hover .card-likewr,.cardimagewr:hover .card-sizes{-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}}@media (min-width:992px){#articlepage{max-width:960px}}@media (min-width:1400px){.container-xxl{max-width:1600px}}.grid-item{width:12.5%}@media (max-width:2199.98px){.grid-item{width:14.28%}}@media (max-width:1999.98px){.grid-item{width:16.66%}}@media (max-width:1799.98px){.grid-item{width:20%}#homepage #post-relatedtags .img-wr{height:300px}}@media (max-width:1599.98px){.grid-item{width:25%}#post-relatedtags .img-wr, #homepage #post-relatedtags .img-wr{height:245px}}@media (max-width:1399.98px){#homeform{max-width:700px}.grid-item{width:25%}#post-relatedtags .img-wr{height:270px}#homepage #post-relatedtags .img-wr{height:285px}}@media (max-width:1199.98px){#homeform{max-width:550px}.grid-item{width:33.33%}#post-relatedtags .img-wr{height:200px}#homepage #post-relatedtags .img-wr{height:230px}}@media (max-width:991.98px){#post-relatedtags .img-wr, #homepage #post-relatedtags .img-wr{height:250px}.grid-item{width:50%}.content-wr{width:100%;margin-right:0}.right-wr{width:500px;max-width:100%;margin-top:3rem;margin-left:auto;margin-right:auto}.hideondesktop{display:block}#homeform{max-width:370px}#homeh1{font-size:29px;line-height:30px}#hometext{width:80%}#homepage #homeform{display:flex}.width50{width:calc(50% - 8px)}}@media (max-width:767.98px){.navbar-brand{width:179px;height:50px;margin-right:0}#post-relatedtags .img-wr, #homepage #post-relatedtags .img-wr{height:290px}.grid-item{width:50%}#homeform{max-width:215px}.card-overlay{display:none}.card-body a:hover{text-decoration:underline;text-decoration-color:#ff1e74}.card-likewr,.card-sizes{display:none}#image-bottom-text{position:relative;margin-bottom:40px}#authorwr{position:absolute;top:30px;left:0;display:block}}@media (max-width:575.98px){#homeh1{font-size:26px;line-height:27px}#post-relatedtags .img-wr, #homepage #post-relatedtags .img-wr{height:auto}.grid-item{width:50%}#homeform{max-width:unset}.header-nav form{position:absolute;top:67px;width:100%;left:0;right:0;z-index:10000}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;height:1em;width:1em;background:url(../image/times-circle.svg) no-repeat 50% 50%;background-size:contain;opacity:0;pointer-events:none}input[type=search]:focus::-webkit-search-cancel-button{opacity:.3;pointer-events:all}.header-nav a.btn{margin-right:50px;padding:.4rem}#hometext{width:95%}#mini-search{top:16px}}@media (max-width:369.98px){#homepage header a.home-brand img{width:160px;height:auto}#homepage header a.btn{margin-top:27px}#homeh1{font-size:26px;line-height:27px}.header-nav a.btn{line-height:1.2;font-size:.9rem}.header-nav form{top:59px}.navbar-brand{height:42px;width:150px}#mini-search .icon-search{font-size:1.5rem}}@media (max-width:349.98px){.width50{font-size:.9rem}.navbar-brand{height:35px;width:123px}.header-nav a.btn{font-size:.7rem}#mini-search{top:12px}.header-nav form{top:52px}}.useravatar{margin-left:7px;width:25px;height:25px;background-color:#636c76;border-radius:50%;display:inline-block;color:#fff;text-align:center}h4.modal-title{font-size:1em;line-height:1;color:#3b3b3b}@media (min-width:576px){.modal-dialog{margin:30px auto}.modal-body,.modal-header{padding-left:30px;padding-right:30px}}.modal-header .close{font-size:30px;font-weight:700;transition:.3s;margin:-22px -15px -22px auto;color:#414141}.modal-header .close:hover{outline:0}.modal-content{border-radius:0}.close{position:absolute;top:21px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s;background:unset;border:unset}.close:focus,.close:hover{color:#bbb;text-decoration:none;cursor:pointer}.modal{background-color:rgba(0,0,0,.9)}#sendmessage{padding-top:30px}
32#sendmessage .modal-content,#sendmessage button,#sendmessage input,#sendmessage textarea{border-radius:0}#sendmessage form label{display:inline-block;width:120px;margin-bottom:.5rem}#sendmessage form input{display:inline-block;width:calc(100% - 126px)}.icon-envelope-o:hover{color:#1d579d;cursor:pointer}#send-envelope{font-size:1.15rem;margin-right:7px;margin-left:.5rem}.deletebtn{width:100%;margin-top:1rem}#istockpromotionwr{background:#f54336;text-align:center;padding:12px;padding-top:8px;color:#fff;position:sticky;top:0;z-index:9999;margin-top:10px; height: 64px;transition: opacity 1s ease-out;}#istockpromotionwr a{color:#fff;border:1px solid #fff!important;height:40px;margin-left:1.5rem;box-shadow:none;padding-top:0.315rem;margin-top:3px}#istockpromotionwr a:hover{background:#ca0e00}#istockpromotiontext{vertical-align:middle;line-height:40px;color:#fff;display:inline}.istockpromotion{padding-right:15px;padding-left:15px}#istockpromotionwr .istockpromotion{width:100%;max-width:1600px;margin-right:auto;margin-left:auto;position:relative}#dismissbutton{color:#fff;cursor:pointer;background-image:url('https://pngset.com/assets/image/close.svg');opacity:.5;background-size:40px;background-position:-10px;height:40px;width:20px;border:none!important}#dismissbutton2{color:#fff;cursor:pointer;border:none!important;line-height:10px;padding:4px 8px;background:#9f9f9f;border-radius:0;font-weight:600;font-size:.65rem}#dismissbuttonwr{width:40px;position:absolute;top:4px;right:10px}#dismissbuttonwr2{position:absolute;top:-22px;right:0}#dismissbutton:hover{opacity:1;border:none!important}#shutter-sticky-wr{position:fixed;bottom:0;left:0;right:0;z-index:16777271;display:none}#shutter-sticky{max-width:728px;margin:0 auto;position:relative}@media (max-width:560px){.istockpromotion{padding-right:25px;padding-left:25px}#dismissbuttonwr{right:0}}@media (max-width:475px){#istockpromotionwr a{margin-left:0}#istockpromotionwr{padding:6px 12px 12px 12px}}@media (max-width:390px){.istockpromotion{padding-left:0}#istockpromotionwr a{margin-left:15px}}#floating-div22{width:300px;float:right;margin:0;height:600px;position:-webkit-sticky;position:sticky;top:94px}@media screen and (max-width:736px){#floating-div22,#shutterright{display:none}#searchimgwr{width:calc(100% + 14px)}}@media screen and (max-width:991.99px){#shutterright2{display:none}}#shutterstockwr,#shutterstockwr2,#shutterstockwr4{overflow:hidden}#shutterstockwr4{margin-left:-5px;margin-right:-5px}#shutterstockwr .item,#shutterstockwr2 .item,#shutterstockwr4 .item{float:left;margin:5px;border:1px solid #bababa;box-sizing:content-box;overflow:hidden;position:relative;background:0 0!important}#shutterstockwr .item:hover,#shutterstockwr2 .item:hover,#shutterstockwr4 .item:hover{border-color:#091d6e}#shutterstockwr .item img,#shutterstockwr2 .item img,#shutterstockwr4 .item img{width:100%;height:100%}#shutterstockwr .item a,#shutterstockwr2 .item a,#shutterstockwr4 .item a{display:block;position:absolute;top:0;right:0;bottom:-12px;left:0}#shutterstockcoupon,#shutterstockcoupon3,.searchshutterstockcoupon2{text-align:right;margin-right:45px;margin-bottom:7px;font-size:1.1rem!important;margin-top:3px}#shutterstockcoupon2:not(.searchshutterstockcoupon2){font-size:.9rem!important}#shutterstockcoupon2{text-align:right;margin-right:45px;margin-bottom:7px;margin-top:3px}#shutterstockcoupon a,#shutterstockcoupon2 a,#shutterstockcoupon3 a{color:#323232;text-decoration:none}#shutterstockcoupon a:hover,#shutterstockcoupon2 a:hover,#shutterstockcoupon3 a:hover{text-decoration:underline}#shutterstockcoupon strong,.searchshutterstockcoupon2 strong{color:#ff2414;font-size:1.2rem;letter-spacing:.1rem}#shutterstockcoupon2 strong:not(.searchshutterstockcoupon2){color:#ff2414;font-size:1rem;letter-spacing:.1rem}#shutterstockcoupon3 strong{color:#ff2414;letter-spacing:.1rem}@media (max-width:736px){#content-left{width:100%}#shutterstockcoupon,#shutterstockcoupon2,#shutterstockcoupon3{font-size:.8rem!important;text-align:center;margin-right:0}#shutterstockcoupon strong,#shutterstockcoupon2 strong,#shutterstockcoupon3 strong{font-size:1rem!important}}@media (max-width:575.98px){#sortdownloads:active,#sortlikerating:active,#sortsumsize:active{text-decoration:underline}#tags .btn:active{background-color:#fff;color:#1d579d;border:1px solid #1d579d}#tagcloud a:active{text-decoration:underline}footer a:active{color:#fff;text-decoration:underline}#shutterstockcontainerid{margin:15px -33px;width:calc(100% + 66px)}}.shutterstockmobile{width:300px;height:250px;max-width:100%;margin:0 auto;overflow:hidden}.shutterstockdesktop{width:728px;height:90px;max-width:100%;margin:0 auto;overflow:hidden}#shutterstockwr,#shutterstockwr2{min-height:450px;float:left;width:100%}.shutterstockcontainer{border:1px solid rgba(0,0,0,.125);padding:10px 15px 15px 15px;background-color:#fff;border-radius:.25rem;width:calc(100% - 30px);float:left;margin:15px}.userimagewr .shutterstockcontainer{margin:15px 0;width:100%}@media (min-width:768px){#shutterstockwr,#shutterstockwr2{min-height:265px}}.shutterstockcontainerright{background-color:unset;border:none;width:100%;padding:0;margin:0}.shutterstockcontainerright #shutterstockcoupon3{font-size:1rem!important;text-align:center;margin-right:0}#istockpromotionwrlink{display:block;position:sticky;top:-1px;z-index:9999}#shutterright2{position:sticky;top:80px;margin-left:3px}@media (min-width:992px){#post-relatedtags .col-lg-3{width:33.333333333%}#homepage #post-relatedtags .col-lg-3{width:25%}}@media (min-width:1200px){#post-relatedtags .col-xl-2{width:33.333333333%}}@media (min-width:1400px){#post-relatedtags .col-xl-2{width:25%}#homepage #post-relatedtags .col-xl-2{width:16.6666666667%}}@media (min-width:1800px){#post-relatedtags .col-xl-2{width:16.6666666667%}}@media (max-width:991.98px){#imgpage .content-wr{border:none}#imgpage .shutterstockcontainer{border-left:unset;border-right:unset;padding-left:6px;padding-right:5px;border-radius:0}#imgpage .content-wr .shutterstockcontainer{border:none;padding-left:0;padding-right:0;margin-left:-5px!important;
32width:calc(100% + 11px)!important}#imgpage{padding-left:0;padding-right:0;width:calc(100%)}}#iconforcopy{position:absolute;left:0;top:0;line-height:40px;padding:0 10px;color:#666}.tooltip2{position:relative;display:inline-block;width:100%}.tooltip2 .tooltiptext{background-color:rgba(0,0,0,.71);color:#fff;text-align:center;position:absolute;z-index:1;bottom:115%;left:50%;margin-left:-47px;opacity:0;transition:opacity .3s;padding:.375rem .75rem;font-size:.9rem;line-height:1.5}.tooltip2 .tooltiptext::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#555 transparent transparent transparent}#downloadorwr h4{color:#4a4a4a;font-size:1.2rem}#downloadorwr{text-align:center;transition:height .3s ease-out;height:0;overflow:hidden;}#downloadorwr p{font-size:.8em;margin-bottom:0;margin-top:.5em}#downloadorwr p{color:#4a4a4a;font-size:1rem}#downloadorwr input{color:#666;cursor:pointer;display:inline-block;font-size:12px;height:40px;line-height:40px;overflow-y:hidden;overflow-x:scroll;padding:0 0 0 31px;position:relative;white-space:nowrap;width:100%}@media (max-width:991.98px){#downloadorwr{padding-right:calc(var(--bs-gutter-x)/ 2);padding-left:calc(var(--bs-gutter-x)/ 2)}}#countdownwr{font-size:1em!important;margin-bottom:0!important;text-align:center;color:#222}#post-relatedtags{overflow:hidden} 33@media (max-width:599px){ 34 #istockpromotionwr{ 35 height: auto; 36 } 37} 38#shutter-wr a{ 39 display: inline-block; background-color: #000; 40} 41#shutter-wr a:hover img{ 42 opacity: .85; 43} 44#shutter-wr img{ 45 max-width: 100%; min-height: 90px; 46} 47.btn-outline-light { 48 color: #f8f9fa; 49 border-color: #f8f9fa; 50} 51.btn-outline-light:hover { 52 color: #000; 53 background-color: #f8f9fa; 54 border-color: #f8f9fa; 55} 56.input-group { 57 position: relative; 58 display: flex; 59 flex-wrap: wrap; 60 align-items: stretch; 61 width: 100%; 62} 63.input-group > .form-control, 64.input-group > .form-select { 65 position: relative; 66 flex: 1 1 auto; 67 width: 1%; 68 min-width: 0; 69} 70.input-group-text { 71 display: flex; 72 align-items: center; 73 padding: 0.375rem 0.75rem; 74 font-size: 1rem; 75 font-weight: 400; 76 line-height: 1.5; 77 color: #212529; 78 text-align: center; 79 white-space: nowrap; 80 background-color: #e9ecef; 81 border: 1px solid #ced4da; 82 border-radius: 0.25rem; 83} 84#changetags .input-group{ 85 width: 250px; margin-right:15px 86} 87#changetags .input-group-text{ 88 font-size: 1rem; cursor: default; color: #000; 89} 90.tag-5,.tag-5:hover{font-size:.7rem;color:#79df96}.tag-4,.tag-4:hover{font-size:.75rem;color:#ddf2e1}.tag-3,.tag-3:hover{font-size:.85rem;color:#c8e7fd}.tag-2,.tag-2:hover{font-size:1rem;color:#b8f573}.tag-1,.tag-1:hover{font-size:1.4rem;color:#06acc4} 91#changetags .tag-1{ 92 background-color: #06acc4; 93} 94#changetags .tag-2{ 95 background-color: #b8f573; 96} 97#changetags .tag-3{ 98 background-color: #c8e7fd; 99} 100#changetags .tag-4{ 101 background-color: #ddf2e1; 102} 103#changetags .tag-5{ 104 background-color: #79df96; 105} 106.facebook-b{ 107 background: #4267b2!important; 108 color: #fff!important; 109 font-size: 21px; 110 width: 100%; 111} 112.facebook-b .icon-facebook{ 113 font-size:31px;float: left; 114} 115.alert { 116 position: relative; 117 padding: 1rem 1rem; 118 margin-bottom: 1rem; 119 border: 1px solid transparent; 120 border-radius: 0.25rem; 121} 122.alert-danger { 123 color: #842029; 124 background-color: #f8d7da; 125 border-color: #f5c2c7; 126} 127.alert-success { 128 color: #0f5132; 129 background-color: #d1e7dd; 130 border-color: #badbcc; 131} 132.alert-warning { 133 color: #664d03; 134 background-color: #fff3cd; 135 border-color: #ffecb5; 136} 137.icon-facebook:before { 138 content: "\e900"; 139} 140.icon-user-circle-o:before { 141 content: "\f2be"; 142} 143#userimageheading h1{ 144 font-size: 2.2em; 145 line-height: 1em; 146 font-weight: 600; 147} 148#news-pagination strong.disabled:hover, #news-pagination strong.disabled{ 149 color:#bebebe; cursor: default; background-color:#fff; 150} 151 152.displayed p{ 153 display: inline-block; 154 vertical-align: middle; 155 line-height: 1.2; 156 color: #ffffff; 157 margin-bottom: .5rem; 158} 159 160.displayed div{ 161 position: absolute; 162 top: 0; 163 left: 0; 164 right: 0; 165 text-align: center; 166 font-size: 1.2rem; 167 z-index: 3; 168} 169</style> 170 <!--End of Custom Css--> 171 </head> 172 <body class="bg-light">
173 <header> 174 <nav class="header-nav navbar navbar-light"> 175 <div class="container-fluid"> 176 <a class="navbar-brand d-flex p-0" href="https://pngset.com/"></a> 177 <div class="d-block d-sm-none" id="mini-search"><span class="icon-search"></span></div> 178 <form id="homeform" action="https://pngset.com/free" method="get" onsubmit="return false"> 179 <input class="form-control border-0" type="search" placeholder="Search for PNG" aria-label="Search" id="homeforminput" autocomplete="off" required=""> 180 <button class="btn colorfulbg" type="submit" onclick="formsubmitbtn()"><span class="icon-search"></span></button> 181 </form> 182 <a href="https://pngset.com/userupload" class="btn colorfulbg">Upload PNG</a> 183 </div> 184 </nav> 185 </header> 186<!--<div class="container-fluid text-center mt-5">
187<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6342509377151357" 188 crossorigin="anonymous"></script>
188--> 189<!-- PNGSET test --> 190<!--<ins class="adsbygoogle" 191 style="display:block" 192 data-ad-client="ca-pub-6342509377151357" 193 data-ad-slot="9333313662" 194 data-ad-format="auto" 195 data-full-width-responsive="true"></ins>
196<script> 197 (adsbygoogle = window.adsbygoogle || []).push({}); 198</script>
198 199</div>--> 200 201<div class="container mb-5 mt-5" id="articlepage"> 202 203<div id="article-body"> 204<div class="text-center"> 205<img src="https://pngset.com/article-images/5-0.png" alt="PNG vs JPG: which one is better for your site development" title="PNG vs JPG: which one is better for your site development"/> 206</div> 207 <h1 class="mt-4">PNG vs JPG: which one is better for your site development</h1> 208 <p>Anytime you need to develop a website, you need to consider what kind of pictures you would be using on your site. If you choose the wrong image type, you can end up having a website that loads slowly. Likewise, you can eventually own a website that consumes visitors' data. When this happens, many people will resolve to get a better alternative to your site. Ultimately, it can lead you to own a website with a high bounce rate and even lower conversion rate.</p> 209 210<p>If you’re actually experiencing this nature of situation now, then learning about the distinction between PNG and JPG files will be of great necessity to you. It helps you understand which image format is appropriate for your website.</p> 211 212<p>So, let’s kick start this tutorial by first explaining what each term means.</p> 213 214<h2>So, what’s the meaning of PNG?</h2> 215 216<p>PNG is a word that represents Portable Network Graphics. This image format is an uncompressed raster image type.PNG has no copyright issues. It was more designed for transferring images on the web.</p> 217 218<h2>And what’s JPG?</h2> 219 220<p>The JPG stands for Joint Photographic Experts Group. Unlike the PNG file format, the JPG image can be compressed. It’s worthy to note that it doesn’t contain color palettes as far as color is concerned.</p> 221 222<p>Explicit details about PNG and JPG are well documented <a href="https://pngset.com/article/types-of-image-files-you-should-know">here</a>.</p> 223 224<p>As you might have wondered, the clear differences between PNG and JPG files are sizes and quality. When we talk about sizes, we’re much referring to what each image worth in Kilobyte or megabyte. In the actual sense, JPG files are usually heavier than PNG files. A JPG file of 20MB can actually be 2MB in PNG format. Looking at such a gap, you will realize that PNG files are lighter than JPG files. Meanwhile, the quality of each image format can be expressed in terms of resolution. JPG files have a higher level of resolution than PNG files. This is actually one great reason why JPG files eat up much space on your storage device.</p> 225 226<p>It’s not enough to compare both image formats without considering their PROS and CONS. Doing so affords us the opportunity to understand the various conditions at which we can use each image file format on our website.</p> 227 228<p>So, for more clarity, let’s start by treating the PROS and CONS of each image file format.</p> 229 230<p>What are the Pros and cons of PNG and JPG file format?</p> 231 232<p>The biggest merits of adopting the JPG file format for your website development lie in its ability to capture complex images. Don’t forget. JPG files have a great resolution. It implies that you can always see every detail in an image. So, if there is a section on your site that requires a detailed image, think of using JPG files.</p> 233 234<p>Remember: the compression of JPG files makes an image lose its quality.</p> 235 236<p>If your JPG file is heavy, compressing it would make the file lose some amount of quality.</p> 237 238<p>A huge drawback of the JPG file is its failure to support transparency. If you’ve got plenty of images that require a transparent background, JPG is not an option for you.</p> 239 240<p>You will need to edit the image using relevant software and transform it to PNG to enjoy the transfer option.</p> 241 242<p>Another huge disadvantage of JPG files lies in their various levels of compression. Anytime you compress the file, you’re likely going to lose a certain amount of details. In the end, you may end up getting a blurry result. And that won’t be good for your product or services display.</p> 243 244<p>So, generally, JPG files are cool for a site that requires hero images. They are also amazing for web pages with lots of images ranging from image galleries and albums to e-commerce catalogs.</p> 245 246<p>We’
246ve been discussing the Pros and Cons of JPG files for a while now.</p> 247 248<p>Let’s examine the merits and demerits of PNG files also so balance the evaluation.</p> 249 250<p>Please note that PNG file type is great for something – its compression is lossless. The reason for such a condition is simply because the file type holds more data than the JPG files. That distinct feature makes it easier to resize PNG files. It means that you can reduce the picture size to any amount of your choice. When you do so, there won’t be any need to worry about loss of quality. The details will be exactly as it is when enlarged.</p> 251 252<p>It’s also important to mention that this file format support over 16 million colors. It also provides a transparency channel. It implies that anyone who needs an image without a background can resolve to use this image type. Most artworks are made in this file format. So, anytime you need a logo or icons for your website, you can always think about using PNG files.</p> 253 254<p>That’s brilliant right?</p> 255 256<p>Honestly, it’s a great one.</p> 257 258<p>But we can’t end this evaluation without talking about the downside of this file format. This file type also takes a huge amount of space on storage devices, if not compressed. When you export the bulk of elements on an AI as a PNG file, you’re likely going to end up getting a huge file size. So, anytime you’re working on a PNG file, always endeavor to compress it. Since compression doesn’t have a significant effect on your file, you’re sure of getting all details on the file.</p> 259 260<p>Also, note that PNG files are not great for dimensional images. This means that you can’t get photographic elements on PNG files. They are more suited for artwork. You can take a look at some examples of PNG files on this <a href="https://pngset.com/">link</a>.</p> 261 262<p>VERDICTS: Both JPG and PNG files are useful for web development. However, they work best in different areas of your website. You can always consider JPG images for showcasing an event regarding your product or services. Also, you can incorporate a JPG file into the header section of your site. However, if you need icons, avatar, and logo for your site, think of using PNG files.</p> 263</div> 264 265</div><footer class="container-fluid bg-dark"> 266 <div class="row m-0 py-4"> 267 <div class="col-sm-4"> 268 <span>© 2024 Pngset.com</span> 269 </div> 270 <div class="col-sm-8"> 271 <a class="me-sm-3" rel="nofollow" href="https://pngset.com/privacy-policy">Privacy Policy</a> 272 <a class="me-sm-3" rel="nofollow" href="https://pngset.com/license">License</a> 273 <a rel="nofollow" href="https://pngset.com/contacts">Contact Us</a> 274 </div> 275 </div> 276</footer> 277
278<script> 279document.getElementById("mini-search").onclick = function(){ 280 document.getElementById("homeform").classList.toggle("d-flex"); 281} 282</script>
282 283
284<script> 285function setCookie(cname, cvalue, exdays) { 286 var d = new Date(); 287 d.setTime(d.getTime() + (exdays * 60 * 1000)); 288 var expires = "expires="+d.toUTCString(); 289 document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; 290} 291 292function getCookie(cname) { 293 var name = cname + "="; 294 var ca = document.cookie.split(';'); 295 for(var i = 0; i < ca.length; i++) { 296 var c = ca[i]; 297 while (c.charAt(0) == ' ') { 298 c = c.substring(1); 299 } 300 if (c.indexOf(name) == 0) { 301 return c.substring(name.length, c.length); 302 } 303 } 304 return ""; 305} 306 307 function formsubmitbtn() { 308 var searchalias = document.getElementById("homeforminput").value.toLowerCase(); 309 if(searchalias != ''){ 310 var xhttp = new XMLHttpRequest(); 311 xhttp.open("GET", "https://pngset.com/trending/" + searchalias, true); 312 xhttp.send(); 313 314 searchalias = searchalias.replace(/%20/g, "-").replace(/`/g, "'").replace(/&/g, 'and').replace(/[_\s]/g, '-').replace(/[^a-z0-9-'\s]/gi, ''); 315 window.location.href = "https://pngset.com/free/" + searchalias; 316 } 317 } 318</script>
318 319
vendor: 5,472 bytes, lines 320-485
320<script> 321/*! 322 * Lazy Load - JavaScript plugin for lazy loading images 323 * 324 * Copyright (c) 2007-2019 Mika Tuupola 325 * 326 * Licensed under the MIT license: 327 * http://www.opensource.org/licenses/mit-license.php 328 * 329 * Project home: 330 * https://appelsiini.net/projects/lazyload 331 * 332 * Version: 2.0.0-rc.2 333 * 334 */ 335 336(function (root, factory) { 337 if (typeof exports === "object") { 338 module.exports = factory(root); 339 } else if (typeof define === "function" && define.amd) { 340 define([], factory); 341 } else { 342 root.LazyLoad = factory(root); 343 } 344}) (typeof global !== "undefined" ? global : this.window || this.global, function (root) { 345 346 "use strict"; 347 348 if (typeof define === "function" && define.amd){ 349 root = window; 350 } 351 352 const defaults = { 353 src: "data-src", 354 srcset: "data-srcset", 355 selector: ".lazyload", 356 root: null, 357 rootMargin: "0px", 358 threshold: 0 359 }; 360 361 /** 362 * Merge two or more objects. Returns a new object. 363 * @private 364 * @param {Boolean} deep If true, do a deep (or recursive) merge [optional] 365 * @param {Object} objects The objects to merge together 366 * @returns {Object} Merged values of defaults and options 367 */ 368 const extend = function () { 369 370 let extended = {}; 371 let deep = false; 372 let i = 0; 373 let length = arguments.length; 374 375 /* Check if a deep merge */ 376 if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") { 377 deep = arguments[0]; 378 i++; 379 } 380 381 /* Merge the object into the extended object */ 382 let merge = function (obj) { 383 for (let prop in obj) { 384 if (Object.prototype.hasOwnProperty.call(obj, prop)) { 385 /* If deep merge and property is an object, merge properties */ 386 if (deep && Object.prototype.toString.call(obj[prop]) === "[object Object]") { 387 extended[prop] = extend(true, extended[prop], obj[prop]); 388 } else { 389 extended[prop] = obj[prop]; 390 } 391 } 392 } 393 }; 394 395 /* Loop through each object and conduct a merge */ 396 for (; i < length; i++) { 397 let obj = arguments[i]; 398 merge(obj); 399 } 400 401 return extended; 402 }; 403 404 function LazyLoad(images, options) { 405 this.settings = extend(defaults, options || {}); 406 this.images = images || document.querySelectorAll(this.settings.selector); 407 this.observer = null; 408 this.init(); 409 } 410 411 LazyLoad.prototype = { 412 init: function() { 413 414 /* Without observers load everything and bail out early. */ 415 if (!root.IntersectionObserver) { 416 this.loadImages(); 417 return; 418 } 419 420 let self = this; 421 let observerConfig = { 422 root: this.settings.root, 423 rootMargin: this.settings.rootMargin, 424 threshold: [this.settings.threshold] 425 }; 426 427 this.observer = new IntersectionObserver(function(entries) { 428 Array.prototype.forEach.call(entries, function (entry) { 429 if (entry.isIntersecting) { 430 self.observer.unobserve(entry.target); 431 let src = entry.target.getAttribute(self.settings.src); 432 let srcset = entry.target.getAttribute(self.settings.srcset); 433 if ("img" === entry.target.tagName.toLowerCase()) { 434 if (src) { 435 entry.target.src = src; 436 } 437 if (srcset) { 438 entry.target.srcset = srcset; 439 } 440 } else { 441 entry.target.style.backgroundImage = "url(" + src + ")"; 442 } 443 } 444 }); 445 }, observerConfig); 446 447 Array.prototype.forEach.call(this.images, function (image) { 448 self.observer.observe(image); 449 }); 450 }, 451 452 loadAndDestroy: function () { 453 if (!this.settings) { return; } 454 this.loadImages(); 455 this.destroy(); 456 }, 457 458 loadImages: function () { 459 if (!this.settings) { return; } 460 461 let self = this; 462 Array.prototype.forEach.call(this.images, function (image) { 463 let src = image.getAttribute(self.settings.src); 464 let srcset = image.getAttribute(self.settings.srcset); 465 if ("img" === image.tagName.toLowerCase()) { 466 if (src) { 467 image.src = src; 468 } 469 if (srcset) { 470 image.srcset = srcset; 471 } 472 } else { 473 image.style.backgroundImage = "url('" + src + "')"; 474 } 475 }); 476 }, 477 478 destroy: function () { 479 if (!this.settings) { return; } 480 this.observer.disconnect(); 481 this.settings = null; 482 } 483 }; 484 485 root.lazyload = function(images, options) {
486 return new LazyLoad(images, options); 487 }; 488 489 if (root.jQuery) { 490 const $ = root.jQuery; 491 $.fn.lazyload = function (options) { 492 options = options || {}; 493 options.attribute = options.attribute || "data-src"; 494 new LazyLoad($.makeArray(this), options); 495 return this; 496 }; 497 } 498 499 return LazyLoad; 500}); 501 502let images = document.querySelectorAll(".lazyload"); 503new LazyLoad(images, { 504 root: null, 505 rootMargin: "100px", 506 threshold: 0 507}); 508</script>
508 509
510<script> 511var user = getCookie("promotionblock"); 512 513function istockpromotionsize(x) { 514 if (x.matches) { // If media query matches 515 document.getElementById("istockpromotiontext").innerHTML = '<p id="istockpromotiontext"><span style="border-radius: 5px; margin-right: 6px;vertical-align: initial;padding: 2px 5px 3px; background: rgba(68, 68, 68, 0.15);">OFFER</span> Save 15% off <img style="width: 105px;margin-right: 4px;margin-left: 4px;margin-top: -5px;" src="https://pngset.com/assets/image/shutterstock.png"/> images</p><a target="_blank" href="https://shutterstock.7eer.net/c/2201181/738175/1305" class="btn">Download now</a><img height="0" width="0" src="https://shutterstock.7eer.net/i/2201181/738175/1305" style="position:absolute;visibility:hidden;" border="0" />'; 516 } else { 517 document.getElementById("istockpromotiontext").innerHTML = '<img style="width: 140px;margin-right: 15px;margin-top: -2px;" src="https://pngset.com/assets/image/shutterstock.png"/><span id="istockpromotiontext"><span style="border-radius: 5px; margin-right: 6px;vertical-align: initial;padding: 2px 5px 3px; background: rgba(68, 68, 68, 0.15);">OFFER</span> Save 15% off Shutterstock images</span><a target="_blank" href="https://shutterstock.7eer.net/c/2201181/738175/1305" class="btn">Download now</a><img height="0" width="0" src="https://shutterstock.7eer.net/i/2201181/738175/1305" style="position:absolute;visibility:hidden;" border="0" />'; 518 } 519} 520 521var x = window.matchMedia("(max-width: 768px)") 522istockpromotionsize(x) // Call listener function at run time 523x.addListener(istockpromotionsize) // Attach listener function on state changes 524 525document.getElementById("dismissbutton").onclick = function(){ 526 setCookie("promotionblock", 1, 10); 527 document.getElementById("istockpromotionwr").style.opacity = "0"; 528 setTimeout(function(){ 529 document.getElementById("istockpromotionwr").style.display = "none"; 530 document.getElementById("floating-div22").style.top = "22px"; 531 }, 1000); 532} 533</script>
533 534 535 536 537 538<!-- Google tag (gtag.js) -->
vendor: 65 bytes, lines 538-539
538 539<script async src="https://www.googletagmanager.com/gtag/js?id=
539G-T83NRDFDVL
vendor: 13 bytes, line 539
539"></script>
540<script> 541
vendor: 138 bytes, lines 541-545
541window.dataLayer = window.dataLayer || []; 542 function gtag(){dataLayer.push(arguments);} 543 gtag('js', new Date()); 544 545 gtag('config', '
545G-T83NRDFDVL
vendor: 5 bytes, line 545
545');
546</script>
546 547
547<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a4418f95ec03d240',t:'MTc5MDkyMTYwMw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
547<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"6b552ce4a6154c9aa60e865cd5efddd2","r":1,"spa":2}' crossorigin="anonymous"></script>
547 548</body> 549</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.