{"id":16937,"date":"2012-05-06T15:16:17","date_gmt":"2012-05-06T22:16:17","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=16937"},"modified":"2020-02-04T12:39:55","modified_gmt":"2020-02-04T19:39:55","slug":"remove-width-and-height-attributes-from-inserted-images","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/wordpress\/remove-width-and-height-attributes-from-inserted-images\/","title":{"rendered":"Remove Width and Height Attributes From Inserted Images"},"content":{"rendered":"<p>When you upload an image through the WordPress media uploader and then insert it into the editor, it comes with width and height attributes. These are normally desirable, as it assists the browser in making the appropriate room for the image during layout. But if you want to remove the insert action from adding these attributes, you can add this code to your <code>functions.php<\/code> file or a functionality plugin of your own making:<\/p>\n<pre rel=\"PHP\"><code>add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );\r\nadd_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );\r\n\r\nfunction remove_width_attribute( $html ) {\r\n   $html = preg_replace( '\/(width|height)=\"\\d*\"\\s\/', \"\", $html );\r\n   return $html;\r\n}<\/code><\/pre>\n<p class=\"explanation\">Update: this is almost certainly a bad idea nowdays, since <code>width<\/code> and <code>height<\/code> help <a href=\"https:\/\/css-tricks.com\/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing\/\">reserve space for the image while loading<\/a>, even in fluid-width situations.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you upload an image through the WordPress media uploader and then insert it into the editor, it comes with width and height attributes. These are normally desirable, as it assists the browser in making the appropriate room for the image during layout. But if you want to remove the insert action from adding these [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3229,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[585,264],"acf":[],"jetpack-related-posts":[{"id":165586,"url":"https:\/\/css-tricks.com\/snippets\/html\/responsive-meta-tag\/","url_meta":{"origin":16937,"position":0},"title":"Responsive Meta Tag","date":"March 13, 2014","format":false,"excerpt":"I tend to use this: Although I see this is recommended a lot: This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way\u2026","rel":"","context":"With 56 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":332875,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/aspect-ratio\/","url_meta":{"origin":16937,"position":1},"title":"aspect-ratio","date":"January 20, 2021","format":false,"excerpt":"The CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box are calculated automatically as a ratio. It's a little math-y, but the idea is that you can divide one value by another on this property and the calculated value ensures\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":376323,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-width\/","url_meta":{"origin":16937,"position":2},"title":"border-image-width","date":"January 12, 2023","format":false,"excerpt":"The CSS border-image-width property is used to determine the width of the border\u2019s image file, as provided by the CSS border-image-source property. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 70; border-image-width: 40%; border-image-repeat: repeat; } CodePen Embed Fallback The border-image-width property is defined in the CSS Backgrounds and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":196150,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-size\/","url_meta":{"origin":16937,"position":3},"title":"background-size","date":"February 17, 2015","format":false,"excerpt":"The background-size property in CSS is one of the most useful \u2014 and most complex \u2014 of the background properties. There are many variations and different syntaxes you can use for this property, all of which have different use cases. Here\u2019s a basic example: html { background: url(greatimage.jpg); background-size: 300px\u2026","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":195512,"url":"https:\/\/css-tricks.com\/snippets\/sass\/maintain-aspect-ratio-mixin\/","url_meta":{"origin":16937,"position":4},"title":"Maintain Aspect Ratio Mixin","date":"February 10, 2015","format":false,"excerpt":"This article from July 2013 describes a method of using psuedo elements to maintain an elements aspect ratio, even as it scales. Here's a Sass mixin that simplifies the math a bit. @mixin aspect-ratio($width, $height) { position: relative; &:before { display: block; content: \"\"; width: 100%; padding-top: ($height \/ $width)\u2026","rel":"","context":"With 23 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350477,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/block-size\/","url_meta":{"origin":16937,"position":5},"title":"block-size","date":"August 25, 2021","format":false,"excerpt":"block-size is a CSS logical property that defines the height of an element when the writing-mode is horizontal, or the width of the element when the writing-mode is vertical. .element { block-size: 700px; writing-mode: vertical-lr; } block-size is defined in the CSS Logical Properties and Values Level 1 specification which\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16937"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=16937"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16937\/revisions"}],"predecessor-version":[{"id":303182,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16937\/revisions\/303182"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3229"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=16937"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=16937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}