Assets all text in the files lowercase such as jpgs, pngs and svgs.
1. Open image in photoshop
For image full width will be 2400px and reduce image ratio as match as possible as per the original design.
2. Export as web asset
- To save the image for web go to File > Export > Save for Web (Legacy). Under preset make sure the image is JPEG
and change quality to 72 then click Save. For the keyboard shortcut to bring up this menu put in Alt+Shft+Ctrl+S.
3. Install ImageOptim into Applications folder.
4. Open ImageOptim App and drag images into the App.
5. Pack images into the zip file and send to developer team for
Save images in .jpg, .gif, or .png format only.
Ensure a favicon that the image is saved as an .ico or a .png file.
Only use letters, numbers, underscores, and hyphens in file names. Other characters (like question marks, percent signs, and ampersands) may upload incorrectly or cause unexpected behavior in galleries.
There is an image resolution limit of 60 MP (megapixels).
Save images in RGB color mode. Print mode (CMYK) won't render in most browsers.
The formatting animated .gifs in size you want them to display on your site.
Recommend using image files of less than 500 KB for best results, though the limit for an individual image upload is 20 MB.
*Please do not use an odd number on the image dimension.
Full Width Images
Recommend 2400x1600px, jpeg, saved for web, and optimized.
These areas can be hero images, full-screen slideshows, banner images and ensure that your full width images look good the recommended size is 2400x1600px.
- The devices have different ratio and it is possible your images will be cropped when viewed on web.
- Please ensure the image width size is 2400px, and the height will be different following the design but will require to keep the ratio as the original.
The dimensions of the original image you upload to your site can have a big impact on how it displays. We recommend using images that are between 1500 and 2500 pixels wide.
Images smaller than 1500 pixels may appear blurry or pixelated when they stretch to fill containers, such as banners.
In most cases, Squarespace will reformat large images to a maximum width of 2500 pixels. However, images added through Site Styles (background images and site-wide banner images) load at their original dimensions. This can cause page loading issues if the image is over 2500 pixels along its longest edge.
Inside Content Images
Horizontal – max width 1500px, jpeg, saved for web, and optimized.
Vertical – max width 1000px, jpeg, saved for web, and optimized.
Sub image with full width container
Recommend: Width: 1200px
Ensure each image you’re using has the same aspect ratio (height:width) before uploading, as images are typically cropped based on their width and height. If all your images have the same aspect ratio, it will be easier to anticipate how they'll crop. Such as slideshow galleries.
DPI and PPI
If you're concerned about image resolution, focus on the image's dimensions and keeping file sizes under 500 KB, rather than DPI (dots per inch) or PPI (pixels per inch). DPI and PPI affect an image's print quality, but not its web display.
To render correctly on a retina device, an image needs to be twice as big as its final display dimensions.
For example, if you want to add a 500×250 pixel image to the page, the corresponding image file needs to be 1000×500 pixels.
Responsive png, gif, and jpg images
Sometimes you need to include a photo. PNG, GIF, and JPG images are “raster images”, meaning that they are defined pixel-by-pixel instead of with vectors. As a result, they are much more sensitive to screen resolution than SVGs.
Responsive SVG Images
Browsers automatically scale up SVGs for retina devices, so this 500×250 pixel SVG image will render crisply on both standard and retina devices.
Now, consider a smartphone with a retina screen. Smartphones are typically less than 400 pixels wide in portrait mode, which means that the corresponding retina-quality image would only need to be 800(ish) pixels wide.
For the best image quality and playback, you should use width and height dimensions for your video that are multiples of 16; your next best choice is multiples of 8, and after that, multiples of 4.
The native encoding dimensions and the playback dimensions should be evenly divisible by the same number, ideally 16.
For example, if you encode your native file to use a frame dimension of 640×480, scale down to a size such as 320×240.
The following tables list a collection of width by height measurements by quality for 16:9 and 4:3 aspect ratios:
The format to rule is either WebM (VP8) or MP4 (H264). These will load in most browsers.
The best ways to optimize videos for web design are compression and conversion, which will help to drastically improve page load times and playback performance and convert the video content to WebM before using it in the website design but also provide an MP4 alternative in the rare case that WebM isn’t supported, the MP4 version will load instead.
The consistency design layout for the header, subheading, and title.
Please make sure that we do not use odd numbers because this will cause a responsive code.
We should use the consistency paddings and margins for the header which is the same design that will be easier to build as the template.
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
Responsive images are images that scale nicely to fit any browser size.
Using the width Property
If the CSS width property is set to 100%, the image can be scaled up to be larger than it's original size and follow the size of the browser window.
Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than it's original size
The text size can be set with a "vw" unit, which means the "viewport width". That way the text size will follow the size of the browser window:
In addition to resize text and images, it is also common to use media queries in responsive web pages. With media queries you can define completely different styles for different browser sizes.
resize the browser window to see that the three div elements below will display horizontally on large screens and stacked vertically on small screens: