How should one go about properly sizing and formatting image icons?

Currently, I'm exploring the most efficient ways to optimize image loading speed on a webpage. Specifically, I am looking for advice on the best method for resizing an image from 1600x900 to 890x500.

Method 1

Utilize the following code: 

<img src="myPic.png" height="500" width="890"/>

Method 2

If you prefer, resize the image using Photoshop or a similar tool and use: <img src="myPic.png"/>

Method 3

You can also resize the image in Photoshop and then insert it with this code: 

<img src="myPic.png" height="500" width="890"/>

Method 4

Consider utilizing CSS to manipulate the image size, possibly incorporating elements of the aforementioned methods.

Choosing the Optimal Picture Format

I am conflicted about selecting the best picture format. While GIFs can reduce file size, they often compromise quality. PNGs are known for their high quality but come with larger file sizes. On the other hand, I have avoided JPGs due to their relatively large file sizes and limited background capabilities.

I welcome any insights or recommendations on this topic! Thank you!

htmlcssimage

Answer №1

For optimal performance, it is recommended to resize the image before sending it to users in order to reduce its size. This will result in faster loading times for your page.

If you need to resize an image due to user uploads or incorrect dimensions, consider using CSS to resize it. By including all your CSS in a single file, it will be easier to manage.

When choosing the format for your images:

  • Use GIF for images without transparency
  • Use JPG for pictures only
  • Use PNG for images with transparency

Answer №2

  • Even when you specify width="0" height="0", your 1600x900 image will still be loaded by the browser.
  • In terms of performance, you can assist your browser by specifying the size using the width and height attributes.
  • The optimal image format? It really varies based on your requirements.
  • After cropping or resizing your image in Photoshop, navigate to Save for Web and experiment with the compressions and settings while always considering the balance between image size and quality.

Concerning .jpg, I am not sure what your viewpoint is. They are quite good.

  • An uncompressed .jpg image (natural) sized at 800x600 at best quality = 555KB
  • Same image optimized for web at quality 60 = 118KB
  • Optimized image for web at quality 60 with a slight blur of 0.5 = under 100KB (yes, the blur technique)

Differences? Hardly noticeable.

  • If you require flawless alpha opacity and transparency, opt for .png (support needed for older versions of Internet Explorer browsers)
  • If you need transparency and do not mind pixelated edges, choose .gif
  • If you require a simple background pattern, go for .gif

Answer №3

Step 5 - Resize myPic-small.png.

<a href="myPic-big.png"><img alt="..." src="myPic-small.png" /></a>

Additional tips:

  1. For JPEG, avoid using 100% quality. Opt for 85% - 90% for a good balance of quality and file size.
  2. Consider using PNG for images with few colors, when you require a lossless format, anticipate future editing, or need transparency effects.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the world of interactive storytelling through a basic PHP text adventure

I recently completed coding a text adventure using functions like fgets(STDIN) that works in the command line. Now, I want to convert it to run on HTML (internet browser) but I'm facing a challenge. I am unsure how to transition from this: $choose=0; ...

phphtmlfunction

The "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

I am currently working on an e-commerce website with a shopping cart feature. The cart displays the number of items added to it, which increases by one when 'Add to Cart' is clicked and decreases by one when 'Remove' is clicked. However ...

javascripthtmlcss

Ensure this div adapts to different screen sizes

I have attempted using a width of 100%, but unfortunately, it did not result in a responsive design. To illustrate my point, here is the link to what I am striving to achieve in terms of responsiveness: codepen link div { background:url(https://i.stac ...

htmlcss

What is the best way to retrieve a style property from a <style> tag using JavaScript?

Is there a way to retrieve CSS properties set in the <style> tag in JavaScript, rather than just those set in the element's style attribute? For example: <style> div{background:red;} </style> How can I access these styles, such ...

javascripthtmlcss

What is the best way to pass a variable in PHP and create an HTML link to a specific element ID simultaneously?

Formulating the question may be challenging, but the concept is quite straightforward: I'd like to pass the variable 'count' using GET and simultaneously direct to the media section. On the page http://page.org.mx/comunicados#media I&apo ...

phphtmlhyperlink

What is the best way to style a select element to achieve this appearance?

Currently working on converting a .psd file to html/css and encountering difficulty with a unique looking select element. Struggling to find a suitable example online for reference. Wondering if this design element is indeed a select element. ...

htmlcss

Display function not functioning properly following AJAX request

I'm working on a functionality where I want to initially hide a table when the page loads, and then display it with the results when a form is submitted using Ajax. The issue I'm facing is that the code refreshes the page and sets the table back ...

javascriptjqueryhtmlcssajax

The use of htmltools::tags$iframe in Shiny to display an HTML file is not functioning properly when combined with renderUI()

Hello everyone, this is my first question on StackOverflow. I hope you can help me out even though my question may not be in the correct format. I have an HTML widget that was created using flowmapblue.R and saved as a file that I want to display in a Mar ...

htmliframeshiny

Changing the Input Label Color on Hover in Material-UI TextField

I have a custom styled Mui TextField called CustomTextField. It changes the input background color and font color on hover, but I also want to change the label font color when hovered over. Currently, the input background changes from black to white on hov ...

cssreactjsmaterial-ui

When using v-select to search for items, the selected items mysteriously vanish from

I recently worked on a project where I encountered a similar situation to the one showcased in this CodePen. Here is the link to the specific CodePen One issue I faced was that the selected items would disappear when performing an invalid search. After i ...

javascripthtmlvue.jsvuejs2vuetify.js

Embed information from a MySQL database into an HTML layout

I have a main webpage containing various links (e.g. fist_link, second_link, etc...) When a user clicks on any link, it should open blank_template.html. If the user clicks on fist_link, the template should display the first string from the database table. ...

javascriptphphtmlmysql

Why Won't My PHP Form Submit on a Bootstrap Website?

I'm struggling with validation and need some assistance. I have a Bootstrap form embedded within an HTML page and a PHP script to handle the submission. However, whenever someone clicks on Submit, the page redirects to display my PHP code instead of a ...

javascriptphpjqueryhtml

Row in Bootstrap 3 fails to display correctly on medium-sized devices

Having trouble with divs of different sizes? I want a row that shows 3-column wide divs on medium & large screens and 6-column wide divs on small devices. <div class="container"> <div class="row"> <div class="service col-sm-6 col-md-3"& ...

csstwitter-bootstraptwitter-bootstrap-3

The method window.getComputedStyle retrieves the CSS max-height property containing an unresolved calc() function

Has anyone encountered a challenge with a function related to Angular in their project? Here is a snippet of the code causing issues: console.log(window.getComputedStyle(this.frontLayer.nativeElement).maxHeight); And within the component template: <di ...

javascriptcssangular

Using AJAX to dynamically edit and update PHP data

The information displayed on my index.php page is fetched from a database using the mysqli_fetch_array function. The data is presented in a table format with fields like Name, Age, Email, and Update. An edit button allows users to modify the data. Here is ...

javascriptphpjqueryhtmlajax

Stopping Accordion Title from Moving Vertically in Material-UI

Just finished creating this accordion which will be used as a menu item. However, I've encountered an issue where clicking on the Main title causes the accordion summary to move downward vertically. Any suggestions on how to keep the Main tile fixed ...

cssreactjsmaterial-ui

How to fetch select element within a table by using jQuery

I encountered a situation where I have a table element with a select element inside its td. The id of the table (in this example, it is "table1") could potentially change. So my query is, how can I retrieve the selected option using the table ID in JQuer ...

javascriptjqueryhtml

Is it possible to combine the :last-child pseudo-class with the universal selector (*) in CSS or Sass

Here is the code I am currently using: .loken5 * padding-right: 5px .loken5:last-child padding: 0 I am wondering if there is a way in SASS to achieve the same effect with just one '.loken5' tag for saving space. Thank you :) ...

csssass

Ways to modify the hue of an li element in the context menu upon hovering

I'm currently working on a project that involves VueJS and Bootstrap. To enhance user experience, I've incorporated a context menu using the npm package called vue-context Vue Context Menu When a user hovers over an item on the context menu, the ...

javascripthtmlcsstwitter-bootstrapvue.js

Replicate the anchor's functionality (opening in a new window when 'ctl' is pressed) when submitting a form

I have a question that may seem unconventional - Is there a graceful method to replicate the functionality of an anchor tag when submitting a form? I want users to be able to hold down the control key while submitting a form and have the result open in a ...

javascripthtmlforms